COFFEE IN THE TIME OF COVID
UX Research + UX Design
My Team: Solo
My Role: UX Research, UI Design, Art Direction
Tools: Adobe XD, Photoshop, Invision, Miro, Figma
Timeframe: 2 week, class case study
Cole Coffee is a cornerstone in the Rockridge community, based in Oakland, California.
In March of 2020, the cafe had to close its doors and shift the business model offering to-go ready items to their consumers. The model, a walk-up window for pick-up, due to the global pandemic. The cafe online shop in its current state allows patrons to purchase fresh coffee beans or retail items (such as clothing or brewing equipment) through the site but not fresh drinks. The site offers a smooth checkout process but had not been updated in six years.
The research conducted was to identify the needs of their consumers based on the current web browser experience and in comparison to others.
The synthesis of my research produced a model that allows consumers to order before arriving at the physical location to pick up a fresh drink to order.
During this research process, the information architecture was also restructured and cleaned up to improve the shopping experience.
CAFFEINE GONE VIRAL
I interviewed eight participants for both qualitative and quantitative data collection. We recorded the interviews and During the interviews, I took both behavioral mapping notes The interviews included usability testing of the existing Cole Coffee site and several competitors
CUP TO CUP: COMPARATIVE DISCOVERIES
All competitors offered options for purchasing ready-made drinks for pick up at their physical location
Competitors used the square integration for the ordering platform
Subscription models were consistent
Thou Mayest had the clean, straight-forward aesthetic
THERE’S A LATTE DATA HERE
The process of affinity mapping was one of the most delightful aspects of this project - it played a strong part in our introduction to our Persona, Rina. She would guide us through the user experience and into the exciting world of redesigning a checkout flow that best suits the needs of the user. Rina was authentic, persuasive and pushed aside any biases I initially had when initially taking on this concept case study. Through the affinity mapping the following was revealed:
Our users valued the safety of the check out process.
They were overall pleased with the current check out process at Cole Coffee - with the exception of not being able to purchase an actual hot coffee.
The value for ease of purchasing online was high.
Our users were tech savvy with little time to spare.
Meet Rina, our persona born from the synthesis of interviews for the e-commerce site of Cole Coffee. She’s got some opinions about what she’d like from her online experience, particularly when it comes to purchasing her coffee-to-go.
CREATING A SURVIVAL GUIDE FOR THE CAFFEINATED
I conducted an open card sort with 3 participants for the content placement in Cole Coffee’s website. It revealed that most users would group similar items together but were unsure of what to call the groups. This is where competitive comparative analysis was helpful as a supplement and helped me create an initial site map based on the findings and user flow to build something measurable to test.
SOME ART FOR YOUR LATTE
VISUAL DESIGN
The mood board was put together with the intention to not take away from the current vibe of the local business. This was created with a focus to enhance, sharpen, simplify what already exists, and compliments their narrative.
Some of my initial sketches for ideas around the new checkout flow and modification options to purchase items. Through this process developed the idea for a lightbox to be the foundation for the user’s journey through a drink to-go order for pick up.
The Design
Home Page Redesign
Original Home Page
