Case Study: Happiness AI app. How to create one of a kind design that brings happiness
Back in April, I was on a self-discovery adventure in Nepal hiking, drinking masala tea, and sketching nature. Little did I know it all turned out into 3 weeks of a “got stranded” state though it’s a completely different story. What was an interesting coincidence is that while I was on my personal “find a right way in life” path next to the magnificent Himalayas, I got a letter. And it really found me well.
It mentioned an opportunity to create “a technology that will help people reach their highest potential and happiness in life” while “happy and colorful vibes” are a must-go thing. That sounds exactly like my kind of job.
Task
To update the visual design of the existing app with the new branding and work further on the MVP version of the product.
The mission of the app
To advance human happiness
Key factors to remember
- The main target audience is Gen Z;
- The unique design (both visual and UX) is really a crucial element of the app;
- Openness to be able to create multiple concepts is much appreciated.
Step #1. Discuss a present-day state of the app
My client already had an existing Happiness AI app on the market and first of all, I explored and analyzed the way it worked. Before our first call these are the issues I’ve noticed:
- overfilled onboarding screens — too many elements on one page which needs to be further divided into smaller and simpler steps;
- the low contrast of white text on the yellow background;
- the main screen feels empty while there are two equally bright CTAs;
- the feedback emojis’ inactive state confuses because of desaturation.
Also, I’ve noticed too strong shadows and a side menu which potentially could turn into bottom navigation.
Step #2. Bring a new visual style and update the UX of onboarding
I call myself a full-time color ambassador as you can see on my Dribbble page but when it comes to the first steps in the new project, sometimes I do prefer to start with a moderate approach. This way it helps me to understand the client’s preferences better — test the waters. Whether it’s enough level of brightness or it can be even more colorful or bright?
That’s why at first, I chose a pastel color palette. Based on the existing gradient I’ve made the colors cleaner and slightly brighter. Following the first gradient, the next screens got a smaller color gradation focusing more on the elements.
The onboarding flow was divided into:
- Splash screen;
- Add your name;
- Level #1 What makes you happy?—the choice of the interests;
- Level #2 The choice of categories in few interests.
This way each time we ask a user to make a simple choice—just a few clicks for each page instead of choosing altogether on one page with a chance of not checking all the items at all.
The idea was also to create a color code where each interest has its’ own color—Purple for Arts, Green for Lifestyle, Pink for Love, and so on. It all followed with the icons for each chapter which in the further updates, will become even more simplified and minimalistic.
What was the feedback?
“Great! But how about more bright colors?”
Step #3. Moving into a brighter version
Adding more contrast the flow also got the change. It was decided to focus on 5 main interests: Health, Lifestyle, Social, Intelligence, and Purpose. Thus, we don’t need a screen with the choice of interests anymore.
While it was added a hint for a user to swipe the list of categories in each interest page, the category itself wasn’t distinctive enough. The solution?
The full-body unique gradient for each interest.
Yes, that was definitely a turning point in the design process! From now on, we started to explore how to combine the interests’ gradients with other screens of the app.
Further, we made it even brighter. But first, let’s take a look at the details.
Happiness in the details
1. Interests icons
The idea was to create minimalistic icons that won’t take too much attention while at the same time, will add to the distinction of each interest.
Each icon consists of the circle as the main basic element. Looking more precisely at the row of these icons you can notice how each of them has a different number of elements, from 2—circle and a heart for Health, to 6+ for Intelligence.
Here’s how the first concept with more standard icons looks like compared to the current design:
2. “How do I feel” icons
Asking for the feedback we’re asking to get the user’s emotion. We’re used to stars as a common icon in such cases but what if we combine them with expressions of emotions?
Once again, the power of color is limitless. Being placed on the solid white area we can clearly distinguish a certain emotion not only by the order they’re placed but with the help of the color too.
3. CTAs active states
Here, the first state is the page with Today’s Happiness AI idea and the following options “where to start” and “share”. Such a page can have a different background gradient depending on the interest category and thus, the best way to emphasize CTA buttons is to make them white. But how about the active pressed state?
Here we came up with the solution to darken the whole page focusing specifically on this action. And, voilà! We got a chance to bring more gradients, the one with cold colors gradation for “earn more” and the one with warm colors for “take action”. Icons there add into a quicker “reading” of the area.
4. Font style
The two main fonts are Raleway and Backslash—a rounded friendly sans-serif for the main text vs. an elegant serif for numbers to bring an emphasis.
After a few tests, we’ve come up with the solution to use lowercase letters only. It’s not a big secret that most of us are used to typing in lowercase. It’s quicker and easier indeed. Also, that’s the most common way to use for Gen Z, the main target audience of the Happiness AI app.
Lowercase is also about simplicity in a conversation, more honest and casual way and this is exactly what we want the app to sound like.
The core functionality
Currently, the core functionality you can see in the existing app is focused on such things like:
- receive daily happy quotes;
- create your own happy ideas with the plan of actions;
- specify “what makes me happy?” to help AI technology be more precise to your lifestyle.
We’re working on more chapters of the app that will be included soon. The future updates will have some fun and entertaining functionality as well as more ways to keep your happy and life moments in one place.
When it comes to navigation, the idea is to have intuitive transitions and flows, and thus, some chapters aren’t shown all the time but hide after a few seconds. Other parts are reached with a simple swipe.
Brand positioning on the market
Branding
Simplicity is a key and so is the app icon—the first element you see. The main idea was to have it as simple as possible and in the end, it consists of the main full gradient and a circle. Thy symbol of sunrise and the colors of the sky.
What also helps you to get an impression before installing the app are the screenshots. Short description followed with the actual screens. As we also want to bring the right impression about Happiness AI as a bright and unique app, it was decided to add even more gradients to the screenshots.
What are the ways to make a unique app? Check Dare to Be a Bright Brand article to find the answers.
Currently, the main audience of the app is early adopters—people who instantly catch the vibe. While there’s still a lot to be developed to bring the full idea they already can see the potential. Also, they’re capable to share feedback, a much-needed answer from your audience on any stage of the app’s development.
Conclusion
In the following case study, I presented the up-to-date version of the app and certain milestones which were passed. While I’m extremely pleased with the overall idea of the app—advance human happiness—I also enjoy the compelling work process where I, as a designer, am often challenged to find more variations and to look from a different angle.
I like how thanks to this approach the app feels alive and evolving, the thing that doesn’t happen often when you’re working on a more classic work process where the fresh ideas aren’t appreciated at all.
Once while I was looking for happiness in the Himalayas, I found a project with a mission that expands horizons of happiness not only for me but for a hundred thousand people in the whole world too. That’s a really exciting journey.
I will keep you updated with the future app versions in the next articles.
Be happy!
You might also like:
