Loading

You made it!

100%

Everything you need for a great cup of coffee!

Online Store App Case Study
Objective

The primary objective of the Bean&Brew project was to create a comprehensive online platform tailored to customers' specific needs, emphasizing a user-friendly interface and a seamless shopping experience for coffee enthusiasts.

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

With coffee being the most consumed beverage globally, the closure of many coffee shops due to the Covid-19 pandemic led to a surge in home brewing. This shift prompted an increased reliance on online stores for coffee-related products, creating an opportunity for Bean&Brew to address the evolving needs of customers seeking quality coffee experiences.

Solution

Recognizing the growing demand for home brewing, the solution was to develop an online store app that offers a diverse range of products essential for crafting a delightful cup of coffee. By consolidating these products in one place, the app streamlines the shopping process, saving customers time and effort. This approach eliminates the need to visit physical stores, providing a convenient and reliable solution for coffee enthusiasts.

The foundation of the design process was laid through the creation of a user flow based on four essential user stories. These stories were carefully crafted to represent the core features necessary to meet the diverse needs of potential users.
To visualize the user flow, I initiated the design process with sketches that evolved into low-fidelity wireframes. These wireframes were then refined into mid-fidelity representations, incorporating placeholder UI elements, icons, and typography to establish the basic structure of the app.
The mid-fidelity wireframes were transformed into a digital prototype, subjected to comprehensive user testing. The primary goal was to identify any usability issues and refine the design accordingly. While users found the app navigation intuitive, minor design issues emerged, requiring careful adjustment to enhance the overall user experience.

Feedback

To ensure visual consistency and align the app with the brand, a style guide was developed. This guide encapsulates the brand identity of Bean&Brew, emphasizing sustainability, reliability, and grounded characteristics. These elements were seamlessly integrated into the visual design choices.

Color Palette

Typeface

Icons

Illustrations

UI Elements

Building upon the insights gathered from user testing, the mid-fidelity wireframes underwent necessary refinements before applying various visual design elements. The final visual design not only addressed usability concerns but also embodied the essence of Bean&Brew's brand identity, creating a visually appealing and cohesive interface.

Challenges

Designing the Bean&Brew online store app presented its fair share of challenges. Striking the right balance between preserving the brand's identity and ensuring optimal usability was a significant hurdle. I had to fine-tune minor design issues while enhancing the overall user experience. Integrating sustainable visual elements within the brand guidelines brought about creative challenges. Translating the brand's commitment to eco-friendly practices into a visually compelling interface demanded thoughtful consideration.
‍
In conclusion I took a systematic and hands-on approach to solving problems through iterative steps. The final product stands as a testament to my commitment to meeting the dynamic market's evolving needs while maintaining a seamless blend of user-centric design and brand identity.

Previous Project Next Project