Everything you need for a great cup of coffee!

Online Store App
Objective

Creating a platform catered to customers' particular needs, with a focus on making the shopping experience as easy as possible.

My Role

UX/UI Designer

Tools

Adobe XD
Adobe Photoshop
Adobe Illustrator

Timeline

3 Weeks

About

Bean&Brew is an online store offering customers the finest organically grown coffee beans and high-quality coffee making equipment and accessories, all in one place. The intuitive, easy to navigate app with its smart features provides the customers not only with the finest products, but also with the ultimate shopping experience.

Problem

Coffee is the most popular beverage in the world, with more than 400 billion cups consumed each year. Brewing and drinking coffee at home became a staple since many coffee shops and stores had to close due to the Covid-19 pandemic. Customers turned to online stores more than ever to acquire their favorite coffee-related products.

Solution

Building an online store app with a variety of products needed for a good tasting cup of coffee, all in one place, saves the customers a lot of time and energy, making their lives a lot easier.This app completely eliminates the need to visit a physical store, which can be draining at times, and it's not always guaranteed that one will find the desired product there.

The user flow was created based on the 4 user stories below, representing the main features the app needed to include in order to meet the potential users' needs.
Based on the user flow I first did some sketching of the potential app screens, creating low-fidelity wireframes, which I then turned into mid-fidelity wireframes using placeholder UI elements, icons and typography.
The mid-fidelity wireframes were turned into a digital prototype which was then tested on potential users. The main goal was to find out if there are any issues with the user experience overall. The user didn't have a hard time navigating the app, as the features were familiar and easy to use. However, there were some minor design issues which needed to be corrected.

Feedback

The visual design aspects of the app are tied to the brand guidelines I created for Bean&Brew. The brand can be described as: sustainable, reliable and grounded. These characteristics are mirrored in the visual design choices that were made.

Color Palette

Typeface

Icons

Illustrations

UI Elements

Based on the findings of the user testing I proceeded to make the necessary changes to my mid- fidelity wireframes before I applied all the different visual design elements to my app.