Incorporating gamification to Hopstair's MVP product
Hopstair is a coaching platform to help build confidence via daily nudges, leveraging behavioral science, coaching principles and other disciplines to give users practical tools to help build their confidence in a way that works for them.
Hopstair is at the end stage of prototyping for its Minimum Viable Product (MVP), planning to launch by the end of 2022. Having already developed their dashboard and onboarding process, they are now looking to incorporate gamification throughout the app in a meaningful way to help users boost their confidence in everyday life and engage users to help with user retention.
Hopstair has made it clear they would like us to incorporate the teachings of the Octalysis Framework within our gamification prototyping.
Sprint Duration: 3 weeks
Industry Type: Mental Health
Brief Type: Client
Deliverables: High Fidelity Interactive Prototype | Client Presentation | Process Documents screening survey results, competitive/ comparative analysis results, user interview synthesis, affinity diagrams, problem statements, user journeys, ideation sketches, wireframes, user flows, usability testing - analysis and results, next steps and recommendations
Team: (4) N. Vania Muriuki, Dorsa Mokhtari, Jack Fletcher, Jack Fargher
My Role: UX/UI Designer
Tools: Figma, Slack, Excel, Zoom, Trello, Miro
My Contribution: Competitive Analysis, User Interviews and Analysis, Designing and iterating wireframes for progress, timeline, and onboarding screens, Creating the high fidelity prototype, Developing visual design, Usability testing, and presenting the final product
Product: Developed 2 gamified user flows incorporating 4 drives of the Octalysis Framework - Accomplishment, Unpredictability, Social Influence, and Ownership
To ensure we remained focused and organized throughout the design sprint we used the double diamond approach. User research and competitive analysis were conducted to understand the role confidence plays in people's lives, and the different applications of the Octalysis Framework in coaching and learning applications. In the define stage, we narrowed down our problem statement and approach to development. The development process was conducted by applying research findings and insights to inform gamification features, visual design, and information architecture. The final delivery includes next steps for Hopstair's MVP.
In order to get a better understanding of the problem and empathize with our users, we dove into quantitative and qualitative research. User research and competitive/comparative analysis were conducted to further understand the users and their journeys with confidence, coaching and the current market. We also researched gamification, the Octalysis Framework, and its application on different platforms.
.png)
We began our research by conducting a screener survey to understand users' general experiences with confidence. We received 50 responses with insightful results as displayed below.
We then scheduled user interviews with our survey respondents to gain a more in depth understanding on what users needed on a platform on their journey to confidence.
We conducted 8 semi-structured user interviews following qualitative research methods to further empathize with users in different stages of their confidence journey. Interviews were conducted on Zoom following a pre-structured discussion guide, recorded, and thereafter analyzed through affinity maps on Figma to identify trends, patterns, and themes on user behaviors, likes, dislikes and needs.
These interviews helped us gain further insight into our target user's behaviors, attitudes, and needs. We uncovered key insights such as:
We familiarized ourselves with The Octalysis Framework, an internationally acclaimed Gamification Framework, understanding how it could be used to identify opportunities to create human motivation within experiences, apps and games.
Our interviews told us that confidence is a personal journey linked with lots of delicate life experiences and emotions, leading us to select Accomplishment and Ownership as the main drives we would focus on. We later added Social Influence into the flow to capture our users' need for community and Unpredictability to further create motivation.
.png)
To get an understanding of the current coaching/habit building landscape, we analyzed direct competitors of Hopstair as well as indirect competitors in the health and activity tracking space through a feature inventory and analysis, and through the Octalysis Framework.
We compared 5 coaching/goal setting as well as 4 habit-forming apps or experiences and we found these trends with regards to Octalysis:
Development and accomplishment - across all
Social influence and relatedness - nearly all
Ownership and possession - over ⅔
It was clear that a lot of these apps were successful in developing a good user experience without using the entire Octalysis Framework. We realized we didn’t need all eight aspects to create a good gamification prototype.
.png)
We used affinity diagrams to analyze user interviews and synthesize information and insights about our users’ needs and the challenges they face. Next, we created a user journey map, incorporating an empathy map to clearly lay out our users process and identify what areas we could focus on for the Design stage.
After multiple affinity mapping sessions, and roping in our user journey, we found 2 areas the we could focus our design on. We broke them down into levels of importance justified by the data gathered so we could tackle the most pressing needs for our users first. These are identified in the image below. We then defined the 2 overall goals for this project in "Job To Be Done" statements.
.png)
Through affinity diagramming we uncovered our users' needs for community, real life activities and visible progress through their confidence journey.
.png)
The User Journey helped us identify how gamification could contribute to the different stages of the confidence journey.
.png)
We drafted a series of JTBD throughout the user's journey, incorporating insights from the affinity diagramming and the user journey. We prioritized the following JTBD reflecting our users' biggest needs and opportunities.
Having defined the problem through JTBD, we brainstormed design goals through “How Might We” statements which helped stimulate innovation and the growth of ideas within our group as it guided us towards key problem areas.
Out of the many ‘How Might We’ statements we found the three which most clearly aligned our design challenges around the users' JTBD and gamification, and we used these as prompts for our design studio. We kept them very focused, as we were trying to build solutions for an MVP.
With our "How Might We" statements framing our design process, we entered the development phase which consisted of a Design Studio, Feature Prioritization, Mapping User Flows, Prototyping , Testing, and Iterating.
We ran a Design Studio with members of the executive and engineering teams using our J.T.B.D. and How Might We statements to focus the Studio, and 2 rounds of Crazy 8s to structure the ideation, time and decision-making.
We presented our sketch solutions to each other and then narrowed down our ideas by using the Dot Method to critique and converge ideas.
We selected 3 final ideas to move forward with that were feasible and brought out our user’s needs clearly:
Random nudges to be completed in the real world daily - A way for a users to tell the app what areas of confidence they want to work on and the app will randomly supply the user with focused prompts tailored to their specified needs
A Reflection point - A place where users can see what they have achieved so far and leave reflection points on their journey. Users wanted ways to see what they had achieved.
A sense of community and togetherness - Users can see what activities have been helpful for their friends in building confidence
.png)
With our features now prioritized, we clarified the information architecture and mapped the user flows from the JTBD. The app map provided us with insight into the kinds of pages our user would typically encounter and the actions they would need to take. With these tools in place we moved into wireframing, prototyping and testing.
.png)
.png)
We split the wireframing and prototyping among ourselves across 4 different areas: onboarding, nudge selection, timelines and reflections. I worked on the onboarding, timeline and reflection screens, as well as on the final visual outlook. We first created a mid-fidelity prototype, which was tested through several usability tests.
User test findings were synthesized through affinity diagramming and led us to discover which areas of the pages needed the most improvement. The key areas to be addressed were: Clarity, Readability, and Navigation
We synthesized the 2nd round of usability tests through affinity diagramming and Maze. Maze also helped us uncover what areas of the app users were drawn to using heatmaps.
The key areas to be addressed were: Navigation in the Onboarding and Nudge Selection screens
Hopstair was still in the process of identifying their visual style. We noticed bold colors in a branding audit contrast a muted shade in their logo.
.png)
The following decisions were made concerning the final visual identity of the app.
.png)
.png)
As a UX/UI Designer I was eager to get to the design phase of my first gamification product. However, the short project timeline required us to prioritize, isolate and develop one user flow. I have come to value the Define stage of the UX process even more as I saw how it helped us narrow down on the best design direction for both user needs and business goals, when we had so many good options.
This project also helped me value collaboration across cross-functional teams. As a UX Team, we brainstormed and experimented creative ways to advocate for the UX process while gamifying for a product whose MVP was not complete. We recognized the benefits of cross-collaboration throughout the Double Diamond process when during final delivery, the executive team recognized events from ideation and research phases.
Finally, I really enjoyed working with Hopstair and the team on such an exciting and innovative product. I especially enjoyed getting more familiar with Octalysis, and look forward to continue employing it in my UX journey.
The next steps to bringing Hopstair to an app store near you would be to conduct an accessibility audit on the last prototype, develop all the MVP user flows, and test them with target users.
.png){kind=small}