Crafting the Visual Style for an Apple Design Award-Winning App
2020
Senior Product Designer
Visual UI Design · Visual Concept · Research · Animations
Year
My role
Team
Scope
+22
The Loóna app was created by the authors of MSQRD, which allows you to apply masks to real-time videos. MSQRD bought Facebook with an estimated purchase amount of $40-70 million.
Product Overview
About Loóna founders
Loóna is a unique mixture of color therapy, sound ambiance, and storytelling that helps to let go of daily fuss and get a better night’s rest.
What is a Loóna?
Later, the team members, having fulfilled all their obligations to Facebook, left the company, creating a new project — Loóna. Loóna is a venture startup.
My Role and
Challenge
My Role
Gathering a founders vision, refine and rethinking the visual for a new global launch
Challenge
I was the sole product designer working on the mobile product right after MVP version by strategizing, conceptualizing, tone of product voice, designing, and delivering the hand-offs to the developers.
Vision
The current app design doesn’t reflect all the content Loóna offers (e.g. sounds, sleepscapes) and hence results in weak engagement/retention with the users
Turn Loóna into a lifestyle brand with a variety of immersive content used by the user every day.
Problem
The mission
To recreate Loóna's brand from scratch and, as a result, integrate it into the app.
The strategy
Create a new competitive application style by engaging a new audience and increasing the retention of the current users to the new app.
The goal
Can't close the tasks
When visiting/using the Program doesn't find values on the page, and cannot close the main tasks (problems) quickly.
Discovery
Why do only 8% of users back to the app on the second day?
Competitor Research
Defined common user patterns/behavior on health&fitness apps.
Complex UX/Navigation
Poorly understand the structure of the Program screen and the relationship or difference of sections (Tracks, Favorites) among themselves.
Visual design
Track covers are poorly distinguishable for users, it takes time and cognitive effort to find the right section.
User Interviews
Product Managers and I conducted 5-6 interviews to check initial assumptions.
Desk Research
Defined common user patterns/behavior on health&fitness apps.
The results of discovery
MAU in App ~ 120k. New audience — users who encountered sleep problems and sought solutions.
Our audience
The maximum goal is to increase brand awareness. We will measure through proxy metrics - the number of articles, interviews, and the totality of the brand awareness metric. The minimum goal is to increase the retention rate and MAU.
Success criteria
Current retention ~25% (non subscribed), Target ~35%
MAU in App ~ 600k
Part 1
My first efforts
In my initial and subsequent efforts, I aimed to craft a UI design reminiscent of competitors such as Headspace, Calm, and Reflectly, while preserving the emotional tone conveyed through coloration.
Visual attempt
Additionally, I focused on refining the main screen features, prioritizing the most crucial elements for user interaction and engagement.
Review the main screen
Part 2
Branded concepts
During our redesign, our team joined Branding Designer Alex. He started responding for branding.
New blood
We ultimately decided on a simpler approach: a small character, a girl, with a clear and straightforward design. Though she hails from another planet, she exudes simplicity, casting a gentle glow that guides one to quick relaxation and a peaceful sleep. The team found this choice delightful.
Selected brand
Alex prepared three versions of the branded style.
We want to choose the style which suited for the sub-Loóna Brand (e.g. Loóna Family, or Loóna Kids) and use that in the future.
Three version of branding
The second and third concepts revolved around extraterrestrial characters designed to assist in facilitating deep sleep after a hectic day. However, we ultimately opted against these ideas due to their intricate visual designs. We felt that such visuals might become outdated and not in line with a modern aesthetic.
Part 3
My first efforts
In my initial and subsequent efforts, I aimed to craft a UI design reminiscent of competitors such as Headspace, Calm, and Reflectly, while preserving the emotional tone conveyed through coloration.
Visual attempt
Additionally, I focused on refining the main screen features, prioritizing the most crucial elements for user interaction and engagement.
Review the main screen
Testing methods
— usability testing
— SUS (System Usability Scale)
— observation (user behavior) mostly
— think aloud
— 30-40% of hypotheses are confirmed
— SUS survey scores – 60+
— user behavior is as expected
— user responses to the interview are positive
After
— retention Day 1/7 + ~5%-7%
We prepare user stories to cover all program screen users' tasks
Dividing hypotheses
Prioritized
hypotheses
— value
— findability
— salience
— understandability
— high
— medium
—low
Mpl
Based on user stories we create hypotheses to validate usability
Work on User Story and Hypotheses
How we will work with users problems?
How will we measure
the result?
The CPO wanted to cover ALL user stories with high priority to cover all user tasks and then — validate hypotheses. Total turned out of 12 stories.
Prototyping.
First iteration. Initial wireframes.
From...
10+ concepts for the first version of Program screen.
To...
Final concept for the first testing.
Prototype flow
It was a mistake, but... we didn't realize it
Design decisions
Testing and outcomes
of first iteration
~45 Avg Score —
The first iteration — ~70% hypotheses weren't confirmed
What were users feeling?
3. Users don't know where to click (where is CTA?).
SUS
results of SUS ↗
1. Confusion with the goal of the Program. A lot of features.
2. Features seem crowded and unfocused, with low user engagement.
1. Removing the daily plan
2. Focuse on three main sections: sport, nutrition, and male health
1. Lose weight
2. Build up muscles
We were back to simple version
3. Being better in bed
3. Improved the program section images
4. Updated the tone of voice
Focus
Solve only on 3 user tasks/problems
Prototyping. Second iteration.
Improving the UX.
Design decisions
The second iteration — ~30%-40% hypotheses weren't confirmed
Testing and outcomes of second iteration
~62 Avg Score
What were users feeling?
SUS
Users had improved interaction with the new prototype.
2. Deleted the description and focused on pictures
Focus only on the most important
Prototyping. Third iteration. Final solution.
1. Improved images
We realized, that content is the first
Design decisions
3. Deleted main goal, moved the label to account
Final solution
~63 Avg Score
~30% weren't confirmed, but...
4→8%
Retention Day 7
7→12%
Retention Day 1
We felt that users understood the interface, achieved their goals, and were satisfied with the user interface
Hypotheses
SUS
General outcomes
Rolling it out to 50% of users (with a/b test)
Test outcomes
Tested 1.5 month. Our cohort was ~10k users for one test option.
What is next?
1. Change the display format of the blocks — a rectangular list
The experiment to improve the program page continues....
New design concepts
2. Reduce the amount of content (pictures) on the screen, leaving it simple and understandable
3. Divide the functionality into 2 sections — Tools and Program
4. Continue to experiment and improve the user experience
1. Design-thinking — super, but so long. We would use framework for only the big features
Mistakes
1. Created complicated solutions
2. Tried to cover all the stories/problems, didn't focus on the main ones
3. Visual design/fist imtression are crusial
4. Did’t focus on content. Huge fail
Learning
Not so much
2. Involved the whole team in workshops and brainstorming (team spirit)
3. Communicated with users and learning about their needs helped make the feature well received
"Anton is a great professional, with an attention to details. Always willing to understand the business requirements and rationale. Collects stockholders perspectives and applies them to design. Stays on track with industry latest trends. Non-conflict and collaborative, always willing to learn something new. Wish Anton all the very best in his new professional challenges and endeavors!"
founder @the Coach: men’s health app
Product UI highlights