Sol ChoiMonica LeeNeha NuguruTuyen Truong

TEAM UXL

Sponsored byParlay Concepts

Parlay Innovation meets UX

Table of Contents The Team

The Team

Executive Summary

Background of Parlay

Target Users & Beneficiaries

Our Question & Goal

Project Breakdown

Project Timeline

Phase 1: Evaluation

Heuristic Evaluation

Usability Test Kit

Usability Testing

Affinity Analysis

3

4

5

6

7

8

9

10

11

12

13

14

Sol Choi Monica Lee Neha Nuguru Tuyen Truong

Phase 2: Ideation

Initial & Refined Sketches

Participatory Design Session

Finalized Sketches

Phase 3: Design

Lo-Fi Prototype

Guerilla Usability Testing

Affinity Analysis (2nd)

Hi-Fi Prototype

Final Reflection

Appendix

Cited Sources

15

16

17

18

19

20

21

22

23

24

25

26

2 3

Meet the members of Team UXL:

Executive Summary Background of Parlay

For this capstone project, our team was sponsored by Parlay Concepts, whose online web tool “Parlay” involves evaluating and redesigning design thinking tools to introduce us-er-centered design (UCD) methods to users with little to no background in human-centered design. It provides clients the opportunities to internalize HCI learnings rather than de-pending on third-party consultants. Ultimately, this provides efficient conceptualization and reduces costs.

We saw this as an extremely valuable project opportunity because our team understands the importance of design thinking in problem solving and product development. We be-lieve that spreading awareness of the methods and processes in human-centered design, as well as providing the necessary tools and platforms for teams to practice these methods will enhance internal collaboration and knowledge of Human-Computer Interaction meth-ods. As HCDE students, we can utilize our knowledge in UCD methodology towards the Parlay website, and help facilitate a better understanding of these concepts for their cli-ents.

We hoped to apply the user-centered design methodology we have learned in our Human Centered Design & Engineering coursework to enhance the Parlay Concepts experience. Our primary team goal for this capstone project is to utilize UX methods and user research-ing techniques to showcase our understanding of HCDE concepts in a real industry project for a client.

Parlay is a collaborative web application developed by Parlay Concepts, a startup based in Seattle, that helps teams bring innovations to life by developing ideas into sound business and product concepts. Intended users in-clude individuals, teams, and enterprises. Parlay’s core product is a workspace that guides users through the product development cycle which includes Customer, Problem, Solution, Competition, Value Proposition, Feasi-bility, Business Case, and Go-To Market. It enables teams to efficiently organize ideas and thoughts into a coherent presentation through the use of Concept Boards.

4 5

How successfully are users able to navigate through the “Con-cept Board” feature to form a concept pitch on the Parlay web-site?The target users for this project were college students who

have a need or desire to develop their project ideas into sound business and product concepts, and are in the ini-tial brainstorming phase of their idea(s) - for instance, this criteria applied well to UW students who were undertak-ing their senior capstone projects in other majors. We saw this product having maximal benefit to these kinds of users who experience project hurdles, dysfunctional organization methods, and a lack of team communication because Par-lay provides an organization chart and step-by-step guide through the product development cycle.

The project goal is a redesign of three main pages (Project Overview, Phase Overview, and Phase Subpage) on the Parlay website. We will primarily utilize our usability testing, sketch-ing, and prototyping skills. A usability study of the Parlay web-site will help us identify current usability issues. Sketches, wire-frames, and interactive prototypes will enable us to share our design ideas, which are informed by our findings from our us-ability testing. By using our UX research and design skills, we hope to provide design improvement recommendations to en-hance the user experience of the three pages we are evaluating on the Parlay website.

Target Users & Beneficiaries Our Question & Goal

6 7

Our Question

Our Goal

EVALUATION1 2 3IDEATION DESIGN

Project Breakdown Project Timeline

8 9

Our project was broken down into three phases as seen below, where each phase was led by a sub-question, consisted of various method used to work towards our goal, and shows an estimated length of time allotted to the phase.

Sub-QuestionHow can we effectively conduct user research to understand what works well and what needs imr-povement in Parlay’s current de-sign of its thre emain webpages?

MethodsHeuristic evaluationUsability testingAffinity analysis

LengthApproximately 3 weeks

Sub-QuestionWhat kinds of page layouts allow users to quickly prioritize their ac-cess to Parlay’s features in order to meet their goals?

MethodsPaper sketches

LengthApproximately 1.5 weeks

Sub-QuestionHow can we implement new and revise existing designs of the Concept Board feature of Par-lay to create an intuitive and us-er-friendly interface?

MethodsWireframingLo-Fi prototypingHi-Fi prototyping

LengthApproximately 4 weeks

The Gaant chart below shows our team’s projected schedule that we laid out for completing the overall capstone project

