Innovation meets UX. Tuyen Truong HCDE Capstone Process Book

Transcription

1 Innovation meets UX Tuyen Truong HCDE Capstone Process Book

2 Intentionally left blank. 2

3 Table of Contents EXECUTIVE SUMMARY.4 IDEATION.16 REFLECTION TEAM..5 Milestone Overview.17 WORKS CITED..31 PROCESS OVERVIEW...6 Ideation Methodology 18 APPENDIX.32 DESIGN QUESTION..7 Initial Sketches.19 CONTACT..33 EVALUATION..8 Participatory Design..20 Milestone Overview....9 Final Sketches..21 Heuristic Evaluation..10 PROTOTYPING...22 Target Users.11 Milestone Overview...23 Usability Test Kit..12 Lo-Fi Wireframes.24 Usability Testing...13 Guerilla Usability Testing..25 Affinity Analysis I.14 Affinity Analysis II...26 Usability Test Findings...15 Improvement Findings...27 Hi-Fi Prototype

4 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. 4

5 Team SOL CHOI MONICA LEE 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. 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. NEHA NUGURU TUYEN TRUONG 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. 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. 5

6 Process Overview Create Dummy Profile EVALUATION Week 1 Diverge Sketches IDEATION Heuristic Evaluation Week 5 Lo-Fi Wireframes Converge Sketches Usability Test Kit Conduct Usability Tests Week 2 Week 3 Participatory Design Affinity Analysis Usability Test Report Week 4 Final Sketches Week 6 Guerilla Usability Test 1 Hi-Fi Interactive Prototypes PROTOTYPING Week 7 Poster PRESENTATION Week 9 Week 8 Video HCDE Open House Week 10 6

7 Design Question How can we improve the Parlay web app to enhance the user experience? 7

8 Evaluation

9 Milestone Overview 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

10 Heuristic Evaluation 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. 01 Visibility of System Status 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. 05 Recognition Rather than Recall 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. 02 Match Between System & Real World 03 User Control & Freedom 04 Consistency & Standards 06 Aesthetics & Design 07 Help Documentation Figure 1. Jakob Nielsen s 10 Heuristics 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 Figure 2. Joe Dumas Ginny Redish s Severity Ratings * 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. 10

11 Target Users 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

12 Usability Test Kit 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. 1 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. 2 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. 3 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. 4 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 12

13 Usability Testing 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. PARTICIPANT AGE GENDER P1 21 Female P2 20 Female P3 23 Female P4 22 Male Overview of the participants from the usability test study 13

14 Affinity Analysis I 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. Figure 3. Affinity analysis showing the top three recurring issues 14

15 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: FINDING RECOMMENDATION 01 Missing help documentation 01 Add details-on-demand help documentation 02 Lacking user status and concept completeness 02 Incorporate a progress bar and comprehensive overview page 03 Confusing terminology such as open work 03 Use universal jargon 04 Confusing commands such as pitch it and mark complete 04 Relocate and rename button titles to make purposes clearer 05 Unnoticed features such as saved 05 Relocate and highlight using typography accents 06 Unclear how the web app is collaborative 06 Relocate the group member feature to emphasize collaboration 07 Confusing navigation 07 Use color to highlight current position 08 Unintuitive logos 08 Use logos that are universally understood 09 Confusing information organization 09 Categorize the different types of content by cards 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. 15

16 Ideation

17 Milestone Overview 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

18 Ideation Methodology 1 2 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. 3 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. 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. 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. 18

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. 19

20 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

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. 21

22 Prototyping

23 Milestone Overview 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

24 Lo-Fi Wireframes ` 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. 24

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. 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 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. Figure 4. Guerilla Usability Testing Results 25

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. 26

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. 27

28 Hi-Fi Prototype 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. 28

29 Reflection 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. 29

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! 30

31 Works Cited [1] Nielsen, J. (1995, January 1). Nielsen Norman Group. Retrieved April 13, 2017, from [2] Sauro, J. (2013, July 30). Rating the Severity of Usability Problems. Retrieved April 13, 2017, from [3] Pirker, M. (2016, March 24). 7 Step Guide to Guerrilla Usability Testing: DIY Method. Retrieved June 06, 2017, from g-diy-usability-testing-method 31

32 Appendix Heuristic Evaluation Usability Test Kit Milestone 1: Usability Test Report Milestone 2: Ideation Milestone 3: Lo-Fi Prototypes Milestone 4: Hi-Fi Interactive Prototype Hi-Fi Interactive Prototype Project Poster Project Video 32

33 Contact 33