HopStair gamification design
Project Overview
almost all of us have experienced a lack of confidence at some point in our lives and how it has affected our daily lives. to be able to fix this issue there are Many confidence coaches out there but it's hard to deal with the expenses & to find a proper time to spend in coaching sessions in todays world, for these reasons People are now Aiming toward using online platforms more than before, therefore, HopStair sees an opportunity on creating a safe area as an online platform for users to improve their confidence by giving them daily nudges and professional support through the App, Although as we can All relate to it can be hard to stay royal to your process while working on such a sensitive subject (Confidence) so HopStair sees the strong need of gamification in their platform so that they can keep the user motivated and engaged while using the app.
My Role
UX Researcher, UX/UI Designer
My contribution
User Interviews, Competitive and Comparative Analysis, Affinity Mapping, Wireframes, High Fidelity Prototype, Usability Testing, Facilitating Client meetings
Team
Jack Fletcher, Dorsa Mokhtari, Vania Nyambura ,Jack Fargher
Tools
Figma /Pen & paper /Slack /Zoom / Excel/ Maze/Miro
Duration
3 weeks
Problem
Hopstair is moving towards its MVP and were interested in looking into Gamification for the app and what that could look like.
Our Goal
Research and design aspects of gamification for Hopstair to grow user retention and enjoyment whilst using the app to grow their confidence.
Discover
Surveys
We Started our research with a screen survey to feel out general thoughts and observations around confidence
Findings
-
50 responses
-
54% 25-34 y/o
-
28% 18-24 y/o
-
70% described themselves as a confident person.
-
80% stated they hadn’t always felt like a confident person.
-
88% respondents interested in improving confidence.
Screener Survey Question - Have you always felt like a confident person?
Interviews
To continue our research we started interviewing our possible users
Key Insights
-
Eight Interviewees.
-
50% Gen Z (18-24)
-
Exploring the role confidence plays in people’s lives.
Insight 1
Insight 2
Insight 3
Octalysis
Framework
To be able to implement our research to our design by gamification we went through familiarizing with octalysis framework
-
We familiarised ourselves with the framework.
-
We used Octalysis as a map to better understand how gamification could help solve the issues we found from our initial user research.
-
We used Octalysis as a set of guidelines to do some comp/comp analysis.
Competitive/ Comparative Analysis
At this stage we Looked at 5 coaching/goal setting platforms as well as 4 habit-forming apps using octalysis framework to be able to find the trend themes
-
Most of these apps were successful NOT using the entire octalysis framework to develop a good user experience. We realised we didn’t need all eight aspects to create a good gamification prototype.
Define
Goal
JTBD
After multiple affinity mapping sessions we found Our JTBDs:
Primary
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.
They were:
-
Involving community/others had to be part of solution -
-
Being able to see successful moments and reflect on growth from the past was important
-
Real life and action - users want to use their confidence in real life settings and doing that is improvement for them
Secondary
Thirtiary
HMW
To help use design from a users perspective we came up with these HMW questions to accompany our JTBD statements.
Collectively, all of these helped us go into our design studio with the user needs and gamification as our main focus.
Kept them very focused, as we are trying to build solutions for an MVP
Develop
After running a set of design studio with our client Nadine and hopstair's AI lead Kirill using the Crazy 8 method we now had final ideas to be taken through from design studio
Nudge randomizer
Nudge popper/dropper
Nudge reflection
A Nudge spinner/ Shaker/ Randomizer.
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/ Timeline/ Moments.
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.
HMW
Wireframes
Now we had core design ideas we wanted to explore we moved forward to create Wireframes to test our ideas with users.
Findings
Prototype V2
we added on boarding to teach people what they might expect. We explained in more detail what the user may come to expect within app.
Users had problems connecting with each nudge so we designed a selection screen with more information and a quote from someone famous on the subject to help ground each area of focus in the real world.
Nudge Dropper with updated neutral shapes
Timeline and profile page
Deliver
Usability test
Findings
We conducted a set of usability test on our Prototype V2 using Maze and as the heat map shows we found out users were taking other paths to reach their success in the task
Iteration
Our usability test results showed that the onboarding screens need to be shorter as they made the user tired and reduced the engagement
Onboarding
Prototype V2
"I enjoyed the process and enjoyed the cards explaining different types of nudges.
I did find I got a bit tired of reading all of them and was skimming by the end."
Prototype V3
The onboarding was pruned down heavily from 10 steps to 8 with 3 visual checkpoints to break up the process and make the onboarding visually different for each section
"I felt the 10 screens of the onboarding were a bit long, especially when I read the number on the first screen... however, they were very clear and quick to read! "
Nudge selection
V2 nudge selection
V3 nudge selection
"It wasn't clear which focus areas I was choosing when I selected the activities. I thought they were all in self-belief.”
Timeline
"This was not intuitive for me. I struggled to understand where to click to find the nudges from 12 September.
"Not sure... It was not instinctive to me to click on the timeline too. I clicked on the completed items on top, then on "nudges" and because nothing worked I clicked everywhere until something happened.”
Progression
"I like the little tokens they are very cute, reminds me of tiny collectables you'd find in cereal "
"Yeah, it's satisfying to see the progress made, especially when it's displayed as an infographic. "
Final Prototype
Learnings & next steps
Iteration
Learnings
-
Confidence is a fascinating and complex area to explore.
-
Gamification of an app without an MVP yet was a challenge.
-
Gamification of an an app is a long, iterative process.
-
Shapes/Icons have different meanings to different people.
-
Demographics other than Gen Z may benefit more from confidence coaching
Iteration
Next steps
-
V3 Prototype Testing - moderated and unmoderated
-
More usability testing with 18-24 year olds (Gen Z).
-
Further research and interviews with 18-24 year olds (Gen Z) about the role of confidence in their lives.