Mindfulness app gamification

UX design, strategy, gamification, content architecture, wireframes in Figma

Client: Spoke

The project

Spoke engages young people with mindfulness via meditative hip hop music. Each episode is written and performed by the Spoke artists supported by neuroscientists, psychologists and therapists.

My involvement

I was brought on board to develop the UX of this app. I helped with strategy, mapped out user flows, designed wireframes and worked alongside a game designer incorporate gamification mechanisms.

The app has a score of 4.9 on the Apple App Store.

Planning

Spoke was working towards releasing a MVP version of their app, so I ran a workshop to identify which features to include.

I created cards for each of the potential features in advance and in the workshop we agreed where they would sit on an effort/benefit matrix.

This enabled the team to identify which features would be most beneficial to include and could be achieved with minimal effort.

Secondary research

I researched gamification and apps aimed at a similar market.

I read about gamification techniques (e.g. flow, feedback, ownership, social influence, accomplishment and meaning) and looked at apps like Candy Crush, Duolingo, Tiktok and Snapchat.

I created a deck of my learnings and tips for reference during the design process and to be used by the team going forward.

Gamification and architecture.

I worked with a game designer to map out gamification mechanisms.

Users collect rewards that correlate to topics like resilience, calm and focus. Through their toolbox they can browse these achievements and access more psychologist-created content related to those topics.

I mapped out the user flow through the app. This included the all-important “game loop”, designed to drive users to listen to more episodes.

Wireframes

I created the wireframes and have presented them here alongside the final app, to demonstrate how my work developed into the final product.

Dashboard - Today (Wireframe)

Dashboard - Today (Live App)

Dashboard - Progress (Wireframe)

Dashboard - Progress (Live App)

Dashboard - Activity (Wireframe)

Dashboard - Activity (Live App)

Previous
Previous

Adobe: Creative Cloud research

Next
Next

Virgin Media Business: Pitch to Rich UX