This project was a recipient of the UW's College of Engineering's Capstone Design Grant.
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
MY RESPONSIBILITIES
PHASE I: 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. |
Usability study session with participant (left) and notetaker (right).
|
AFFINITY ANALYSIS I
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.
|
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 II: 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
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
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
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 III: 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
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 II
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
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
Phase Overview Page
Subpage
