Creative Brief
Case Study: A new coffee tasting adventure
Role and Responsibilities
User Research, UX Design, UX Strategy, Interaction Design
Project Scope
Oh! Coffee is a new coffee house planning to open in the second quarter of 2017. Located in Sugar Land, Texas, Oh! Coffee house will have several competitors in the same area including the coffee chain store, Starbucks, as well as individual coffee shops, restaurants, and tea houses. The store will open at the heart of Asian community. Oh! Coffee is now seeking strategic and user focus design direction on their desktop and mobile website; the goal is to build the company brand and customers when the store opens.
Project Roadmap
Empathize
Research Plan
Goals: The purpose of the empathy map is to find out the insights from users. Thus, I can create a product that suites what my users’ need and want.
Methods: Desk research, observation, interview
Participants: Coffee lovers, casual drinkers, students, and friends.
Define
Empathy Map
I used the data collected during in-person interview and online survey in the empathize phase to create empathy map of what users’ do, say, think, and feel.
Keyword Analyze
In addition to empathy map, I count keywords when users answered specific questions. I then prioritize the keywords to help me understand what’s important to users, and what they are looking for.
Persona
I created Jason based on the empathy map and keyword analyze findings. User personas are realistic representations of the key audience segments for the product/service. The goal of persona is not to represent every possible audience member, but rather to address the major needs of the most important user group.
Interaction Design
Sitemap
In the first step of interaction design, I mapped out the sitemap of the website. The six categories: news feeds, our story, classes, features, events, and members are the focus of the website. The remaining structures are subsections from the main categories.
Wireframe
I developed the low-fidelity wireframe after sitemap is mapped out. It is an important step before developing high-fidelity UX/UI design. This stage helps with the overall flow/structure before any time is spent on detail UX/UI design.
Interface Design
Style Tile/UI Kit
After gathering mood board inspirations, I put together a style tile to use as a viusal reference for the interface design. The style tile includes logo, fonts, colors, photography styles, and icons. UI kit is developed after the final interface design. Both style tile and UI kit are comprehensive design collection for the Oh! Coffee website. The two will be handed off to the developer team as a reference for buidling the website.
Usability Testing
After the first high-fidelity UI mock up, I did an in-person usability testing. I gave a specific task to users and recorded down notes on how well they accomplished the task. I also asked additional questions to validate my design. From there, I prioritized the feedback into phase one, two, and three with critical design improvements on phase one before launching the website.
