Innovation meets UX - Tuyen Truongtesting, prototyping, and wireframing skills. Guerilla usability...
Transcript of Innovation meets UX - Tuyen Truongtesting, prototyping, and wireframing skills. Guerilla usability...
Table of Contents
3
Tuyen Truong | Process Book
EXECUTIVE SUMMARY…………………………….4 TEAM…………………………………………………………..5
PROCESS OVERVIEW……………………………...6
DESIGN QUESTION…………………………………..7
EVALUATION……………………………………………..8
Milestone Overview…………………….…...9
Heuristic Evaluation………………………..10
Target Users…………………………………….11
Usability Test Kit……………………………..12
Usability Testing……………………………...13
Affinity Analysis I…………………………….14
Usability Test Findings…………………...15
IDEATION………………………………………………….16
Milestone Overview……………………….17
Ideation Methodology……………………18
Initial Sketches……………………………….19
Participatory Design……………………..20
Final Sketches………………………………..21
PROTOTYPING…………………………………….....22
Milestone Overview……………………...23
Lo-Fi Wireframes………………………….24
Guerilla Usability Testing……………..25
Affinity Analysis II………………………...26
Improvement Findings………………....27
Hi-Fi Prototype………………………..…….28
REFLECTION..………………………………………...29
WORKS CITED………………………………………..31
APPENDIX……………………………………………….32
CONTACT………………………………………………..33
Executive Summary
Parlay Concepts is a start-up company that provides a human-centered design toolkit for anyone with an innovative idea. Driven by the mission of helping individuals and teams craft strong product concepts, Parlay Concepts houses the Parlay web app, which is a collaborative workspace where users can bring innovative ideas to life by following the guided processes of discovery, ideation, and validation.
I collaborated with a team of student designers from the University of Washington Human Centered Design & Engineering (HCDE) department. Parlay Concepts was the client for the project. Given broad business requirements, my team adapted an iterative, user-centered design methodology to scope the project goal, which was to ultimately optimize the Parlay web app’s Concept Pitch feature.
The final deliverable and project goal was a redesign of three pages (Project Overview, Phase Overview, and Phase Subpage) within the Concept Pitch feature of the Parlay web app. My team used our usability testing, prototyping, and wireframing skills. Guerilla usability testing and heuristic evaluation of the Parlay web app helped my team identify usability issues, which informed the usability testing, wireframes, and interactive prototypes. Our overall intent was to provide design improvement recommendations that enhances the user experience of the three pages we evaluated in the Parlay web app.
This book details the processes that my team went through in completing the project. It specifically highlights my contributions in the evaluation, ideation, and prototyping phases of the project.
Tuyen Truong | Process Book
4
TeamSOL CHOI
Sol has a background in visual and UX design. She is proficient in using Adobe Photoshop, Illustrator, and Indesign among various prototyping tools such as InVision and Marvel. She also has experience conducting interviews and usability tests through various courses in the Human Centered Design & Engineering program.
NEHA NUGURU
Neha has a strong creative background with skills in visual design and usability testing. She has experience working with mobile UI design and is familiar with many design tools such as Adobe Creative Cloud, Sketch, and InVision. Neha has experience conducting research as part of a directed research group that collaborated with the Seattle Children’s Hospital and Google.
MONICA LEE
Monica is a course assistant for a course titled Introduction to Human Centered Design, where she assists students with activities relating to interaction design, usability testing, and prototyping. She is a UX generalist, but is most skilled in conducting primary and secondary research, which includes persona creation, information architecture, and wireframe creation.
TUYEN TRUONG
Tuyen brings a broad set of internship experiences from a variety of industries including tech, financial services, insurance, and education where her responsibilities involved usability testing, UX design, and marketing. She has taken on two directed research groups that have solidified her knowledge in user-centered design methodologies.
Tuyen Truong | Process Book
5
Process OverviewTuyen Truong | Process Book
EVALUATION
Create Dummy Profile
Heuristic Evaluation
Usability Test Kit
Conduct Usability Tests
Affinity Analysis
Usability Test Report
Week 1 Week 2 Week 3 Week 4
IDEATION
Diverge Sketches
Participatory Design
Final Sketches
Converge Sketches
Week 5 Week 6
PROTOTYPING
Lo-Fi Wireframes
Hi-Fi Interactive Prototypes
Guerilla Usability Test 1
Week 7 Week 8
PRESENTATION
Poster HCDE Open House
Video
Week 9 Week 10
6
Design Question
Tuyen Truong | Process Book
How can we improve the Parlay web app to enhance the user experience?
7
Milestone Overview
Tuyen Truong | Process Book
For the first four weeks of the project, my team conducted heuristic evaluations and a usability test study on the Parlay web app’s Concept Pitch feature. Our goal was to evaluate how successfully users can navigate through the Concept Boards to form a concept pitch. Our study questions revolved around the navigability, usability, and intuitiveness of the users’ ability to engage with the web pages. Specifically, the study examined the features, navigation, and terminology of the web app. This milestone scoped our project focus by evolving key usability issues and design recommendations, which were reflected in the subsequent milestones.
9
Each team member individually evaluated the Parlay web app using a horizontal scope. To provide an overview of the web app, I focused on the breadth of the Parlay system by inspecting three pages: Project Overview, Phase Overview Page, and Phase Subpage.
The heuristic evaluation familiarized me to the system and ensured that my team members and I did not have biased opinions. I used seven of Jakob Nielsen’s ten heuristics (Figure 1) [1] and Dumas & Redish’s severity ratings (Figure 2) [2] to facilitate my evaluation.
After I completed the heuristic evaluation, my team collectively discussed individual findings before compiling them into a single document. Based on the major problems areas discovered from the evaluation, the following research question evolved: How successfully can users navigate through the Concept Pitch feature to form a concept pitch on the Parlay web app? This research question drove the usability test, which informed the rest of the redesign project.
Heuristic EvaluationTuyen Truong | Process Book
10
Figure 2. Joe Dumas Ginny Redish’s Severity Ratings
LEVEL 1: Prevents Task Completion
LEVEL 2: Creates significant delay and frustration
LEVEL 3: Problems have a minor effect on usability
LEVEL 4: Subtle and possible enhancements/suggestions
01 | Visibility of System Status
02 | Match Between System & Real World
03 | User Control & Freedom
04 | Consistency & Standards
05 | Recognition Rather than Recall
06 | Aesthetics & Design
07 | Help Documentation
Figure 1. Jakob Nielsen’s 10 Heuristics
* Details about the major problem areas and their corresponding severity ratings found from the heuristic evaluation of the three pages can be referenced in the appendix.
Target UsersTuyen Truong | Process Book
Prior to this project, I had created a mobile app concept called Sublét, which aims to help college students find temporary housing.
I volunteered to use Sublét as the hypothetical business concept that my team used for the dummy profile, which was used for usability testing as well as a placeholder for content throughout the entire design process. The Parlay web app is intended for us by anybody, however, using Sublét defaulted the target participants of the usability tests to college students.
Fortunately, this made for easy participant recruitment since all of my team members were college students. Using Facebook as a platform, I helped recruit 2/4 usability test participants for the initial investigative phase of the project.
11
Usability Test KitTuyen Truong | Process Book
The usability test kit, which can be referenced in the appendix, consisted of four tasks. These tasks were informed by the issues my team deemed as most severe in the heuristic evaluation. I suggested that my team focused on the severe issues in order to scope the project and target recurring problems. The tasks were evaluated by successful completion, number of errors, number of positive comments, and number of negative comments.
The study questions revolved around the navigability, usability, and intuitiveness of the users’ ability to engage with the web pages. Specifically, the study examined the features, navigation, and terminology of the website.
Test results were measured qualitatively and quantitatively. The data was collected by direct observation and the participant’s feedback from think-alouds and post-task questionnaires.
12
1
2
3
4
You want to brainstorm a pitch for an app called Sublét, which connects students to short term housing with potential subletters. Create a new concept board for Sublét, and fill out the information for the first phase, “Discover.” Refer to the guide for specifics on what to write. When you are done with filling out the page, mark the phase as being completed.
A few weeks after you completed the Discover page, you are now ready to begin the ideation phase of your concept pitch. Fill out the information for the second phase, “Ideate.”. Refer to the guide for specifics on what to write. When you are done with filling out the page, mark the phase as being completed.
A few weeks later, your group is excited to begin the process of validating your concept. Fill out the information for the third phase, “Validate.” Refer to the guide for specifics on what to write. When you are done with filling out the page, mark the phase as being completed.
After a couple weeks of brainstorming and creating a solid pitch for your startup, you are ready to send your pitch to interested sponsors! Generate and view your concept pitch.
The four tasks
Usability TestingTuyen Truong | Process Book
My team conducted four usability test studies on the Parlay web app’s Concept Pitch feature. I personally moderated 2/4 of those studies. The goal in the studies was to evaluate how successfully users can navigate through the Concept Boards to form a concept pitch.
For each study, I used the usability test kit to ensure that my participants experienced the same procedure that the other participants had. Each participant was provided a consent form, pre-test questionnaire, four tasks, post-task questionnaire, post-test questionnaire, and participant reference sheet. Details about the usability test can be reference in the appendix.
13
PARTICIPANT AGE GENDER
P1 21 Female
P2 20 Female
P3 23 Female
P4 22 Male
Overview of the participants from the usability test study
Affinity Analysis ITuyen Truong | Process Book
The usability test study provided clear results of issues that required improvement in order to optimize the overall flow of the website. I collaborated with my team to combine findings from the two usability tests that I led with findings from the other two usability test sessions. A coding exercise revealed the top three issues: unintuitive features, navigation, and terminology. These issues were marked with the highest severity level since the mass of each category (as shown in Figure 3) is the largest--indicating the strongest pattern of concern among user participants. This finding helped my team hone in on what we wanted to focus our redesign on.
14
Figure 3. Affinity analysis showing the top three recurring issues
Tuyen Truong | Process Book
Usability Test Findings
All of the issues found in the affinity analysis of the usability test study were characterized as a level 2 severity, indicating that they created significant delay and frustration to the user. Within the three pertinent issues, my team found many problems and came up with design improvement recommendations for each:
15
My team used these findings and recommendations to inform the next phase of the project, which consisted of ideating design solutions to improve the issues revealed in the usability tests. We believed that these recommendations would enhance the Parlay web app’s overall user experience by reducing delay and frustration.
FINDING
01 | Missing help documentation
02 | Lacking user status and concept completeness
03 | Confusing terminology such as ‘open work’
04 | Confusing commands such as ‘pitch it’ and ‘mark complete’
05 | Unnoticed features such as ‘saved’
06 | Unclear how the web app is collaborative
07 | Confusing navigation
08 | Unintuitive logos
09 | Confusing information organization
RECOMMENDATION
01 | Add details-on-demand help documentation
02 | Incorporate a progress bar and comprehensive overview page
03 | Use universal jargon
04 | Relocate and rename button titles to make purposes clearer
05 | Relocate and highlight using typography accents
06 | Relocate the group member feature to emphasize collaboration
07 | Use color to highlight current position
08 | Use logos that are universally understood
09 | Categorize the different types of content by cards
Tuyen Truong | Process Book
In the previous “Evaluation” phase, my team conducted a usability test study, which led to the discovery of key usability issues in the Parlay web app. In response to the findings and design recommendations, we created sketches of possible design solutions for the three pages we focused on in our usability study: Project Overview, Phase Overview Page, and Phase Subpage.
17
Milestone Overview
Tuyen Truong | Process Book
18
Ideation Methodology
Overall, the methodology we adopted was effective. It enabled us to generate initial sketches that provided diverse design ideas that addressed the key issues identified from the usability study. This eventually led us to creating a set of refined sketches that circulated around the promising features identified from the first round of sketching. Details about specific design decisions in the sketches can be references in Milestone 2 in the appendix.
Using a divergent approach, each team member spent 15 minutes rapidly sketching ideas for each of the three main pages of the Parlay web app. The sketches aimed to address the key issues identified from our usability study: unintuitive features, confusing navigation, and confusing terminology. After we finished sketching, we came together to discuss our ideas, and then circled the most promising ideas of each sketch in red.
1
Using a convergent approach, we conducted a second round of sketches before we collectively created refined sketches for the three main pages based on the most promising features that we had circled in the first round.
2
We met with our client to gather feedback on our refined sketches via a participatory design session. Using color-coded sticky notes (green for good, pink for improvement), the client indicated which parts of our sketches they thought were good ideas and which ideas needed to be revisited. Based on their feedback, we conducted a final round of sketches to produce finalized sketches of the three main pages.
3
19
Initial Sketches
Using the design recommendations derived from the usability tests, my team adapted 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.
In total, my team had three, 15 minute timed work sessions. In between each 15 minute session, we shared our ideas and highlighted (in red circles) the features that we mutually agreed would meet the needs and desires of the users as informed in Milestone 1.
Tuyen Truong | Process Book
Tuyen Truong | Process Book
Participatory Design
Following the second round of sketching which involved converging our initial designs, my team met with the client, Parlay Concepts, to involve them in a participatory design session where we asked for their personal feedback on our refined sketches.
This hands-on, collaborative exercise was helpful to ensure that the client and my team were on the same page in terms of business requirements and future design directions.
Using a color coded sticky note system, the client made notes of positive features (using green sticky notes) and features that could be improved (using pink sticky notes) in our refined sketches of the three main pages.
I personally introduced the client to the color coding exercise and took notes as they verbally expressed their thoughts.
20
Tuyen Truong | Process Book
21
`
Final Sketches
Using the feedback that we received from the sponsor, my team created a final round of sketches to create the finalized version of the three main pages of the Parlay web app. We used the client’s feedback from the sticky notes and adjusted the features that were marked with pink sticky notes for our finalized and refined sketches.
For this exercise, I took on the responsibility of creating the comprehensive version of the Overview Page (shown on the far right). The most challenge aspect of this design was the Phase Timeline section because this was a critical point for many of our user participants, however, little conversation was had about what to exactly record in that space. Personally, I believe that my initial design was repetitive.
Tuyen Truong | Process Book
In the previous “Ideation” phase, my team sketched possible design solutions for the three pages we focused on in our usability study: Project Overview, Phase Overview Page, and Phase Subpage. We involved the client in a participatory design exercise to gather feedback on our sketches. Using the client’s feedback as guidance, we created final sketches of the solution, designed wireframes, and individually conducted guerilla usability testing. Finally, as a team, we conducted an affinity analysis to organize the findings from the guerilla usability tests to reveal ideas that would be implemented as final changes in the final deliverable, which was a hi-fi interactive prototype.
23
Milestone Overview
Tuyen Truong | Process Book
24
`
Lo-FiWireframes
Based on the finalized sketches that were created in the previous phase, “Ideation,” my team created lo-fi wireframes of the three main pages. For usability testing purposes, we then added interactivity to a few features of the wireframes.
Creating lo-fi wireframes was a collaborative effort that ensured equal contribution. My team used the Figma web app to design the lo-fi designs, which enabled real-time collaboration.
View the interactive lo-fi prototype made using Marvel here.
View the static lo-fi wireframes made using Figma here.
Tuyen Truong | Process Book
25
Guerilla Usability Testing
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. My team used the lo-fi wireframes along with the procedure shown in Figure 3 [3]. To maintain consistency, we used the same four tasks from the “Evaluation” phase.
As shown in Figure 4, we used a color-coded point designation to mark the degree to which participants struggled when completing the tasks. We calculated the average points of each task in a spreadsheet to quickly determine which task(s) presented the most challenge.
Based on the quick analysis, Tasks 3 and 4 were easiest to complete as both had point averages of 1. Tasks 1, 5, and 2 presented the most difficulties as those tasks received the highest point averages. This indicates that the features involved in those specific tasks, such as finding the “i” button, pitching the completed project, and navigating between phases contributed most towards the participants’ struggles.
STEP 1: Come up with tasks
STEP 2: Prioritize tasks
STEP 3: Turn tasks into scenarios
STEP 4: Start guerilla testing
STEP 5: Capture testing insights
STEP 6: Fix your usability problems
STEP 7: Test again, validate, make it a habit
Figure 3. Guerilla Usability Testing Steps
Figure 4. Guerilla Usability Testing Results
Tuyen Truong | Process Book
26
Affinity Analysis II
I led the final affinity analysis in which we consolidated each team member’s individual findings from the guerilla usability test sessions. Collectively, we identified eight themes of general issues that summarize our findings:
01 | Terminology
02 | Edit Button
03 | Information Button
04 | Mark Complete
05 | Stickiness
06 | Organization
07 | Navigation
08 | Suggestions
Details relating to the general issues pertaining to each of the eight themes can be referenced in Milestone 3, which is in the appendix.
Tuyen Truong | Process Book
27
Improvement Findings
In addition to the suggestions that our participants provided, my team identified the following improvement areas, which was implemented into the final, hi-fi prototype.
SUGGESTION
01 | Make it clear what is/isn’t clickable
02 | Change the wording of “Phase Timeline” to “Project Timeline”
03 | Eliminate the breaks between each block in the “Phase Timeline”
04 | Add multiple cards for Sub-gRoups like Customer (where there might be more than one customer per target)
05 | Make the placement of the “i” icon and Pitch Concept button more obvious
We’ve determined that improvements relating to the “i” icon, Pitch Concept button, and navigation are of the highest priority in our next step because these features had the highest point averages in terms of the difficulty level for the participants to complete the tasks that involved each of these features.
Tuyen Truong | Process Book
28
`
Hi-FiPrototype
My team used the improvement findings from the guerilla usability testing of the lo-fi wireframes to inform changes that were made in the final step and deliverable: designing the hi-fi mockups of the Parlay web app.
Creating the final hi-fi prototypes was a collaborative effort that ensured equal contribution. My team used the Figma web app to design the hi-fi designs, which enabled real-time collaboration.
Additional screenshots as well as a link to the the hi-fi, interactive prototype can be referenced in the appendix.
Tuyen Truong | Process Book
29
CLIENT ENGAGEMENT IS KEY. BUT SO IS USER ENGAGEMENT.Throughout the project, my team did a great job of engaging the client to ensure that the scope of our project and design decisions aligned with the client’s business goals. However, given that the Parlay web app is a consumer-facing product, our solution would have been better informed if we involved end-users more frequently throughout the project lifecycle. We only engaged with end-users twice—during initial usability testing and after the lo-fi prototypes. Involving end-users more frequently would have helped ensure that our solutions were indeed improving the usability issues we discovered in the evaluation phase. SIMPLICITY IS OKAY.Compared to other projects, my team definitely took a simpler approach. Although redesigning an experience was not new to any of my team members and I, the project still challenged us because none of us had worked on a client project before. Furthermore, Parlay Concepts was new to us all, so there was a steep learning curve in becoming familiar with the company and its products. Despite the simplicity in our project, it still felt like the project was over our heads due to time pressure.
SET REALISTIC PROJECT MILESTONES AND TIMELINES. Over and over again, I’ve learned that more than anything, the biggest battle in any project is the fight with time. Time-management is key to success of a project as well as sanity of the team environment. Though for the most part, my team did a great job breaking down the project into milestone deliverables, I still felt very pressured. Furthermore, we were unable to complete everything in our timeline such as creating a sitemap. If I were to redo the project, I’d spend 2-3 weeks of winter quarter actually conducting the heuristic evaluation because the “Evaluation” phase of the project took a bulk of spring quarter.
Reflection
Tuyen Truong | Process Book
30
Reflection
IT’S OKAY TO BREAK THE RULES.While creating this process book, I realized that my team did not create a persona, sitemap, nor did we conduct multiple guerilla testing--all of which are a part of the user-centered design methodology that HCDE has taught us. Though I believe that additional guerilla usability test would’ve been helpful in capturing improvement opportunities before diving into the wireframes, I am still very pleased with the final outcome of my team’s project. In the end, my team succeeded because we met the client’s business requirements. I’ve since learned that every project calls for a different process. For example, an optimization project may not require user research, but a concept development project does. CELEBRATE WINS.This project would not have been a success without my incredible teammates. I want to thank Sol, Monica, and Neha for being supportive, compromising, and communicative throughout the entire project. I have never worked in a team where members are so willing to jump on videos calls at 10 PM and offer assistance by assumption. Reflecting back, I wish I praised my teammates more often and took initiative to plan a celebratory meal because we deserve it!
[1] Nielsen, J. (1995, January 1). Nielsen Norman Group. Retrieved April 13, 2017, from https://www.nngroup.com/articles/ten-usability-heuristics/
[2] Sauro, J. (2013, July 30). Rating the Severity of Usability Problems. Retrieved April 13, 2017, from https://measuringu.com/rating-severity/
[3] Pirker, M. (2016, March 24). 7 Step Guide to Guerrilla Usability Testing: DIY Method. Retrieved June 06, 2017, from https://userbrain.net/blog/7-step-guide-guerrilla-usability-testing-diy-usability-testing-method
Tuyen Truong | Process Book
31
Tuyen Truong | Process Book
Works Cited
Heuristic EvaluationUsability Test Kit
Milestone 1: Usability Test ReportMilestone 2: Ideation Milestone 3: Lo-Fi Prototypes Milestone 4: Hi-Fi Interactive Prototype Hi-Fi Interactive PrototypeProject Poster Project Video
Tuyen Truong | Process Book
32
AppendixTuyen Truong | Process BookTuyen Truong | Process Book