PHASE 1:EVALUATIONFor the first three weeks, we conducted heuristic evalua-tions and a usability test study on Parlay’s Concept Pitch feature. Our goal was to evaluate how successfully users can navigate through the Concept Boards to form a con-cept pitch. Our study questions revolved around the nav-igability, usability, and intuitiveness of the users’ ability to engage with the web pages. Specifically, this phase ex-amined the features, navigation, and terminology of the website.

Heuristic Evaluation

Before generating a problem statement, each team member conducted individual heuristic evaluations of three Parlay pages (Project Overview Page, Phase Overview Page, and Phase Subpage), which provide an overview of Parlay’s system hierarchy. Collectively, we deemed these three pages as critical for showing the user an overview of their project summary and progress. In our heuristic evaluation, our team focused on the breadth of the Parlay system by conducting a “horizontal” evaluation. To facilitate the marking of severity ratings in the heuristic evaluation, we used Jakob Nielsen’s ten heuristics as well as severity ratings from Joe Dumas and Ginny Redish. After each team member completed their heuristic evalua-tion, we collectively discussed findings and compiled them into a single heuristic evaluation form.

10 11

The severity ratings by Dumas and Redish (with additional color coding added by us) that we used to rank the issues we found from our usabili-

ty tests

Usability Test Kit Usability Testing

We then created a usability test kit to ensure that we followed the same procedure for every participant during the sessions. This ensured consistency in the way the moderators con-ducted the session and eliminated any variables that may skew the data. Our usability test kit consists of an introductory script, participant consent form, study script, questionnaires, and a participant reference sheet. The introductory script guaranteed that all participants re-ceived the same overview of the usability test. The consent form secured authorization of in-formation for research purpose.

12 13

For our usability tests, we aimed to evaluate how successfully a user completes a Concept Board for a pitch called Sublét, which is a framework that we created for a hypothetical business idea that our participants use to complete the tasks presented in the usability test. The usability test consisted of filling out the Project Overview, Phase Overview, and Phase Subpages for this pitch. To do so, users need to understand the jargon presented on each page and successfully download the pitch summary that is automatical-ly generated into a concise document using the information inputted by the user. To evaluate the user’s understanding of jargon, we asked the us-ers to define certain terms on the website verbal-ly during the testing.

One of our usability test participants in the middle of completing a task

Affinity Analysis

PHASE 2:IDEATIONIn the previous “Evaluation” phase, we conducted a us-ability study which led to the discovery of key usability issues in the Parlay website. In response to our 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 Over-view Page, and Phase Subpage.

From our usability testing, we identified three key issues with the usability of Parlay

14 15

Unintuitive featuresImplementing design changes that would make each feature’s pur-pose explicitly known and obvious to users.

Confusing navigationMaking navigational features more noticeable and perhaps includ-ing a walkthrough tutorial to help familiarize users.

Confusing terminologyShowing details-on-demand to provide clear definitions for vague terminology used throughout the Parlay web app.

These findings served as a basis for our sketches in the following “Ideation” phase.

1

2

3

Initial & Refined Sketches Participatory Design Session

Using a divergent approach, each 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.

We then compiled the most promising features that we iden-tified with red circles from the first round of initial sketches for each of the three main pages of the Parlay website and then proceeded to do a second round of sketching (using a convergent sketching approach) to produce refined sketches of the three main pages, with our team dedicating about 15 minutes to sketching for each page. We did a “rough draft” version of the sketches on a whiteboard and then transferred the ideas to paper to create a more polished representa-tion. This helped with narrowing in on design ideas that we thought were desirable and would best address the issues we found from our usability study.

Following our second round of sketching, we met with our sponsor, Rebecca, from Parlay and involved her in a participatory design session where we asked for her personal feedback on our refined sketches. This was especially helpful for ensuring that we were both on the same page in terms of design expectations. Using a color cod-ed sticky note system, she made notes of posi-tive features (using green sticky notes) and fea-tures that could be improved (using pink sticky notes) in our refined sketches of the three main pages.

16 17

Several of our initial sketches grouped togeth-er with red circles indicating which features we

based our refined sketches on

Feedback from our sponsor on one of our refined sketches

Finalized Sketches

PHASE 3:DESIGNWe first created our wireframes using the web tool Figma - since these were intended to be low-fidelity wireframes, we avoided using color and instead went with greyscale to focus more on the general locations and functional-ities of the features. After finishing the screens, we add-ed interactivity to basic features that we wanted to test through our guerilla usability tests via Marvel.

Using the feedback that we received from our sponsor, we did a final round of sketch-ing to create the finalized sketches of the three main pages of the Parlay website. We used her feedback from the sticky notes on our refined sketches and adjusted the fea-tures that were marked with pink sticky notes and addressed them for our finalized sketch-es. These will ultimately serve as helpful guidelines for our low-fidelity prototypes in the next phase.

18 19

One of the finalized sketches we created based on the feed-back that we received from our sponsor

Lo-Fi Prototype

We first created our wireframes us-ing the web tool Figma - since these were intended to be low-fidelity wireframes, we avoided using color and instead went with greyscale to focus more on the general locations and functionalities of the features. After finishing the screens, we added interactivity to basic features that we wanted to test through our guerilla usability tests via Marvel.

