HobbyUp is a platform that encourages interaction between people based on their common hobbies and interests. Our product aims to urge people to pursue their hobbies and interests, which they otherwise wouldn't in the absence of a companion. Our team's goal was to bring people across different age groups together on the basis of two factors: common interests and geographic proximity.
Final Prototype Link:
Principal UX Researcher, Designer
I was primarily involved in the capacity of UX Researcher. My responsibilities included conducting interviews, designing surveys, performing usability test using RITE methodology, running heuristic evaluation, and keystroke level modeling. My responsibilities as a designer included creating low fidelity prototypes on paper and POP, and high fidelity prototypes on Adobe XD CC.
Low Fidelity Prototyping
High Fidelity Prototyping
Keystroke Level Modeling
1. Requirement Gathering
To understand user needs and pain points, validate and/or discard assumptions about the product, and use quantitative + qualitative data to get insights on user behavior.
We designed surveys to gather quantitative data about user needs and current behavior. The survey was sent to 200 respondents in the United States of America. We analyzed the responses to understand our target audience in terms of age, employment status and living situation.
We conducted interviews to gather qualitative data about our target audience. Interviewees who were international students and/or had moved away from their homeland talked about struggling to find people to pursue their hobbies with, even though they had ample time in their schedule. Working professionals complained of being on a very busy schedule themselves and being unable to find compatible schedules with people in their existing network.
Based on our findings from surveys and interviews, we created two personas - Xiao and Tanya.
2. Design Alternative/ Competitive Analysis
To ideate the creation of a useful and usable product by understanding the user's explicit and implicit needs
We used findings from the requirement gathering to brainstorm and come up with a novel solution that meets the user needs and performed. Every team member brainstormed individually first and then all five members brainstormed as a team, building on each other's ideas.
b. Affinity Mapping
Individual ideas were placed on sticky notes after individual brainstorming sessions. Similar ideas were clubbed together by grouping sticky notes.
c. Competitive Analysis
We performed competitive analysis on 3 products - Meetup, WeGoDo and Meetin. We evaluated the products based on scope, usability and market reach.
We realized there is a market gap in terms of connecting people based on their individual schedules and hobbies. Therefore, we decided to focus on creating a social media platform which gave the user complete freedom to select when, where and with whom they wanted to pursue their interests.
We created a User Flow for our product by Compartmentalizing the user journey into six sections - Profile, Matching, Post-match, Decision, Scheduling and Post-Activity. This is the first(shabby) draft of HobbyUp's User Flow-
To translate ideas generated from brainstorming sessions to physical models to evaluate their strengths, and most importantly weaknesses to create a usable product by using a iterative process.
a. Low Fidelity Prototype (Paper, Pop) and Rapid Iterative Testing and Evaluation (RITE) Method
After conducting surveys, interviews and performing a competitive analysis, we created low fidelity prototypes on paper. We went through a couple of iterations till we had a prototype the entire team was happy with. We used POP by Marvel to convert our paper prototype to a clickable, working prototype.
We ran the first round of usability testing on 15 individuals (3 users per team member). The users of the usability test were representative of the target users of HobbyUp. The users were asked to perform realistic tasks such as logging in, signing in with Facebook, finding a potential match to pursue a hobby with. Every usability test was conducted in the presence of 1 team member who took notes about the user’s comments. We received valuable feedback from our users which aided our understanding about the blockers and problems in the user flow.
Some of the comments from the user testing were as follows:
“ I can’t seem to find a way to search for hobbies or people by name.”
“I don’t have the option of choosing a group. Do I need to add 21 people individually to play soccer?”
“I would like to have the option to message the individual in order to decide where we can meet”
We took the feedback into consideration and modified our user flow to incorporate the solutions to problems faced by users in the usability test. The new user flow was updated to a 7 step process as below:
1. Profile and Homepage
2. Individual matching
3. Group matching
7. Search (Independent flow)
b. High Fidelity Prototype (Adobe XD) and Rapid Iterative Testing and Evaluation (RITE) Method
We created a high fidelity prototype on Adobe XD. Our product consisted of four major sections - Home,Profile, Group, Messaging.
We ran usability tests on our high fidelity prototype for 10 users (2 per team member). The errors observed were mainly related to incorrect page linking on the prototype. However, there were also a few comments about missing pages in the prototype. This helped us realize we had not covered all user flows while designing the prototype.
The Failures and Error encountered by the users in the first round of usability test were very high. Between 15 users in the test, a total of 7 failures and 24 errors were encountered. The second round of usability tests saw some improvement in these values, with 3 failures and 14 errors. Usability tests on high fidelity prototype resulted in significant improvements in the failure and error statistics, with 1 failure and 6 errors . The failure was due to a missing screen in the prototype. The final round of usability tests was run after correcting these errors and the users were able to complete the flow with no errors or failures. This iterative approach to providing quick fixes to the application proved successful and the downward slope of failures and errors increased our confidence about the usability of the application.
4. Product Evaluation
To assess the functionality and usability of the product by evaluating it on its learnability, efficiency, memorability, errors and user satisfaction.
a. Keystroke Level Modeling in the Formative testing phase
Since the existing group flow was too complicated, the team decided to come up with an alternate flow. The two flows read are as follows:
i. User selects a hobby and is directed to 2 separate pages for individual and group matches.
ii. User selects a hobby and is directed to one page with both, group and individual matches.
We used keystroke level modeling to understand the optimal task performance for finding and connecting with a match. We based our work on Keystroke-Level Model for Advanced Mobile Phone Interaction (Holleis et al (2007)). We modelled each choice the user has to make by a Mental Task and added Distraction operators each time there are many things displayed on screen (a list of attractive hobbies or of other profiles). Mapping step by step flows and running a keystroke analysis helped us understand the second method (21.67 sec) was more efficient than(27.68 sec). We chose the second flow based on KLM results.
b. Heuristic Evaluation in the Summative testing phase
Every team member evaluated the app individually based on mobile design heuristics, established by Bertini et al in 2009. Ten minutes were allocated to test the app for every factor and 5 critical user journeys were tested. After all the ten factors were evaluated, the evaluators shared their feedback.
Here are some examples of the improvements we implemented after heuristic evaluation in each area:
● Visibility of system status: Adding check icons and match status notice
● Match with real world: Adding possibility to look at the profile
● Consistency: Reserved red color for important information and using same colors everywhere
● Minimalist design: Fewer information in one screen, icons of hobbies
● Ease of input: Putting menu bar at the bottom
● Flexibility: Adding possibility to login as guest
● Aesthetic and social conventions: Adding possibility to have closed groups
● Error management: Having cancel buttons on pop ups
The use of KLM resulted in selection of the group matching flow clocked at 21.67 seconds which was 21% faster than the existing flow of 27.68 seconds. This helped us increase the efficiency of our product. Heuristic evaluation helped us identify lack of homogeneity in the UI and gave us the opportunity to optimize the visual structure of the app. Since the evaluation was conducted individually, there was some overlap in the issues encountered. A total of 12 unique issues were identified in this process and were immediately fixed.
The design solution is the result of a three-month process which comprised of research lifecycle and product development lifecycle running in parallel. In the Strategic phase of our research, we focused on what to build by conducting surveys and interviews and then formulated a solution by ideating, brainstorming individually and as a group. In the Tactical phase of our research, we designed low fidelity prototypes of our products, performed usability tests, gathered feedback, modified our product based on user feedback, designed a high-fidelity prototype and continually improved our product by incorporating user feedback. We performed Keystroke Level Modeling and Heuristic evaluation to evaluate and improve our design. The tactical phase had a predominant Qualitative approach, which heavily relied on prototyping and usability tests.
We performed user testing with students on UC Berkeley Campus with our Final Prototype and received favorable response. We plan to enhance this idea further and develop an app for people to enjoy!