Leur: A Case Study
Design Challenge
Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle.
You will be required to conduct user research to understand people’s relationship with mental, physical and emotional well-being in order to develop a tool that will drive them into action.
Then you should develop a mobile solution based on a wellness category you chose after the research.
Your solution must provide features that:
- users need to be able to set up their profiles to include important information relevant to their goals.
- users need to be able to set their goals and track their progress
- users need to be able to share their stats with their wellness coaches.
Our mobile solution was Lueur, a sleeping app that focuses on relieving the stress of its users. I would explain below the steps we took to arrive at this.
UX Process
This is the user experience process which encompasses research on our users to empathize and deeply understand them, define their pain-point and ideate a solution to solve this problem.
Empathize
This is the first step in the UX process and also the most important because we need to be “users first” since they decide the failure or success of our product.
Competitive Analysis
The results from the competitive analysis inspired the ‘multiple choices in time duration’ feature in Lueur.
Survey
We carried out surveys to understand how users deal with stress. And although our responses were less than 100 (37), we made some discoveries that inspired our solution which you can see in the image above. The possibility that more people are willing to discuss their mental health with their families inspired the community feature on our mobile solution.
Interviews and Empathy Map
From our survey, you can see that we were trying to find the most effective way to relieve the stress of our users. We took further steps to interview five users so as to better understand how they feel stressed, the circumstances that lead to the stress and how they attempt to relieve their stress. Then we synthesized their responses on the empathy map
Our results showed that the best way our interviewees relieved stress was sleeping. So we decided to help our users find their sleep.
Affinity Diagram
We also used the affinity diagram to synthesize the data we collected.
User Persona
After we had understood our users, we decided to build a user persona based on the composite behaviour, motivatons, pain points and lifestyle of our interviewees.
As you can see from the image our persona, Awa had a hard time balancing work, family, friends and hobbies so she has a hard time sleeping. And she would love to be put to sleep by a soothing voice, she would also love to choose the voice from a variety of other voices.
User Journey Map
For the user journey map, we imagined the process Awa would go through to try to sleep after a long day. Like our users from the interviews and survey, Awa doesn’t like how the meditation app had confusing interfaces. And also the lack of flexibility and control in them. Like how the voices in guided meditation apps are fixed.
We could see from the image that we envision Awa cleaning up after her family’s visit. Then she had difficulty sleeping due to the stress of her work’s big project. So she tries some meditation apps but their organization was poor and the voices in the apps were not relaxing. She also wasn’t pleased about the fact that there wasn’t more than one voice she can choose from in guided meditation.
Define
Now that we have tried to understand our users: their lifestyle, motivations, goals, needs, pain points and so on, we would attempt to define the problems that we want to solve for our users in this stage.
Job Stories
Although we were beginning to discover features that would make up our products we couldn’t just jump right into developing our solutions just yet. We needed to understand what our users need in terms of benefits and not features. We utilize job stories here because it helps turn our solution into a job that our users can hire to achieve their purposes.
From the image you can see that we hope our users can hire our solution when they feel anxious — our solution would stand as a socially acceptable one; when they need to use guided sleep mediations — our solutions would have options for voice settings; when they are at work and are stressed — our solutions would help them feel soothed.
Problem and Hypothesis Statements
Now we can define the problem we were trying to solve with our solution — Lueur (yeah, we named her too). The purpose of Lueur is to improve the sleeping habits of users as a means to manage their emotional health. We discovered most mediation apps are difficult to navigate and also don’t have flexible voice control systems. We hope to have Lueur solve these problems
We believe that if Lueur achieves this, our users — office and remote workers — would be able to access relaxation contents we have on Lueur easily and also improve their sleep. We made a prediction that our hypothesis is right if Lueur’s subscribers increase by 15%.
Ideate
Now that we have defined the problem, we would be gathering together all ideas we believe would solve the problem in this stage. We would be actively trying to solve the problem.
MOSCOW
We used the moscow method to collect all our prospective features which were created based on: how might we make Lueur more accessible to people; how might we help our users fall asleep after a session on Lueur; and how might we make Lueur’s interface accessible and friendly as compare to other meditative apps. Then we organized these features based on what must be on Lueur to help achieve our purpose, what should be there, what could be and what won’t be on it.
MVP Statement
And now we can have an mvp statement which defined the goal of Lueur as “make users feel good after a better night's sleep”. By introducing the flexible voice control system, our users can listen and complete a session using the voice they decide is the best which would lead to them falling asleep.
Sitemap
Now that Lueur is beginning to come to light, we visualized the hierarchical structures the screens of Lueur would take. Having a sitemap made organizing contents on Lueur easier.
You can see from the image that Lueur has three major pages which would make up Lueur’s primary navigation (spoiler: we decided to express it as a navigation bar).
Userflow
For the Userflow, we chose a happy path(optimal path) that our users would take while navigating through Lueur.
The user flow starts with asking Awa if she wants to set a goal. If she does she would move to the profile screen and set a goal. If she doesn’t, she would remain on the explore screen to find a story she wants to listen to. She decides the duration of the story and plays it. She also decides the narrator for this story. If she’s still awake she would have the option of listening to another story but if she isn’t the app would close by itself after the story is finished.
Concept Sketch
We had a sketch to quickly visualize the screens we have projected in the userflow.
Mid-Fi Wireframes
Then we turned our concept sketches into mid-fi wireframes to perform usability testing.
Usability Test Responses
We carry out a usability test because we wanted to find how usable and easy to learn Lueur is to our users.
We can see the results of the usability testing of the mid-fi wireframes in the image above. While most of our users had positive reviews we can also see that they wanted to see fewer whitespaces. There was also the suggestion of favourites and history features on the profile screen.
UI Design
This session deals with adding ‘flesh and organs’ to the mid-fi wireframe ‘skeleton’.
Visual Competitive Analysis
We carried out the visual competitive analysis (of Leur) which is simply to analyse the structures, colours, typography and components of apps that are similar to or can inspire Lueur. This is to help us understand what makes the app stand out.
The visual competitive analysis of calm and petit bambou led us to discover that most meditation apps used dark or cool colours and we assumed that the reason for this is because they strain the eyes less in the dark. This was also the reason why we chose a dark blue background colour for Lueur
Brand Attributes and Moodboard
For Lueur’s brand attributes, we wanted our users to be calm, comfy, rejuvenate and chill while using Lueur. We wanted Lueur to be friendly with our users. We also wanted our users to trust our app.
We wanted to check if people could resonate with our brand attributes and so we chose images that we believe would remind them of these attributes. We can find some of their responses to these images on the moodboard image above. We can see that these answers are synonymous with our brand attributes which shows that we are on the right track.
Style Guide: Typography, Components and Colours
The style guide shows the primary colours, font and basic components that made up Lueur. The primary colours are dark blues and gold — gold because sunlight since Lueur means light. The dark blue colours would help to strain the eyes less. The components and images also have the ‘chill, friendly’ feel. The font used for headings in the app was the boiling demo while the one used for paragraphs was the century gothic.
Hi-Fi Prototype
Now we have the whole app put together here:
Desirability Test
Finally, we have the desirability testing whose results we can see above. We had some complaints like the text was too small. But there were also some positives like they loved the playful and friendly vibe, and the mix of yellow and purple colors
Users and Audience
Our users as discussed in the UX section are office and remote workers.
Roles and Responsibilities
The project was done by Farah and me. We worked remotely by collaborating basically on Figma, google docs. We used Zoom and slack to interact.
Scope and Constraints
The only constraint for this project was the time constraint. We only had four weeks for the project.
Lessons and Next Steps
I learnt a lot from my creative partner, Farah. Farah drew the illustration used in our app. I’m so inspired and I want to learn the basics of drawing to be a better designer.
I learnt to analyze apps in order to discover the ‘why’ of the basic components that make up the app and utilise it in a similar app. Like how in our visual competitive analysis we analysed competitive apps for Lueur to discover that they all used dark backgrounds. And we realised that they used dark backgrounds because it reduces eye strain so we decided to do the same for Lueur.
The intensive synthesis of our survey helped us discover that people are more willing to talk about their mental health with their friends and family which inspired the community feature of our app.
Although our solution was simple — improving the sleep of our users — we are confident in its effectiveness. User Research encouraged our confidence in our solution being useful for our target users.
As a next step, we would love to test our hypothesis statement to confirm that we accurately solved a problem (reduce the stress) for our users.