Guerilla Usability Testing

We first created a mini usability test kit to conduct guerilla usability tests of our lo-fi wireframes follow-ing the procedure shown in the image to the right. We based our tasks off of the three key usability is-sues from our first phase, “Evaluation,” which were (1) Unintuitive features, (2) Confusing navigation, and (3) Confusing terminology .

20 21

The screens of our lo-fi prototype, created using Figma

As shown in the table to the left, we used a color-coded point designation to mark the degree to which participants struggled when completing the tasks. We calculated the av-erage points of each task in a spreadsheet to quickly determine which task(s) presented the most difficulties.

The general sequence of steps we took for prepar-ing and executing our guerilla usability tests

The table showing the point designations we gave based on each participant’s performance of the tasks

Affinity Analysis (2nd)

We then conducted another affinity analysis to consolidate individual findings from the guerilla usability test sessions, Collectively, we identified six main themes of general is-sues that summarize our findings: Confusing terminology

Unintuitive “Edit” button

Confusing “Information” button

Unclear purpose of “Mark Complete”

Organization

Navigation

These findings helped inform us on how well our design revisions addressed the three issues from the first phase. We will use findings from the guerilla usability tests of our lo-fi prototype to inform changes that should be made to the wireframes. This will help us refine our solutions before moving forward with the final step and deliverable: de-signing the hi-fi mockups of the Parlay web app.

Hi-Fi Prototype

To tie together all of our findings from the three previous phases (Evaluation, Ideation, Design), we revised our Lo-Fi prototype form the pre-vious phase to create our final designs of the three main pages of Parlay’s Concept Boards feature: the project overview page, the phase overview page, and the phase subpage.

The six themes of issues we found from the pre-vious phase served as our guidelines for which issues we fixed in our final designs. In terms of the color palette, to be faithful with Parlay’s cur-rent brand, we mainly utilized the same colors shown on the current website - however, we re-assigned some colors to different features - the general color guideline that we followed can be seen below.

22 23

1

2

5

3

4

6

The screens from our hi-fi prototype representing our final revised design of Parlay

Final Reflection Appendix

24 25

Overall, it was very satisfying to be able to participate/see this project through in this project from beginning to end. I had never taken on such an extensive project of this breadth and length, and it was very interesting to be able to participate in a project meant to test the knowledge I have accumulated about user-centered design through this program with such an amazing and cooperative group of people. Undeniably, it was also quite stressful and challenging at various moments, but to me, this only helped to increase my determination and motivation to put out polished deliverables to beat the deadlines.

Regarding what I would have changed about this process and how my team went about doing it, I may have accounted more for certain holidays and other important dates, like major project deadlines or dates that group members would be out of town for interviews or family matters, that would clash with the due dates of some of the deliverables when creating my group’s timeline on a Gaant chart. Because of these issues, we found ourselves having to adjust the personal due dates that we listed on our timeline several times. Another issue that I could have addressed is being stricter about sticking with cer-tain deadlines - for some of due dates, we intentionally marked the due date as earlier than when it would actually be due so that we would have more time to spend on the later deliverables as we anticipated that the end of Spring quarter would be quite hectic (which we were correct about) - however, we later lost this cushion time that we gave ourselves, namely due to the issues mentioned earlier, such as members having to go out of town or having conflicting schedules that ultimately delayed when we could complete certain parts of the deliverables. Thus, we did not have that extra week or so that we orig-inally planned to have at the beginning of the quarter to work on our final deliverable and make it even more polished and complete than it already is. As for what I wish I had known when I started, I suppose that it would have been nice to know for certain what dates would conflict between all of the members so that we could be able to plan around those dates and not have to be delayed. Additionally, some aspects of certain deliverables took more time than we anticipated, so it would have been nice to able to pinpoint more specifically how long each component of a deliverable would take rather than estimating the length based on previous experiences.

All in all, being able to stand together with my group members and view the outcomes of all of our hard work over a span of two quarters and share what our work was about with others interested in the field of UX and also to our sponsor, Rebecca, at the UW HCDE Capstone Showcase was immensely gratifying, and it was just a very proud moment for us.

Link to Lo-Fi prototype https://marvelapp.com/386f009

Link to Hi-Fi prototype https://marvelapp.com/5fj8ch4/screen/28562211

Link to Group Poster http://monicaylee.weebly.com/capstone-parlay.html

Link to Group Video https://youtu.be/AWecoMow5CE

Cited Sources

26

Jakob Nielsen’s 10 Heuristics https://www.nngroup.com/articles/ten-usability-heuristics/

Dumas and Redish Severity Ratings https://measuringu.com/rating-severity/

Guerilla Testing Guidelines https://userbrain.net/blog/7-step-guide-guerrilla-usabili-ty-testing-diy-usability-testing-method

Parlay Beta Site https://beta.parlayconcepts.com/