Screens from Healing Mind webapp

I developed Healing Mind as a freelance for a meditation and spiritual coach's business. Tine wanted to be able to connect directly with current and potential future customers. She was keen for the users to keep up with their meditation practice while also being able to learn new techniques and find out about upcoming workshops and mediation sessions. The webapp was created during a weekend design sprint where I liaised with the client and her customers throughout the design process.


I met with the Tine to find out what her and what she perceived her practitioners' needs were. She wanted to be able to:

  • Have one destination where she could promote her business
  • A way for customers to reach her directly
  • Offer additional meditations and teachings
  • Ability to inform about and book events (through Eventbrite)
  • It needed to be simple and easy to use

I started by doing desk research on similar apps and services and developed a user map to reflect the clients’ thoughts. I used this as basis for further discussion with Tine.

Competitive Research

User flow

To ensure I had a clear direction and accounted for all the client's needs I mapped out the user's journey in the below user flow. This helped me communicate and agree the conceptualised webapp with Tine.

Healing Mind User Flow


With simplicity and the user's needs in mind I created a series of low fidelity wireframes and prototype. Testing these with the client and users I learned that:

  • Daily Mindfulness practice would rarely be used and should therefore be removed.
  • As everyone prefer their meditation practice differently the playback experience needed to be personalised.
  • Player had redundant options for a meditation app and should be simplified to minimise friction.
  • The ‘Appearances’ included a page per event which was overkill as bookings would take the user to Eventbrite anyway.
Low-res wireframes


With new learnings from Tine and her clients I set about creating high fidelity wireframes. In order to do so I decided upon and created a series of assets including a calming colour palette, logo, images, icons and fonts.

As the client didn't have a logo I created this to be clean and personal while communicating the business purpose clearly.

Design elements for Healing Mind


Finally, I created high fidelity wireframes in Sketch and a prototype using Principle. It included screens for sign up, onboarding, meditation player, about/contact page and events page.

Next Steps

Tine is eager to launch the Healing Mind webapp into the 'real world' and have asked me to code it. I am currently in the process of doing this.

Main Tools

  • Sketch
  • Principle
  • Usabilityhub
  • Overflow
  • Keynote
  • Balsamiq