—UI/UX / BRANDING

THE TASK

Choose Your Brew stock over 100 different blends of coffee and ship them all over the world. The problem they are experiencing is customers are getting overwhelmed and not committing to buying due to wide variety of choices on offer. They are looking for a way to harness all the knowledge they have gained over 10 years in the industry, and make it digestible and enjoyable for their current and potential customers.

BUSINESS OBJECTIVES

Less overwhelming user experience

Increase conversion rate

Integrate a product comparison page

UX Research

RESEARCH

KEY TAKEAWAYS

Based on the research above I chose to take advantage of the positive aspects people associate with coffee. Things like feelings, emotions and sustainability.

"Taste and smell are the main reasons for drinking coffee"

This would ultimately steer my creative direction and provides reasoning for the taste of each product being prominent throughout the user experience.
USER PERSONAS
It became clear to me that there are varying levels of coffee enthusiasts and I had to be really conscious of what information I chose to show and how I structured the hierarchy. My approach was to have roast, strength and taste clearly identifiable. Also on the product listings page I went for a really simple filtering. Nothing too confusing or overwhelming.

A future addition to the site I would suggest to the client would be a page ‘How to choose your brew’ which could be an interactive guide to identifying the right blend.
WIREFRAMES
FIGMA DESIGN FILE
HOMEPAGE
DEFAULT LIST VIEW - PRODUCT DIRECTORY
I felt it important to give the user the option of a more traditional grid view, as I’m aware the default list state above is very close to blending the lines between usability and aesthetics. To further avoid the above design choice being more of a ‘vanity’ page than functional, I introduced the collapsable filter which activates when the user scrolls down the page; freeing up screen space to include more product listings.
GRID VIEW - PRODUCT DIRECTORY
GRID VIEW COLLAPSED FILTER - PRODUCT DIRECTORY
SINGLE PRODUCT PAGE
PRODUCT COMPARISON
MOBILE SCREENS
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram