Skip to main content

LOTUS – Case Study ✷

Project Overview

ROLE
UX & UI Design
TOOLS
Figma, Adobe Illustrator, Adobe InDesign, UsabilityHub
STEPS
Competitive Analysis, User Interviews, Personas, User Flows, Card Sorting, Wireframing, Prototyping, Usability Testing, A/B Testing, Revision

What is Lotus?

Lotus is a Responsive Web App, that aims to transform people’s lifes and help them become a better version of themselves, with a focus on mindfulness and habit building.
“We want to help people to improve their individual lives. Finding a balanced life and make space for what you need in your daily routine! Because health is the most important thing we have.”

Design Process

RESEARCH

Process

I started by working out a problem statement. Competitive analysis helped me get an idea of what type of tool I want to create, what already exists out there and how it could be done differently or same.

The following User Interviews helped me to find out actual needs of the users and their motivation and what is important to them.

Problem Statement

In modern society, more and more health issues arise and a healthy lifestyle is hard to maintain when we are so caught up in stress and worry. 
By creating a tool that will help people establish new and healthy habits and unlearn bad ones, we can improve their lifes and overall wellbeing.

User Interviews

SETUP
Via Zoom and in person
STYLE
User Interview
PARTICIPANTS
Six
ANALYSIS
Transfered the results to sticky notes, and created an affinity map
I noted the quotes and sorted them to their needs, topics and possible features.
Even though the particular goals and topics vary a little from person to person, the underlying desire to do more or do less of something is in common for everyone.
This can be translated into establishing individual goals and habits.

Goals

  • Find out where people need more support (mental or physical health) and collect information about their actual problems
  • Find out which features might benefit users improving their health life
  • Collect information about which topics and information would help them to improve their problems

PERSONAS

Luca

AGE
34
JOB
Developer & StartUp Founder
ABOUT
Luca barely finds time to keep up with his wellbeing and easily gets stressed out and overwhelmed with all the tasks.
Sitting on his desk all day is unfavorable for his health; he wants to establish a healthier lifestyle. In the past he has been working out on and off, and also used to meditate, but finds it hard to stay motivated.
“I need small exercise sessions that I can incorporate in my busy daily life.”

Goals & Needs

  • Balance with his work & health
  • Relaxation & Stress Relief
  • Exercises for back pain (short sessions)
  • Making daily meditation a habit

Frustrations

  • No time
  • Too much stress & worries

Goals & Needs

  • Tipps & Tricks on healthy lifestyle
  • Change her diet to more healthy
  • Moving more (0,000 steps in a day)

Frustrations

  • No motivation
  • Doesn‘t know where to start

Melanie

AGE
23
JOB
Student
ABOUT
Health has never really been Melanies priority, but lately she got more into it and started her journey. She wants to move more and change her diet to a more healthy one, since she eats a lot of fast food and sweet snacks everyday. She needs tips & tricks and education on how to establish a healthier life.
“I want to change my diet and learn more about healthy nutrition.”

Based on my findings, these are the main features I want to focus on:

Habit Goals
Learn
Exercise

INFORMATION ARCHITECTURE

User Flows

By creating User Flows I could clearly see the single steps and therefore the screens that are needed to make the task happen. This was a wonderful base to create my first sketches and Wireframes.

Sitemap

I validated my initial information architecture with the help of Card Sorting to find out a structure that feels more intuitive.

DESIGN LANGUAGE

Typography

Colours

Gradients

UI-Elements

Button

Settings

Toggle Button

Video & Article Cards

Habit Goal Cards

PROTOTYPE

Process

Time to put it all together!
Starting with pen and paper sketches, the first digital Wireframes, and finally the Prototype from low-fidelity to high-fidelity.
During the designing process I conducted moderated remote Usability Testing, which helped me fix issues and find out where my design could be confusing for users.
A/B Testing and gathering feedback from other designers has helped me to improve the overall Usability and Accessibility of my prototype.

User Testing

SETUP
Zoom
SESSIONS
30-60 minutes
METHODOLOGY
Remote moderated
PARTICIPANTS
Six
ANALYSIS
Rainbow Spreadsheet to organize and prioritize the results

Goals

  • Test the usability of main features: Habit Creating, Exercise, Learning
  • Test the efficiency and usability of navigation structure and the onboarding process

Tasks

  • Complete the Onboarding
  • Create a new Habit Goal
  • Start the Yoga Training
  • Open an article about nutrition

From Wireframe to High-Fidelity Prototype

Sign Up

  • Rearranged the “Log In” option, so that the button belongs to the input boxes
  • Moved the input box content to labels above them, so that the user can still see them when they already typed something

Habit Settings

  • Moved the toggle icon next to the reminder, so that the action is executed before showing the timer
  • Included the option to change the habit name here
  • Rearranged the days to fit them into one line again

Dashboard

  • Changed the displayed active goals to Cards, this way more goals can fit into the screen

Habit Settings

  • Divided the content of the initial sketch into different screens to reduce the cognitive load and only show the necessary information (moved to Habit Settings, and some are displayed only “Individual Goal” is chosen)
  • Reduced the amount of habits and changed it into “Popular habits”, so it’s an easy accessible option for users with the opportunity to see all

Desktop Screens

Thank you!