Type
Mobile App
ROLE
Design Lead
EXPERTISE
UX/UI Design
Industry
Health & Wellness
Сlient, a well-known hindu priest, public speaker, a monk. The main challenge was a complete rebranding of his personal brand Dandapani llc. The basic objective of the redesign was to completely redefine the user interaction with the app
Background
The dandapani app was created back in 2015 and since then, there have been no changes and improvements to the user-product interaction.
Problem
Poor and unclear navigation, difficult access to basic functions, unmemorable brand visuals.
Timeline
From explorations to final designs in 6 months.
Research and define problems
Mr Dandapani is very reverent about his product and his personal brand, so we looked very carefully at all aspects of our future work together.
Task
Explore the problems in the application
Find the best approaches to implement new features
Completely redesign the brand
Research
We started with a brief and a UX Audit. There were more problems than we expected…
The presentation is very long to post here
But you can watch the full version via the link
View full Presentation
Competitor analysis
After the audit and discussing all the details with the client, we proceeded to analyse the competitors.
Task
Conduct a study of the functionality and solutions of direct and secondary competitors, compare the quality of implementation of functions, identify the best solutions, identify features that are important and useful to us.
If you have the time...
View full Presentation
Information Architecture
Having finished with the audit and competitor analysis, we made a list of functionality and a prioritization board, and started a complete restructuring of the navigation and creation of the product's information architecture
Task
Design an information architecture that will holistically represent the work of the product and interactions.
Wireframes
A long, excellent, creative design process following the double diamond approach. Step by step, screen by screen, flow by flow, test by test, and we were able to get one of the best audience navigations in my opinion.
Task
Develop full bunch of wireframes, make a usability test, improve design based on test results.
After Wireframes done, we started most creative stage
the Concept
Emotion and archetype
Idea
Idea of the visual design one of the important things in building a brand. We used unique approach for creating idea for visual design called Metaphor.
Metaphor it is extremely powerful visual tool, is an unexpected comparison of two dissimilar objects.
For example, a brand design for a sports car, the metaphor could be a cheetah because it is the fastest animal on the planet.
People who come to our app are not looking to abstract motivational quotations that are hard to apply in real life. No. They are coming to us in order to find step-by-step instructions and applicable knowledge they will use the second they read it.
The design will look clean, structured and easy to navigate, as all manuals are.
We will highlight the realistic and practical aspect of Dandapani’s teachings with design elements, inspired by manual designs.
References
Main graphic hook
Mandala as a symbol of happy life
Our app is going to explain how to create “happy life” — and this happy life is going to be symbolized by a mandala that is going to be created as the use scrolls down the website.
Mandalas may be used for focusing attention or as a guidance tool for practices. It’s exactly what Dandapani teaches — he guides people to learn the power of focusing and concentration. So in our website we’re going to create such a symbol while scrolling down.
Each section is going to add some element to mandala, resulting in a full mandala as we approach the end on the website.
Composition
Type of composition:
Mixed composition with elements of symmetry and asymmetry, creates a dynamic and harmonious design.
Density:
A loose composition with enough space between the elements to provide a clean and airy interface.
Balance:
A more balanced composition that makes it easy to use and easy to understand.
Typography
Fonts: Roslindale and Inter (as on the website)
For the headings and buttons, we will use a serif font to place the necessary emphasis. We will use Inter font as the main font for the body text. This combination is good-looking on the mobile application too.
Colors
The main color of the application is beige, red will be used for accents and some screens.
UI Design
UI Kit
I decided not to use a complex design system for the app but just a UI kit that covered all the available upgrades and improvements with a reserve
Click to learn more
UI Kit preview
Summary
Audience satisfaction increased by 64% over the previous design. After surveying users, 6 out of 10 were delighted with the new design and approach, with the remaining approximately 40% calling the design acceptable
280+
Mobile screens
2200+
Working hours
+60%
User satisfaction