04 Prototype & Test
Usability Testing
Prepare for the Usability Testing
Before usability testing, it is important to set up test objectives, subject, methodology, tasks, and rubrics for measuring the result of the testing before conducting a test. Therefore, I wrote a
usability testing plan to define what and why I want to test and get prepared for the test.
For all the tests, I expect a
100% completion rate since all tasks are normal steps for a restaurant website. I also expect a
90% error-free rate because the prototype is not fully functioning, and users might take alternatives that have not been built up for completing the tasks.
Conduct Usability Testing
I then conducted both in-person and remote usability testing with 5 participants, and created
transcripts for each participant based on my observation of their interaction with the prototype. I jot down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.
Affinity Map
The results from the usability testing could be summarized by creating an affinity map. Like the empathy map, it is effective in helping us find patterns and frustrations when users are interacting with the prototype, and identify areas of improvements based on priority levels.
I represent each participant using a unique color, and categorize the observation by success, patterns, and frustrations. I only listed patterns that are shared by a majority of participants. For each pattern from frustrations, I uncovered one insight, and generate one recommendation. I then ranked the recommendation based on the priority level, where I will fix problems that affect key functions for our website and customers’ quick recognition of the brand.
Patterns
- 5/5 Users found it confusing to differentiate between “Menu” and “Online Order”.
- 3/5 Users thought the shopping cart CTA is unobvious.
- 3/5 Users thought the Get Directions CTA was not intuitive.
Insights
- Users tend to believe “Menu” and “Online Order” function similarly.
- Users prefer the shopping cart to be visible when they are ordering.
- The CTA alone is not enough for users to link it with map directions.
Recommendations
- Change the wording from “Menu” to “View Menu PDF.” (High)
- Make the section with the shopping cart as a sticky one at the top. (High)
- Rephrase the wording as “Get Directions on Google Map.” (Moderate)
Updates to Wireframes
As the time and other resources we have are limited, I made revisions based on the priority level of the recommendations summarized in the affinity map.
Branding
I first created a
mood board on Pinterest to gather multiple inspirations around the specific attributes that are summarized from thinking through the product goals and features as below. In this process, I tried to a minimum number of attributes, so that the brand of Komegashi Too stands out distinctively.
- Reliable: Komegashi Too serves fresh cuisine and is dedicated to provide reliable service for our customers.
- Creative: Komegashi Too tries the best to be creative and provides different dishes in different seasons for customers to select from.
- Healthy: Komagashi Too serves the health conscious with food that is low in sodium and mildly seasoned.
- Simple: Komegashi Too is proud to attach to the spirit of simplicity in Japanese Culture.
Logo
I decided to continue using the current logo of Komegashi Too based on two reasons. Considering the existing customers have already established their recognition of our brand, it is better to stick to the existing design. Meanwhile, after examining the alignment of this logo with the brand attributes established, I think it is creative and can reflect the brand value properly.
Style Tile
I further developed the visual style of Komegashi Too through the style tile. It serves as a synthesizing document of the brand ideas and inspirations gathered, incorporating logo design, color palette, typography, and imagery that guides UI design later.
Responsive UI Design
I created responsive UIs by applying established styles. It further lets me to examine the overall aesthetic feelings and visual balance of the website.
UI Kit
UI Kit is a compilation of existing UI elements on the website that provides references for future design and collaboration for the design team. It is also a living document and will be updated whenever there is an iteration of the design. Below is a part of the Komegashi Too UI Kit, and the full version can be accessed
here.
Final Prototype
With all the high-fidelity pages designed, I built up the final prototype, a scaled-down version of the product using InvisionApp.
