Redesign the ‘Stereoscope coffee’

Prototype and Testing

Low-fidelity wireframe

Wireframe based on the user flow. The goal was to ensure that the overall flow is easily visible at a glance.

Usability Test Result

I conducted user testing with five participants to gather feedback on a low-fidelity wireframe and the user flow for purchasing an item.

Key Findings:

• The overall purchasing process was smooth and intuitive.

• Participants suggested the following improvements to enhance usability and clarity:

Recommendations:

• Payment Details Visibility: Introduce an accordion-style dropdown for payment details to protect users' personal information.

• Best Seller Highlight: Add a badge or small icon to indicate best-selling items for better visibility.

• Promo Code Entry: Include a dedicated text field for promo codes to ensure users can easily apply discounts.

Problem Solve

• Stereoscope original home page (Left to right)

To address the issues raised during user interviews—specifically low readability and the inconvenience of excessive scrolling—I made the following improvements:

First, I reduced the font size of the catchphrase to enhance visual hierarchy and make better use of space.
Second, I organized the images and titles of new items into card containers, allowing for more efficient space usage.
Additionally, I introduced a hover feature on each item card that displays an “Add to Cart” button, improving user convenience by enabling quicker and easier purchases.
For the “Award-winning Packaging” section, I placed the key achievements at the center of the screen to immediately capture users’ attention and highlight the brand’s major awards at a glance.

• Original shop page

I introduced a filtering system on the Stereoscope shop page to help users quickly find the items they want rather than simply displaying products in a list.
By applying this filter, users can quickly understand the taste profiles of each coffee, allowing even first-time visitors to easily navigate the site.

These cards also include a hover effect that reveals an “Add to Cart” button, which helps shorten the purchasing process and reduce user fatigue.

On the item detail page, I redesigned the layout to visually communicate the coffee’s flavor profile more effectively by incorporating a clean, easy-to-read flavor graph.
This visual element helps both seasoned coffee drinkers and first-time buyers quickly grasp the taste characteristics at a glance.
I also arranged the information and description sections side by side to create a more balanced layout and enhance overall readability.

• Original - make a purchase

If you want to check my full prototype, please click Rinah.s.design_Stereoscope

The original checkout process consisted of two separate steps: users had to go from the cart to a separate checkout page to complete their purchase.
I simplified this flow by combining both steps into a single screen, allowing users to review their selected items and complete the payment in one place.

This streamlined approach reduces cognitive load, minimizes unnecessary clicks, and creates a smoother, faster purchasing experience—especially beneficial for users who value efficiency and clarity.

In the My Order section, users can view both real-time delivery status for current orders and a history of their past purchases.
They can also easily edit their profile to update and manage personal information, ensuring a more personalized and seamless experience.

Final Prototype