04 Prototype & Test
High-Fidelity Prototype
After I finished designing screens that are necessary for users to finish tasks, I linked those pages using InvisionApp and created a high-fidelity prototype for usability testing. Conducting usability testing using a high-fidelity prototype is useful for detecting issues in information architecture and flows that generate frictions for users.
Tasks include:
- Task 1: Categorize a new payment of $50.00 to Laura as “Food & Dining.”
- Task 2: Review your spending summary of last month.
- Task 3: Calculate how you and Laura should split the money if Laura paid for $0.00 and you paid for $50.00.
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.
I expect a
100% completion rate since all tasks are normal steps for managing finance and were designed using existing patterns of Venmo. 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
- 4/5 Users thought the 7-day spending trend diagram didn’tmake sense.
- 4/5 Users thought it confusing to add more payers in the split calculator.
- 4/5 Users thought tapping the back arrow was not convenient when selecting time period.
Insights
- 7-day spending was not enough for user to understand their spending trend.
- The interface was not performing well in terms of learnability.
- Users expect an automatic redirection to the screen after applying a filter.
Recommendations
- Change the bar chart to trend line of the spending during the selected time period. (High)
- Add a step-by-step note to guide the user to access the calculator.(Moderate)
- Edit the flow to remove the step of tapping the back arrow to view spending summary. (Low)
Style Tile
To perfectly integrate the new features into the existing app, I incorporated existing brand materials into a style tile, serving as a synthesizing document of the logos, color palette, typography, and imagery.
I also summarized specific brand attributes in the process of looking for existing guidelines, including trustable, friendly, specific, and simple.
- Trustable: Venmo is the voice of a lose friend the client trust.
- Friendly: Venmo wants to write in a style that sounds like we are speaking out loud to a friend.
- Specific: Venmo attempts to talk about the prodcuts and work in specific ways, not the abstract.
- Simple: Venmo strives to create products in simplicity that will be easy to use.
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 Venmo 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.
View Prototype
