reco incover.jpg
 

Introduce to Reco

Reco Lab is a Start-Up founded in Boston. The company has an R&D team to operate the platform which is expected to produce creative and attractive Intellectual Products that prevent air pollution. 

In Jun 2020, Reco is about going to launch its first product - Reco Mask II, and plan to crowdfund the product on Indiegogo.

  • Designed and created a responsive landing page for Reco Mask II via WIX.

  • Strategy and design for the eCommerce site of Reco.

  • The visual style, user experience, brand identity.

What I did

  • Designed and created a responsive landing page for Reco Mask II via WIX.

  • Strategy and design for the eCommerce site of Reco.

  • The visual style, user experience, brand identity.

The landing page assisted RECO

25K+

Reached 25+ audience visit in 3 weeks during the first product launch

500

500 email subscriptions to Reco's newsletter

My works

A quick showcase of the works that I have designed for Reco​

reco showcase.jpg

Showcase of the Responsive Land Page

reco web showcase.jpg

Showcase of the Desktop eCommerce Site

reco phone showcase.jpg

Showcase of the Mobile eCommerce Site

NEXT...

Following I will show my process of designing the eCommerce site. Please take a look if you're interested.

 

MARKETING & USER RESEARCH

Who are the clients of the site?

When I receive the case, I first identified the target users with the marketing team and created the following client profiles to help me better understand the potential buyers of Reco products.

persona.jpg

Based on my client's goal, I defined the following requirements:

  • Highlight the product’s features through a neat and concise layout

  • Constructing trust by building brand relationships with users

  • Use product ratings & reviews to assist users in decision makings and allow users to provide feedback

  • Simplify ordering behavior and save user time through an efficient order checkout process

  • Encourage buyers to share their purchasing experience & photos on social media

Competitive Audit

In order to get inspiration, I defined 3 main competitor websites: Prana Air, Maskc, and AIO, which mainly also sell products that improve air and breathing quality. 

I also investigated three indirect competitors: Welly, Everlane, and Amazon.  I investigated these sites in order to look into the universal features of a successful eCommerce site and look for the potential opportunity that could make Reco-lab stand out. 

Competitive Analysis.png

Compare the characteristics of direct competitors and indirect competitors

Site Map

Based on the results of the competitive analysis and the client’s requirements, I made a site map in order to determine the architecture of the whole website. This is to ensure that all things are placed where users expect while making their shopping experience more intuitive.

Site Map.png

Site Map

Information Architecture

In order to fully understand how a user could browse the site, I made a diagram of the information architecture. It served to visualize the functions that the website should provide to users and the corresponding expansion of those functions. 

information architecture.png

System architecture diagram demonstrates how users can browse the website

User Flow

After determining the "level" of experience I need to provide for users, I created a user flow for each of the user personas in order to make their shopping experience more aligned to their goals and values.  The purpose of the user flow was to determine the relationships between the main pages and the corresponding user behaviors that each user takes. The user flow also helped me to divide the function and usage of each page when designing the website and provide users with a better shopping experience.

user flow persona 1.png
user flow 1.png

Debbie is unsure about what she wants. Therefore, she needs the site to navigate her through the decision process

user flow persona 2.png
user flow persona 2.png

Carter is looking for an efficient ordering process. As a new user, the user flow shows how the site will navigate him through the payment

 

PROTOTYPE

All the information I obtained from the research process helped me map out the content of the website and understand users' needs. Then, I started to draw sketches of several main pages with multiple iterations. After that, I invited 3 users to participate in a user testing session to verify whether these solutions would meet the mental model of my clients and users.

Then I began to use Sketch & Photoshop to create the medium-fidelity prototype to high-fidelity prototype.

Home Page

I tried to keep the homepage as neat and concise as possible to prevent users from being disturbed by too much information when they enter the site, but also to promote the branding theme of "fashion and free" at the same time.

Since RECO was a new brand for most users, promoting users' trust in the Brand was crucial. Based on marketing and user research, I put the Brand Concept and "Support By" sections at the very beginning of the home page to build the relationship between users and the brand. 

With mainly two products on sale at the time that the website will launch, having product introductions to both of the products could straightly tell users the features of the product as well as saving users' time. 

I also put an "Instagram Sharing" feature since the product will be propagated mainly on Instagram and it could also increase the trust of users in the product for a marketing purpose. 

VIEW IN PDF

I also designed a Lightbox that will automatically display at the bottom right of the page. The lightbox encourages users to sign up for RECO's newsletter, and eventually result in accelerating users’ sign-up rates by 200%.

card.png

Home Preview

Shop Page

When the user clicks the "SHOP" from the navigation bar, the user will go to a product list page. With only three listing products, the Shop page doesn't necessarily need a sort by or a filter function. I list the product in a concise card-like layout. A "stay tuned" card is mainly designed for returning users to ask them frequently check back as the new product launch.

store.png

VIEW IN PDF

Shop Preview

Product Detail Page

On the product details page, I hope to provide more comprehensive product details for users who have clicked in. 

I designed the "Active airflow", "Out-skin" and "Replaceable filter" sections as they were three main features that my client wants to advocate for the mask. From my market research, user review is a big reference on users' purchase decision. Therefore, I also designed a product review area so that users can provide any product feedback. 

At the same time, I designed a shopping cart preview window so that users can pass through to a more simplified and efficient ordering process. The shopping cart preview window will appear every time the user adds a product to their shopping cart. 

product.png

VIEW IN PDF

product  quick checkout.png

VIEW IN PDF

Quick Cart Preview

Product Detail Preview

Checkout Page

I designed a checkout page. Based on the client's requirement, I designed a recommendation area at the bottom of the page, the site will recommend other products to users based on the current products. 

checkout.png

VIEW IN PDF

Checkout Page

Responsive Mobile Design

Within the project scope, I also designed the responsive mobile version of the site.

home .png
store .png
product.png
checkout .png
 

Future Steps

​What this case study shows is just the beginning of the e-commerce website design. I don't have the chance to design all the pages during my contract period.  If I have the chance to follow up, I will continue to perform user tests and further iterate my design. If I have more time, I will complete the rest of the pages of the user center, sign-in/sign-up process, and purchase process. I will also continue to enrich the website pages and incorporate the visual style of RECO into the website.

I understand this project is more linear and may contain less design thinking process due to the requirements from my client's goals. If you are interested more in my design thinking process, please take a look at my ULI Project or ACOMP Project. Thanks For Reading!

What's written in the end