Hypnic State Meditation App— Wellness Project Case Study for Ironhack Bootcamp

Viktor Enns
9 min readApr 4, 2023

--

Hypnic State Meditation App — Case Study Cover

The Challenge and the (fictitious) Client

The Daily Health Conference is a non-profit organization dedicated to promoting health and wellness through impactful public talks, participatory workshops, and professional training all over the world. The Daily Health Conference began in 1983 in San Francisco as a conference where Medicine, Health, and Wellness converged, and it now covers nearly all health-related topics — from nutrition to sleep to addiction — in over 100 languages.

The Daily Health Conference offers an online membership on its website. Even though The Daily Health Conference has numerous years of experience in the field, its program has been slow to catch up with technology. They have seen a substantial drop in memberships.

Currently, their membership offers:

  • Access to live monthly webinars
  • Access to an archive of past webinars
  • Social networking for members
  • Educational content and resources
  • Online trainings & certifications

Now the Daily Health Conference wants to find a way to offer more value to its members. To do this, they have decided to focus on two things:

  1. Create a set of digital mobile apps for their members
  2. Update their image — create a design system that reflects an innovative approach to wellness

They are aware that the competition is fierce across the Health Tech space. So this year, The Daily Health Conference wants to unveil a series of digital wellness apps at their annual flagship conference in San Francisco.

The mobile apps will be part of their membership offering. All of their members will be able to use them.

Hypnic State — The Project

Our group consisted of Ron and me. We had only very limited experience with meditation. We were eager to learn.

Work Breakdown Structure — 2 weeks for UX and UI

Week 1 is dedicated to UX while week 2 is all about UI and the presentation.

Before starting the work we broke down the tasks in smaller and smaller chunks and grouped them by weeks. Week 1 deals with the UX part and week 2 gives us time to implement the UI, prototyping and creating the presentation.

First Blocks — ASMR = almost no research

When we started we ran into an issue where we thought ASMR would be an interesting topic to explore. After researching it for s significant amount of time we realised that there wasn’t enough research to support our work so we pivoted to a more established topic — meditation.

Competitive Feature Analysis — Overkill FTW

In the competitive feature analysis the amount of features each of the leading apps had was staggering. Even without being able decipher the individual features just the sheer number of them is overwhelming. Timer apps, too, are trying to win by having just a few features more than the other guys. To illustrate the magnitude we upscaled our feature set several times over the other ones.

Before being able to talk to our users and get valuable insight in their meditation behavior we realized that most apps on the market are trying to win by having more features than the other guys. Meditation timers were guilty of that, too. Being able to simply start a meditation without distractions was a difficult task with most of them.

One app in particular stood out as a singularly different type from all the others. Enso was simpel, elegant and didn’t have the feature bloat of the others. We decided to keep an eye on that concept and see if our user research will confirm a need for something similar.

Survey — Meditate your way

The survey results of 57 responders were showing a trend towards users wanting to choose their own ways of meditation.

Our survey of 57 people was showing a trend where people who meditated wanted to meditate in their own way while using their own channels and not be forced to use what the app gives them. Most people were either using background music of their choice or nothing at all.

User Interviews — Notifications are a problem

User interview results were reinforcing the surveys findings. Meditators want to not be distracted and want to meditate in their own way

In our interviews we saw the trend reinforced even more. Each of the 6 users we talked to complained about irrelevant notifications, complex setups, bloated and complex apps. Some people were banishing the phone from their meditations and other were going into black and white mode, on mute and not notifications.

Affinity Diagram — first decision revisited

The affinity diagram turned out to be a crucial tool to understand our users.

We distilled the user answers into an affinity diagram. The voting turned out to be a very clear and simple task at first. After some very deep discussion we realized the issues we were initially focusing on were superficial and wouldn’t help us help the users. We changed our votes to focus on being focused during meditation and giving the user the freedom to choose their channel meditation.

User Persona — Daniel dives into meditation

Diving Daniel is in part inspired by a real user interview and a combination of answers our users gave us in interviews.

From the affinity diagram we were able to manifest Diving Daniel. He is a diving instructor from Australia who uses meditation and breathing exercises as a way to help with diving and calming his mind in stressful situations. Daniel has a direct connection to one of our interviews where we talked to a diver who contributed several attributes to Daniel.

User Journey — Notifications are a problem, again

In his user journey we capture a moment in time where Daniel comes home from a long day at work after a stressful commute. Before he goes out again he decides to calm his mind by meditating. He sets a timer on his phone and starts meditating. After a while a notification interrupts but he lets it go and keeps meditating. When he finishes he feels better until he realizes that his timer didn’t go off and he essentially meditated for too long. He is now late and stressed that he needs to hurry.

