Design and product overview

Bottomless shopping experience redesign

Because of an unexpected opportunity, I got the chance to redesign a freshly roasted coffee startup’s official website for UX exercise. In this project, I redesigned the whole website for better user experience and presented all my design logic and idea for the startup’s holder.

The problem to solve

As a coffee startup with a great idea, bottomless has a massive problem that their official website is a disaster. As a UX designer, you can find everywhere thought the website has the UX problem which includes the website is inconsistent, no logic and clear user flow, weak visual design, bad shopping experience, ext. Since this is a design exercise, I need to redesign the whole website within three days, it is a big challenge for me to analysis all the feature Bottomless needs and generates a website which meets user’s need.

Interactive prototype

Click the image below to interact with this prototype

Design and feature analysis

As a start-up, I think to promote the product is the most critical feature for the website of Bottomless. For a reason above, I tried to analysis the current website's problem and found the information the website owner wants to show in front of the user is the first thing I think I need to do.

Design analysis

Shopping flow

Homepage

Subscription page

Shopping page

Market research and feature definition

User research

Though we only have seven days to work on this project, I still want to hear the voice from the user for the suggestion of the current website as more as possible. The main purpose of the user research to understand their idea for of current design and their potential needs.

Market research

Through the research, I researched several coffee subscription brand's web design. The best one I think is a website called Trade and listed all the good points for that website below.

Key feature definition

Based on the research above, I defined five key features for the new website of bottomless.
1.The Shopping store to help user has a better user experience for the shopping.
2.The Blog feature to help bottomless spread its brand influence.
3.The Question and Answer feature to help the user better understand how to use the bottomless.  
4. The Coffee match feature helps the user find the best coffee-based on the user’s taste. 5.The Deal feature to promote its product.

Information architecture and low-fi prototype

Information architecture

The information architecture shows the workflow of the new bottomless’s design. For the latest information architecture, I tried to think more about how to give the user more right to make options. The user not only has more ways to find the coffee they need but also can choose sign-in or pay as a guest to make the purchase. If the user wants to pay as a guest, they can check the purchase at the order feature.

Low-fi prototype

After I created the information architecture, I generated the low-fi prototype for the inspiration of the hi-fi prototype.

Final design

Homepage

Compared with old design, I try to use more bleed design to make the website looks more fashionable. Also, I unify the design style for each component to make the homepage design consistent.

Coffee store

Compared with put the filter bar on the left side of the website, in the new design, I put the filter bar at the top of the shopping store, and it only shows when the user scrolls up the website, which helps the user operate the filter bar easier. Also, I added a tag feature to help the profession coffee drinker to find the coffee they need. Also, I added a coffee detail page to help the user check the detail information of the coffee they interest.

Frequently asked question

In the bottomless’ new design, I created a new section for bottomless specific for the frequently asked questions, which can help the user better understand the potential problem they have when they are using the bottomless.

Blog

The new blog page can list the recommended article to attract the user's attention.

Coffee match

The new website offers a coffee match feature. The user needs to finish a questionnaire first, and then the system will help them find the coffee which meets their taste based on the survey they did.

Deal

The new deal page uses the banner to show different gifts to give the user a more profound impression. After the user clicks the banner they will go to the gift detail page.

Payment

The current design put subscription option, personal information, and payment option together, which I think the process is too compact, I divided the checkout process into three pages to help the user flow each step to make the payment. Also, I added one more page to let the user decide to pay as a guest or sign-in to make the purchase.

My account

My account is a new feature for Bottomless to help the user manage their account and subscription.

Interactive prototype

Click the image below to interact with this prototype

User feedback

After I finish the design, I presented the design for the people I interviewed before to request their feedback for the new design of Bottomless. All the people think the work-flow and visual language are more precise compared with the previous design, but the detail of the design needs to improve, like the tag feature at the coffee store page. Meantime, some interviewees mentioned if the new design applied to bottomless’s official website, it would increase their favorability of the website.