Scope
Design a responsive
e-commerce website
Tools
Figma, Adobe Illustrator,
InVision App
Role
UX/UI Designer
(Research & Visual Design)
01.
Empathize
Market Research
Competitive Analysis
Provisional Personas
User Interviews
Empathy Mapping
02.
Define
User Personas
HMW Questions
Sitemap
Project Goals
03.
Ideate
Task Flows
User Flows
Wireframing
Responsive UI
04.
Prototype & Test
Mid-Fidelity Proto
Usability Testing
Affinity Mapping
Market Research
Initial research was conducted in order to learn more about the coffee industry as a whole. This included looking at emerging trends, demographics, and global statistics. This research helped me uncover insights to better understand the coffee industry and what is currently impacting it.
Demographics
Competitive Analysis
After completing market research, I performed a competitive analysis to identify the strengths and weaknesses of direct, local competitors in Boulder, Colorado. This allowed me to take note on what I should focus on and avoid when building Kaus' website.
Primary Research
User Interviews
I interviewed local customers at the cafe to learn more about their experiences purchasing coffee at Red Rock Coffeehouse as well as other cafes around town. These user interviews gave me fresh insights and perspectives into their experiences which allowed me to understand and empathize with them on a deeper level.
Participants
Empathy Map
Once interviews were complete, I was able to organize all the feedback into an empathy map that helped me uncover user needs based on patterns from insights.
Insights
Needs
HMW Questions
Point of view statements were formulated using the insights and needs from my empathy map. These POV statements then helped phrase the "how may we" questions used to address important aspects of the website design in a brainstorming session.
User Persona
A primary user persona was created based on insights and patterns discovered through my user interviews and empathy map. This persona helped me to understand main customers as a whole when it comes to their motivations, goals, needs, and frustrations.
Sitemap
Once the coffee shop's main customer base was defined, I was able to start to plan how the website content would be laid out. The sitemap helped me identify key pages, and to make sure the information architecture was intuitive to customers.
Task Flows
Task flows were created to represent the paths a user may take in order to complete a primary task on the site. This helped in planning which key screens needed to be designed and prototyped.
Low-Fidelity Wireframe Sketches
With the sitemap complete, I sketched out layout concepts for 3 of the primary webpages that would need to be designed first.
Mid-Fidelity Wireframes
After completing low-fidelity sketch ideas, I was able to move on to designing the mid-fidelity wireframes in Figma. This helped me connect the conceptual structure to the product’s visual design. The wireframes here show 2 of the key pages based on the sketches above.
Usability Testing
In order to ensure that my prototype was both user-friendly and easy to navigate, I conducted usability testing with 5 participants. The methodology used was Think Aloud along with task elicitation. Participants were asked to complete 2 key tasks and asked to verbally communicate their thoughts and decisions as they navigated through the prototype. A total of 13 key screens were created to allow users to complete task prompts using Invision App.
Task 1: Locate the online menu for espresso drinks
Task 2: Order a 12oz. latte with whole milk
A script was used to maintain consistency amongst testing participants. Participants were recruited based on their demographics and testing was conducted both in person and remote using screen sharing.
Usability Test Findings
Once testing was complete, all transcripts were included in a testing document. From there, error-free and test completion rates were recorded and a summary of feedback was created to provide a high level overview of testing feedback.
Test Completion Rate: 100%
Error-Free Rate: 93%
An affinity map was created to synthesize test findings. This allowed me to find patterns amongst participants and pin point slips and/or other frustrations to prioritize for revisions before the site launched.
Insight:
Branding
Since Red Rock Coffeehouse did not have an existing online presence, branding was needed in order to define the aesthetics for the website's UI elements. Their logo was given some minor updates so it could scale more easily yet still be recognizable to customers when they visit the website.
Style Tile
A style tile was created to visually communicate the overall mood and look of the website.
UI Kit
A UI kit was also created to help maintain consistency between elements used throughout the website.
High-Fidelity Mockup
Once the style tile and UI kit were complete, it was time to create high-fidelity wireframes to give the design life. Priority revisions were applied to the high-fidelity wireframes based on insights from the affinity map.
Reflection
After working closely with a local coffee shop to help design their website, I learned a lot about customer purchasing behavior and how important it is to connect with a business' real customers in order to gain genuine insights into what motivates them to become loyal to a specific cafe. My empathy map was one of the most insightful parts of this project because it helped me uncover really interesting patterns from user interviews. I enjoyed learning about the coffee industry overall, and researching trends in order to design a website that is both modern and eye catching yet very user friendly.