parlay - monica lee · website. we will primarily utilize our usability testing, sketch-ing, and...
TRANSCRIPT
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/