This is where we see an opportunity to give Daniel a feature in the app that completely mutes and disables any distraction the phone could generate while he meditates.

Problem Statement — Meditation without distraction

Daniel’s problem statement captures the challenge while also hinting at the solution.

Down to earth practitioners of meditation need to find an effortless way to achieve their meditation goals without distraction, because current tools are often complex and time-consuming to start.

MOSCOW Matrix — Should have?

The Hypnic State MOSCOW Matric shows a clear focus on the main features of the app.

Ideation — Super Hardcore Do Not Disturb Mode

Ideation: Super hardcore do not disturb mode.

From ideation came a number of similar ideas that would help Daniel focus on his meditation or remove distractions. One mode in particular made the most sense to us. We call it the “Focus Mode”. When Daniel turns on the app all notifications and distraction get suppressed except the meditation timer. When the app closes the phone goes to the previously set mode.

Lo-Fi Concept Sketches — limited features for maximal user freedom

The lo-fi prototype and concept sketch that shows the early idea stages of the final product. Achieving simplicity is not as easy as it seems.

We sketched out a concept on paper and tested it with a couple people to see if what we are trying to accomplish comes across. For the most part the tests were uneventful and as expected. An insight was that people responded really well to the simplicity and elegance of the concept. Another was that this needs to be an app that is visually well executed because there no hiding behind a multitude of features and screens. The app needs to do what it does well and the usability needs to be high without being annoying. Not an easy task, indeed.

User Flow Chart — simple, elegant, complete

This is a visualisation of the user flow within the app.

Mid-Fi Prototype — still works

The mid-fi prototype testing went well and did not uncover any broken states. It did reinforce our idea of a minimalist app with only a limited set of features.

After building the mid-fi prototype in Figma we were able to test it and found that it performed very well. There were no usability issues or problems with understanding the features or functions. Once more, our testers showed us that we need to pay close attention to the UI of the app.

Moodboard — Kids, can you say “Bauhaus”?

The a-typical moodboard of “Hypnic” is focusing on the theme of focus, the elements of space and calm in a Bauhaus type of way.

This is not your typical meditation moodboard with 20 year old ladies sitting in a lotus pose in front of a sunset with their hands turned up to the heavens positioned calmly on their knees. The Hypnic moodboard focuses on the calm and focused theme of space and modern art of the Bauhaus era.

Style Tile

Hypnic State style tile with the main elements present.

The Hypnic style tile shows a representation of the main elements used within the app.

Branding / Logo Design

Logo creation iterations.

We went through several iterations of names and logos in the creation of the “Hypnic State” brand. The hypnic state describes the mental state between being awake and falling asleep. Most people have experienced it in some degree and meditators describe it as being part of their meditative experience.

Prototyping

This is what the complete prototyping setup looks like in our Figma prototype for the Hypnic State app.

Figuring out how to make a timer was not easy at first. We tried using third party timers which would move our planets along the ellipses that represent the orbits. We tried moving the planets by hand. That seemed silly. Silly turned out to be the way to go. The plugins were limited and even limiting. We stuck with Figma and the good old “move by x pixels to the right and move by x pixels up” procedure while creating the prototype. Another issue that crept in was that a slight positioning variation between the screens made the elements “wobble”. At first we thought it came from the animation type but after some testing saw it was an alignment issue. We created all screens from scratch while being painstakingly precise with planning ahead which screen should look how and what element would be where. After creating the full set of screens and the timer running smoothly we realised that there were entirely too many orbits in the solar system and they needed to be culled. The app did not seem calm, focused and minimalistic anymore with that many orbits. Again being precise to a fault we made the affronting ellipses invisible instead of deleting them our of fear that deleting might introduce a wobble. It worked and the prototype turned out well.

Prototype in action — experience the timer app in action on YouTube

Here is a demonstration of the timer and the settings in our Figma prototype where I was able to apply all my learned skills as an animator and even expand my knowledge by trying out a great deal of new ideas and researching a great deal on Youtube and Tiktok.

The final prototype seems like an important step in the direction of distraction free meditation for people who know how to meditate and do not want to be distracted from it.

Next steps and learnings — Minimalism, oof

Our next steps would be to test more thoroughly with experienced meditators and figure out an even more focused way to serve our users.

My main learning from this project is that feature overkill is not always a good way to reach a customer. Sometimes minimalism is the way to go.

Also, minimalism is not easy. It takes a lot of planning and testing to achieve a minimalist app that works and is still usable. Not being annoying with pop ups and explanations and yet delivering a fluid experience inside an app with only a handful of screens is a challenge that shouldn’t be underestimated.

--

--