HopStair gamification design
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.
UX Researcher, UX/UI Designer
User Interviews, Competitive and Comparative Analysis, Affinity Mapping, Wireframes, High Fidelity Prototype, Usability Testing, Facilitating Client meetings
Jack Fletcher, Dorsa Mokhtari, Vania Nyambura ,Jack Fargher
Figma /Pen & paper /Slack /Zoom / Excel/ Maze/Miro
Hopstair is moving towards its MVP and were interested in looking into Gamification for the app and what that could look like.
Research and design aspects of gamification for Hopstair to grow user retention and enjoyment whilst using the app to grow their confidence.
We Started our research with a screen survey to feel out general thoughts and observations around confidence
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?
To continue our research we started interviewing our possible users
50% Gen Z (18-24)
Exploring the role confidence plays in people’s lives.
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.
After multiple affinity mapping sessions we found Our JTBDs:
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.
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
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
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
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.
Now we had core design ideas we wanted to explore we moved forward to create Wireframes to test our ideas with users.
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
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
Our usability test results showed that the onboarding screens need to be shorter as they made the user tired and reduced the engagement
"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."
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! "
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.”
"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.”
"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. "
Learnings & next steps
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
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.