top of page

HopStair gamification design

oyi-removebg-preview.png

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

46a76c802176eb17b04e12108de7e7e0f3736dc6-1024x1024.webp
372615-200.png
zoom-png-logo-download-transparent-20.png
slack_logo_icon_189220.png
Microsoft_Excel-Logo.wine.png
icon128x128.jpg
6299f743b04c5ae587c4119d.png

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.

kh-removebg-preview.png
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.

v_edited.png
jh.JPG
Screener Survey Question - Have you always felt like a confident person?
Interviews
To continue our research we started interviewing our possible users 
th.JPG
r_edited.jpg
f.JPG

Key Insights

  • Eight Interviewees.

  • 50% Gen Z (18-24)

  • Exploring the role confidence plays in people’s lives.

jj-removebg-preview.png

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.

t_edited.png
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 
dh.JPG
  • 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
khg.JPG
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

fjtj.JPG

Secondary

jtjdjtd-removebg-preview.png

Thirtiary

rysrr_hrg-removebg-preview.png
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

fjjtrse.JPG
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

hewf.JPG
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.

sruss.JPG
Findings
1hpjok.JPG
ligi.JPG
lihl.JPG
kjhhkkl;'.JPG
Prototype V2
jgfjh.JPG
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.
hfj.JPG
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.
jgffjyutgi.JPG
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 
kgkkk.JPG
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
ahrh.JPG
"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
kuggk.JPG
"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! "
gfyl pb.JPG
Nudge selection
rfjdj.JPG
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
hfjg.JPG
"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
iydy.JPG
"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.

bottom of page