_edited.png)
Bean & Beyond is a coffee shop that is introducing a new mobile app to enhance the coffee ordering experience for its customers. This project focuses on the UI/UX design of the app, ensuring that it provides a user-friendly platform for coffee enthusiasts to explore the menu, customize their orders, and enjoy a convenient way to satisfy their coffee cravings.
Role
Duration
Dec 2019 - Feb 2020
Product designer,
User Experience Designer
Tool Kit
Figma, Photoshop, Illustrator
Team
Soumya Sharma,
Raj Chandak
.png)
Task at hand
-
The goal was to design an intuitive and visually appealing app interface for Bean & Beyond, simplifying the coffee ordering process while ensuring a seamless user experience. This design aimed to enable customers to efficiently navigate the menu, customize orders, and foster customer engagement.
-
Mobile-Centric Navigation: Design an intuitive mobile app interface that prioritizes the unique needs of users on smartphones. Extensive user research will inform the placement and organization of menu items, ensuring that customers can easily navigate and locate their coffee choices.
-
Streamlined Ordering: Create a seamless and efficient mobile ordering process, taking into account the limited screen real estate. This includes ensuring that users can easily browse the menu, customize their orders, and complete transactions with minimal friction, ultimately boosting conversion rates and revenue.
-
Accessibility: Prioritize mobile accessibility by following WCAG 2.0 standards and mobile-specific best practices. Ensure that the mobile app is easily navigable and operable through gestures, voice commands, or screen readers, making it inclusive for all mobile users.
-
Responsive Menu Presentation: Craft visually captivating menu presentations that are accessible and engaging. High-resolution images and succinct descriptions should be easily accessible, and interactive elements like swipeable sections or touch-to-expand features will enhance user engagement.
-
Seamless Customization: Design customization options that are user-friendly and touch-centric. Implement intuitive controls like sliders, buttons, and gestures to allow users to personalize their coffee orders efficiently.
Who will use it?
-
Coffee enthusiasts
-
Working professionals
-
College students
User Research
For instance, respondents were asked to envision their app journey from start to finish, sharing their expectations for navigation, customization options, and payment processes. I sought to uncover potential pain points and user desires that would guide my design choices from the very outset. To gauge users' visual preferences, I presented them with hypothetical design elements, color schemes, and font styles, asking for their input on which resonated with their coffee ordering aspirations.
Additionally, I recognized the importance of laying the foundation for the cart management and checkout process. Questions probed into how users imagined adding items to their cart, modifying orders, and completing transactions seamlessly.
To establish a clear understanding of Bean & Beyond's user base, I conducted a user survey that began with a series of demographic questions. The goal was to anticipate user needs and preferences to inform my design strategy proactively. I carefully crafted questions aimed at understanding how users envisioned their ideal coffee ordering experience within the app's framework.
Competative Analysis
My approach to the comparative analysis of Starbucks, Panera, and Dunkin' coffee shop apps was methodical and insightful. I began by meticulously examining each app's user interface, navigation structure, and visual aesthetics. This involved a deep dive into their design elements, including menu organization, personalization options, and feedback mechanisms. By scrutinizing user reviews and ratings, I gained valuable insights into user sentiments and pain points.
What I learned was immensely beneficial – Starbucks and Panera have successfully embraced minimalist yet visually engaging designs that prioritize user navigation and personalization. Dunkin', while user-friendly, showed room for improvement in certain areas. This analysis allowed me to extract best practices, recognize design trends, and identify opportunities to enhance the UI/UX of Bean & Beyond's upcoming coffee shop app. It underscored the importance of a clean, intuitive, and visually appealing interface, while also highlighting the potential for gamification elements and robust cart management features to enhance the overall user experience.
User Flow
Low - Fidelity Wireframes
Design System
In developing the Bean and Beyond coffee shop app's design system, I found inspiration in coffee's comforting colors, like mocha and cream. These warm tones, paired with a clean and modern font, created an inviting and user-friendly look. This design not only mirrored our brand but also ensured readability. Plus, I was dedicated to making the app accessible for everyone, so inclusivity was at the core of my design choices.
_edited.jpg)
Final Design Prototype
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
User Testing
To conduct user testing for the Bean & Beyond coffee shop app, I employed a comprehensive approach. First, I carefully selected a diverse group of participants who represented the app's target audience, ensuring a range of perspectives. I then designed a series of usability tests where users were presented with different screens and interface elements. They were asked to interact with these variations and provide feedback on which design elements resonated better with them in terms of usability, clarity, and overall appeal.
Screen A
.png)
Screen B
.png)
For instance, I presented participants with multiple versions of the cart screen and homepage to gauge their preferences and usability feedback. In the cart screen, I re-positioned the recommendations and changed the background colors to gather feedback on which looked more appealing and provided better usability. Similarly, for the home screen, I provided three versions that each had a different designs for the layout of the various offerings. This allowed me to resonate with the user' preferences and hence make data-driven decisions.
Screen A
.png)
Screen B
.png)
Screen C
.png)
User Reviews
"I love how easy it is to order my coffee using this app's stylish design."
"Thanks to personalized recommendations, I've discovered new coffee favorites!"
"I truly appreciate the inclusivity of this app; it makes my coffee runs hassle-free."
"Every morning, I rely on the quick ordering feature of this app to kickstart my day."
Challenges
-
Adapting the app's user interface seamlessly to various screen sizes and orientations while maintaining optimal usability.
-
Overcoming accessibility challenges to make the app fully inclusive.
-
Striking the right equilibrium between a visually appealing design and a highly functional interface, ensuring that aesthetics do not compromise user experience.
-
Prioritizing user feedback and research findings to guide design decisions, focusing on meeting user expectations and needs throughout the app's development.
-
Staying current with emerging design trends and technologies, incorporating those that enhance the app's visual appeal and user engagement.
Reflection
My journey through the Bean and Beyond coffee shop app project has been an illuminating experience. This endeavor, filled with challenges ranging from cross-device optimization to accessibility enhancements, has deepened my understanding of the delicate balance between aesthetics and functionality. Efficiently managing project timelines and budgets has honed my project management skills, while staying attuned to evolving design trends has expanded my creative toolkit. This project underscores the importance of user-centric design, innovative features, and unwavering commitment to accessibility standards. Successfully transforming an idea into the Bean and Beyond coffee shop app reaffirms the profound impact of thoughtful design on user engagement and satisfaction. As I look forward, I bring with me refined skills, including proficiency in Figma and Adobe Creative Suite, ready to tackle future projects in this dynamic field.