Tuyen Truong | UX Designer
  • Home
  • About
  • Projects
  • Résumé
  • Travel
  • Journal

Overview

This capstone project was sponsored by Parlay, which is a start-up that provides a human-centered design web tool for anyone with an innovative idea. The Parlay web app helps teams craft stronger concepts with tools for all stages of the innovation process: discovery, ideation, validation, and storytelling. My team evaluated, redesigned, and prototyped an improved version of 3 pages of the web app.
Team
Sol Choi 
Monica Lee
Neha Nuguru
​Tuyen Truong
Project Length
​6 months
Tools
Figma
Marvel
Deliverables
Heuristic evaluation report
Guerilla usability test report
Sketches
Wireframes
Interactive prototypes
Usability test report
Final poster and report 

Design Process

Picture

Responsibilities

Picture

Phase 1: Evaluation

​Key question: What, if any, user experience problems or gaps can user research reveal about the existing Parlay web app?

Heuristic Evaluation

​Each team member evaluated the Parlay web app using a "horizontal" scope before consolidating our findings into a single document. Focusing on the breadth of the Parlay system, we inspected three pages: Project Overview, Phase Overview Page, and Phase Subpage.  I used Jakob Nielsen’s heuristics and Dumas & Redish’s severity ratings to facilitate the evaluation. The evaluation identified the major problem areas and gave way to the research question:

Intended Users

Teams within corporations, individuals, and student groups. Anyone who is new to design-thinking and has a product concept that they need help bringing to fruition using human-centered design. 

Usability Test

The goal of the usability study was to evaluate how successfully users can navigate through the Concept Boards to form a pitch.

Each participant had 4 tasks, which were informed by the issues deemed as severe in the heuristic evaluation. The issues include: navigability, usability, and intuitiveness of the users’ ability to engage with the web pages. The study examined the features, navigation, and terminology of the web app. I provided prototypes and a product concept from a personal project, Sublet, to create the dummy profile used in the usability study.
 
Information about the data collection, participant recruitment, and test kit can be referenced in the process book.
Picture
Usability study session with participant (left) and notetaker (right).

Affinity Analysis #1

All of the issues found in the affinity analysis of the usability study were characterized as a level 2 severity, indicating that they created significant delay and frustration to the user. The top three issues were unintuitive features, navigation, and terminology. This finding helped my team hone in on our redesign.​ 
Picture
We used Google Draw to create an affinity analysis, which revealed the top three issues circled in red. The categories with the largest mass were labeled as most severe - indicating the strongest pattern of concern among the participants.
FINDING
1 | Missing help documentation
2 | Lacking user status and concept completeness
3 | Confusing terminology like ‘open work’
4 | Confusing commands such as ‘pitch it’ 
5 | Unnoticed features such as ‘saved’
6 | "How the web app is collaborative?"
7 | Confusing navigation
8 | Unintuitive logos
9 | Confusing information organization
RECOMMENDATION
1 | Add details-on-demand help documentation
2 | Incorporate a progress bar and comprehensive overview page
3 | Use universal jargon
4 | Relocate and rename button titles to make purposes clearer
5 | Relocate and highlight using typography accents
6 | Relocate the group member feature to emphasize collaboration
7 | Use color to highlight current position
8 | Use logos that are universally understood
9 | Categorize the different types of content by cards

Phase 2: Ideation

Key question: In response to the findings from the Evaluation phase, how can we improve the page layout to help users quickly assess features? 

Initial Sketches

Picture
We shared our ideas and highlighted (in red circles) the features that we mutually agreed would meet the needs and desires of the users.
We used a divergent approach to brainstorm ideas for features that would enhance the existing Parlay web app. During a collaborative work session, I set a timer to monitor my rapid sketches for the solutions that targeted the design recommendations that my team came up with in the previous phase. All of our solutions focused on the three pages: Project Overview, Phase Overview Page, and Phase Subpage. 

Participatory Design

Picture
In a client review & feedback session, they used green sticky notes to indicate positive features and pink to indicate improvement areas.
After converging our initial sketches, we met with the client in a participatory design session for review and feedback of our design solutions. This collaborative exercise ensured that the client and us were on the same page in terms of business requirements and design directions. I introduced the client to the color coding exercise and took notes as they verbally expressed their thoughts.

Final Sketches

Picture
We used the client’s feedback from the sticky note exercise to refine and finalize the sketches into wireframes.
Using the feedback from the participatory design session, my team created a final round of sketches to design the finalized version of the three main pages of the Parlay web app. I designed the Overview Page (shown on the far right in the above image). The most challenging aspect of this design was the Phase Timeline section because this was a critical point for many of our user participants, however, there was little conversation about what to record in that space.

Phase 3: Prototyping

Key Question: How can we build on our finalized sketches to revise existing designs of the Parlay web app to create a user-friendly interface?

Wireframes


​View the interactive lo-fi prototype made using Marvel here.
​​
​
View the static lo-fi wireframes made using Figma here.

Guerilla Usability Tests

Picture
We used a colors to mark the degree participants struggled when completing a task.
To ensure that our redesign solution improved upon the usability issues we discovered in the “Evaluation” phase, we conducted a round of guerilla usability tests using the wireframes and same four tasks from the “Evaluation” phase. We calculated the average points of each task to assess which task presented the most challenge. The tasks with the most green markings were most intuitive to complete.

Affinity Analysis #2

Picture
I led the final affinity analysis where we consolidated each team member’s individual findings from the guerilla usability test sessions. We identified eight themes of issues that summarize our findings.
​In addition to the suggestions that our participants provided, my team identified the following improvement areas, which were implemented into the final, hi-fi prototype.

SUGGESTION
1 | Make it clear what is/isn’t clickable
2 | Change the wording of “Phase Timeline” to “Project Timeline”
3 | Eliminate the breaks between each block in the “Phase Timeline”
4 | Add multiple cards for Sub-gRoups like Customer (where there might be more than one customer per target)
5 | Make the placement of the “i” icon and Pitch Concept button more obvious

Hi-Fi Prototypes

The improvement findings from the guerilla usability testing of the wireframes informed the design of the interactive prototype.

Project Overview Page

Picture

Phase Overview Page

Picture

Subpage

Picture
The final interactive prototype can be viewed here.

This project was a recipient of the UW's College of Engineering's Capstone Design Grant.
Process Book
© COPYRIGHT 2019. ALL RIGHTS RESERVED.
  • Home
  • About
  • Projects
  • Résumé
  • Travel
  • Journal