As the sole designer on this project, I did the following:
Created Mave’s new visual style + design system
Designed the entire app from scratch, utilising notes from 50+ demos (conducted using the previous version of the app)
Collaborated with PMs, engineers and founders to build something that had Mave’s voice
Polished UI inside the Mave app codebase
Aparna Bala
Designer of things
sensation reassurance
wearing instructions
Concept: intensity
Concept: soundscapes
When to remove device
Concept: ramp up
5 day routine
Device care
Post-session feeling
Onboarding/ Pre-session
There could be a little more material here as users would come in with a fresh mind and from a place of curiosity. Good for guidance on the device & tDCS.
wearing instructions
When to remove device
sensation reassurance
In session
This is when the session’s tingling kicks in. It’s also when the user sees the session’s UI for the first time. Information had to be short, easy to consume and focused on the session’s main concepts.
sensation reassurance
Concept: ramp up
Concept: intensity
Concept: soundscapes
Post-session
This section should answer the common questions:
What comes next?
Is what I’m feeling right now normal?
How often do I need to do this?
Device care
Post-session feeling
5 day routine
B2C Health tech
Mave
0 → 1
Designing software for new age hardware
Mave headset
Mave app
This case highlights specifically how we built guidance into a hardware companion app while designing the entire app from scratch!
The entire app was designed and built with 1 Manager, 1 Engineer and 1 Designer in 3 months (timelines include development) fuelled by hours of white boarding, sketching and debating tradeoffs.
Mave’s headset boosts the brain’s neuroplasticity through 20-min sessions conducted on its app
Mave’s tDCS headset delivers mild electric current through the prefrontal cortex, clinically proven to help with depression, anxiety and ADHD. Apart from individuals experiencing the aforementioned conditions, the headset also attracted “biohacking” individuals who wanted to optimise their health to the max.
To conduct sessions, there was a simple app built with the sole purpose of starting, pausing and ending tDCS sessions. This, along with one-on-one introductory demos for pilot users, was doing the job when there were only a small bunch of users.
We started by understanding what kind of guidance users needed
Pre-launch, the team had collected insights from the 50+ demos. From these demos, we understood the common sources of anxiety, what people found most confusing, and much more. To find the right guidance users needed, we looked at the following:
The questions users were asking before, during and after demos
Places users got the most stuck
Concepts and protocols unique to Mave and tDCS
For this guidance to land, it had to be in the right part of the user journey
We thought of 3 distinct phases considering that the goal was to have users fairly educated about Mave’s headset and tDCS by the end of their first session.
After knowing what to say, we needed to figure out how it’ll look
We then needed to find visuals that complemented Mave’s tech-meets-wellness position. I picked the home as a sample screen and tried just about everything that felt “Mave” based on my conversations with the team and the company mission.
The result was information that took the right form and sat in the right places
*and in the right hierarchy
But users could not understand this technology without also having a one-on-one demo first
With hundreds of orders pouring in, one-hour demos for each user was near impossible (especially considering that there was only one person for the job).Pre-launch, the team had collected insights from the 50+ demos. From this, we understood the common sources of anxiety, what people found most confusing, and much more. There was always going to be something a little freaky about voluntarily zapping yourself and even our bravest demos saw some hesitation and many questions.
We had to ask-
Can the app give users the same feeling of safety and reassurance as our demos?
Here’s roughly what we ended up with:
It’s raining Maves!
Existing app
Exploration #1: Try everything that feels Mave
Exploration #2: Expand on one style
Exploration #3: Different states using the one style
Final explorations: The pivot to dots
Dots felt universal and could come together to form different shapes that carried different meanings.
Shapes that felt approachable, yet technical
Warm colors meets sharp fonts and sharp colors
colors, glows, grain
try the dark version
darker, more glowy
more emphasis on info, with shape only as a supporting element
The association between shapes and states is information the user would need to store in their heads. Can we make associations between shapes and states clearer?
Artistic, calming and with a warm energy
Grounded in real life, clean visuals
PRE-SESSION
Now
Wearing Instructions
This piece needed users to think, check and readjust and can be considered one of the more “labour intensive” parts of the set-up process. To ease that load, I created a very simple step-by-step module that would explain each instruction with visual aid.
Before
Safety & Reassurance
Since this would follow the heavy “wearing instructions” piece, the design and overall message needed to be concise yet clear.
This information would also be mentioned again during and after the session and so, did not require an overstated design.
IN SESSION
Introducing “ramp up”
When a session starts, the first 10-20 seconds are used to get the session up to the desired intensity. This gradual lifting of current is what we termed the “ramp up”.
Now
Before
Sensation Reassurance through check-ins
Shortly after the device reached its set intensity, we asked users how they felt. Feeling a sharp pain above an 8/10 was abnormal and an indicator of potential fit issues, skin issues or worst case, a sign that Mave may not work for the user. Pain below an 8 often faded out after a few minutes as the body adjusted to the sensation.
Check-in: 1-4 pain rating
Check-in: 5-7 pain rating
Check-in: 8-10 pain rating
Rating < 8
Rating 8-10
Introducing intensity & soundscapes
The way this surfaces tries to emulate to moment when the user opens a part of the app, looks at the demo conductor and goes “oh what’s this?”
Intensity
Soundscapes
POST-SESSION
Device care
Every Mave session needs a fresh set of saline sponges that act as electrodes. While the wearing instructions mention that these sponges are single use, it is hammered down a second time after the session.
Full session done
Session stopped midway
Session aftermath
Most people might be left feeling the same as before they started because tDCS takes weeks to see changes. Others report feeling sleepy or relaxed and some felt pain. It was all valid. Having a blanket message that told users everything that was and was not normal had the potential to cause overwhelm and introduce bias. So instead, we tried to understand how the user felt and made sense of their unique experience.
5-day routine
Given that the habit forming component is crucial to seeing results with Mave, it was important for us and for the user to emphasise it and even provide additional support to keep them on track. We achieved this through an optional nudge to Lock in a routine. This routine would be saved in settings and editable at any time.
This metric was now something that could be worked upon and frankly, we were expecting much fewer individuals to be completing 20 sessions in 30 days.
My design system could accommodate future needs
Building a visual style and design system from scratch has to be one of my biggest challenges to date.The foundations I set were not only used for future features on app, but also by the marketing team to create collateral for ads and video assets.
Shipped right in time for 250+ preorders & ready to replace in-person demos
With the app now giving the guidance, there was more:
studying user behaviour on the app and finding improvement areas
gearing up for Mave’s Gen 2 headset and all the new app requirements that come with
networking, marketing, research and more
A note from my Product Manager
We even got some love from a user in Korea! Read here.
Take a trip down memory lane with me
During feature releases, I put myself in the user’s shoes by testing the app with the headset.
Fun fact: This headset is in an unreleased color!
Many a sketch was sketched. This was to scope out different page structures for the “analysis” portion of the app.
Towards the end, it was all hands on deck. I was making changes in the codebase for the first time!
Some behind the scenes from all the whiteboarding that took place.
Design detail
CTA copy doubling as confirmation
Extra tips
Additional tips in blue
Feature
Consistent page layouts for easy data consumption
Why here & now?
Setting up the user right would ensure that the no.1 cause for a failed session, “physical contact loss”, didn’t take place. This most often stemmed from wearing issues.
Why this needed a redesign
Screens were too text heavy with very little visual aid
Placing the headset was still very confusing and in truth, instructions were differing from person-to-person based on their forehead size and this point was not highlighted at all.
There were more instructions needed such as strap adjustment, tightness, etc. that seemed to also cause contact loss.
Reassurance note
When a session started, the first thing users asked was if the tingling was normal. This was the right spot to tell them it was before they could ask.
Safety note
“Don’t take your headset immediately off when you felt the urge” was important to convey. Removing the headset during active stimulation would likely cause a sharp pain and have the user seeing white flashes which, though harmless, was disorienting nonetheless.
Why here & now?
This would be the final message users see before the first session began and had the best chance of sticking.
This information set the right expectations and directly impacted the user’s first impression of the session experience.
This was also something we often told people in demos before the session started.
Notes with context
A brief journey with short changing messages made information easy to digest while simultaneously experiencing the session’s stimulation.
Design detail
Session configurations are disabled until the session has reached its set current.
Why here & now?
We found that experiencing this sensation without an explanation was much more concerning to the user than the sensation itself.
So we took our internal term “ramp up” and explained it to users.
Why this needed a redesign
There weren’t enough reassurances baked into the ramp up experience. There were two main missing pieces:
no mention of the session sensation
no mention of why this “in-between” stage exists at all
“The session is still running”
A small banner appears over the sheet when there is a session running in the background.
Semantic colors on ratings
The slider has 3 fill colors based on rating ranges:
Green for ratings 1-4
Yellow for ratings 5-7
Red for ratings 8-10
Taking the right precautions
If the user reports a pain rating of 8 or more twice, this points to a bigger problem. I made the decision to stop the session on behalf of the user to:
Stop the unpleasantness of the session before a bad impression is cemented
Direct users to getting support from the team as soon as possible
Why here & now?
To emulate the check-ins during our demos, we added one right into the first-time session.
This was added after ramp up, as the session would have reached its set intensity, and the sensation was unlikely to get any more intense.
A consistent 8/10 pain rating would ideally need the team to intervene and we needed a way to capture this.
Why here & now?
While some pieces of information came to the user unprompted, less critical information didn’t need to be imposed.
Intensity could be changed any time during a session. And instead of revealing this to the user randomly, I placed a bit of education right when the user showed curiosity towards the feature.
Visually denoting intensity
A white dot that gets bigger as the intensity setting is increased (& vice versa)
Sounds are not crucial
Sounds are not added by default in the first session to show users that, unlike intensity, this setting is optional/ not core to a session.
Coach marks that meet the user
When the user first arrives at this sheet out of curiosity, the main section is highlighted with a dismissable coach mark that auto-dismisses in 5s.
Why here & now?
After the session is done, the user’s questions start to change. They spent 20 minutes tuning into the feeling of the session and once it’s over, they take off their headset and wonder “what do i do with this now? I don’t want to ruin it.”
We added this as a note to the final session end screen.
Custom messages
The copy on this screen changes based on the selection(s) made.
Declaring the feeling
Bucketing feelings into “i feel different” and “I feel the same” to make answering easier
Why here & now?
During demos, people often wondered if they were supposed to be feeling any different right after the session.
In pursuit of providing the demo experience on the app, this was the right place to address what was and wasn’t normal to feel after a session.
Why here & now?
This felt like the ideal place to nudge a commitment since the user had just experienced the session and was in the best position to be able to visualise how they might repeat the same thing 5 days a week.
aparnnaa98@gmail.com
@aparnabla