Innovation meets UX - Tuyen Truongtesting, prototyping, and wireframing skills. Guerilla usability...

33
Innovation meets UX Tuyen Truong | HCDE Capstone | Process Book

Transcript of Innovation meets UX - Tuyen Truongtesting, prototyping, and wireframing skills. Guerilla usability...

Innovation meets UX

Tuyen Truong | HCDE Capstone | Process Book

2

Intentionally left blank.

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

Evaluation

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

Ideation

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

Prototyping

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

Tuyen Truong | Process Book

33

[email protected]@gmail.com

[email protected]@gmail.com

Contact