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.
Design Problem
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.
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.