Role:
UI Designer, UX Researcher
Bankers Brew Website
Welcome to Bankers Brew Coffee in Lakeland, Florida.
I have changed and enhanced the ordering process on mobile version and the added a coffee quiz for the desktop version for Bankers Brew Coffee to better highlight the unique and inviting aspects of our coffee shop.
By focusing on our commitment to quality and the inviting atmosphere, I aimed to attract coffee lovers seeking both comfort and a unique coffee experience.
Tools:
Figma and FigJam
Timeline:
65 Hours
Research
Understand user preferences and expectations: Investigate what features and functionalities users expect from a modern coffee shop website to align with user needs and preferences for Bankers Brew Coffee.
Identify usability issues and pain points: Identify specific usability issues and challenges users face with the current Bankers Brew Coffee website to improve overall user experience.
Explore design trends and best practices: Explore effective design trends and elements for visually appealing and user-friendly coffee shop websites, integrating these into the redesign of the Bankers Brew website.
Determine technical requirements: Define technical requirements and constraints for implementing responsive design on the Bankers Brew Coffee website, considering factors like device compatibility and loading times.
Evaluate impact on user engagement: Assess how responsive web design could potentially enhance user engagement and conversion rates for the Bankers Brew Coffee website, aiming to boost user interaction and drive conversions.
COMPETITIVE Research
Dive into the digital strategies of industry leaders like Starbucks, Intelligentsia, and Blue Bottle to glean invaluable insights. Stay ahead of the curve, embrace innovation, and craft user-centric experiences that elevate your website above the competition.
User Interviews
In this phase, through the user interviews I organized concepts, feedback, and user observations into cohesive clusters.
This method significantly aided designers and teams in digesting the wealth of information collected during user research, brainstorming sessions, and usability testing.
By streamlining the analysis process, it improved data organization and comprehension, thereby facilitating more informed decision-making and effective problem-solving.
Personas
In my previous research, I developed personas of individuals who frequently use the drive-thru and seek easier access to information. These personas highlight the desire for a user-friendly experience that makes it simple to explore and engage with different brews, reflecting creativity and convenience.
Feature Set
Based on my research, I identified key features for the project, prioritized from most critical to least. Each feature was evaluated and ranked for its impact on user experience and functionality. This approach ensures a seamless and user-friendly interface that meets core user needs while enhancing overall usability and appeal.
User Flows and Sitemap
Based on my research, I designed user flows to enhance the experience. One flow focuses on ordering ahead exclusively for mobile users, while the other involves taking a quiz to find your perfect coffee match, specifically for desktop users.
Usability Test Plan
Test Goals
Functionality Testing:
Ensure all app features and functionalities work as intended.
Usability Testing:
Assess the ease of use and navigation within the app interface.
Performance Testing:
Evaluate the app's speed, responsiveness, and stability under different conditions.
Participants
Group Crits:
Usability testing with participants from the group critique session.
External Participants:
Testing with individuals outside the group critique to gather diverse feedback.
Key Questions for External Participants
Can you navigate the app easily and find the desired features?
Were there any features that did not work as expected?
Did you encounter performance issues like slow loading times or crashes?
What suggestions do you have for improving the app's usability and functionality?
How would you rate your overall experience using the app?
Feedback and iterations in the final design
Call to Action: Make it more prominent by blurring the background or using a different visual treatment.
Design Elements: Taste preferences and icons add a nice touch.
Readability: Subtle background textures, especially in the footer, improve readability.
Desktop Visibility: Enhance contrast with a whiter background for the menu and quiz sections.
Menu Organization: Organize the view menu by categories for better navigation.
Color Scheme: Orange and minty green colors work well, and the bean shade complements the design.
Consistency: Simplify lines, ensure consistent sizes, and maintain alignment for a coherent user experience.
1.
2.
3.
4.
5.
Mobile and Website Prototypes
This UI design prototype serves as a visual and interactive representation of the digital product's interface. After creating the high-fidelity design, I developed this prototype for further testing to identify areas that needed improvement.
High Fidelity Wire Frames
Introducing a feature into the Bankers Brew app, a high-fidelity wireframe in UI design provides a detailed depiction of the final product’s visual design and layout, encompassing elements such as colors, typography, and interactive features.
This tool facilitates stakeholders' comprehension of the user experience, encouraging discussions on visual components and branding. By enabling realistic user testing and feedback collection, high-fidelity wireframes are pivotal in refining and prioritizing the digital product's user experience.
Mobile
*Best if viewed on Desktop
Website
*Best if viewed on Desktop
Reflection
How has this project contributed to my growth as a UX designer?
Applied various research methodologies: user interviews, usability testing, and expert reviews
Gained valuable insights into user preferences and expectations for coffee shop websites
Sharpened skills in translating insights into effective design solutions
Collaborated with a diverse group of stakeholders, including coffee enthusiasts, potential customers, and web design experts
Led to more user-centric designs
How has this project contributed to my growth as a UX designer?
Balancing contemporary design elements with the brand's values and target audience
Unexpected findings about varying user preferences required additional targeted research and segmentation analysis
Embraced a user-centered design methodology to ensure alignment with user needs
Prioritized intuitive navigation and streamlined user journeys
Emphasized empathy and championing the user's perspective for future projects