Case study part 2: IA & UI
NOTE: If you haven’t read the first part (UX Research) of this product, I recommend you to do it first!
After finish the UX research of this project, we have to make it visual! Let’s see the steps to achieve it.
Visual competitive analysis
A benchmark is always a good way to start, so we studied all my possible competitors: diets and pregnancy apps.
We’ve listed fonts, colors, brand attributes, pictures, shapes… everything we thought it could be useful.
Creating a brand
Well, I’m not an expert on branding, so I decided to apply the same concept we did in UX research: Ask people about my app and listen them.
I asked people about the attributes they think when we speak about my product. So I’ve prepared a list of possible attributes and product names, so we decided to ask for their favourites (they could add new ones).
The winners attributes were: Healthy (saludable), Customized (personalizado) and Reliable (fiable). I’ve added one more: Professional. That’s because I would like to enphatize it because we are supported by professional nutritionists.
For the brand name our first approach was Pregnanceat, but finally won Kekomo.
As a product made for pregnant and moms, we need to transmit those brand attributes based in shapes, textures, photography…that fit with them. We need to transmit attributes like calm, health, relax, smooth, etc.
In our visual competitive analysis and our moodboard we got some patterns: green as main color, pink and orange are always used for healthy food and diet apps. In pregnancy apps the most common colors are blue as main color, green and pink.
After read about psichology, green was what we need to : Harmony, balance, refreshment, rest, helth-giving, environmental awareness, equilibrium, peace. That’s why we’ve choosen it the primary color.
At the beginning we’ve choosen a monochromatic palette of green colors, but later when designing hi-fi wireframes we realized that we need to highlight some things, so we decided to add a new color as secondary: a relaxed pink, because it transmit caring, femminity, calmness…
Icons, shadows, shapes… Style tile time!
What about a small sample of all elements combined? Here is the final style tile with all elements used like colors, text, shapes, icons, illustration…
But wait! This is not an easy path and this is an iterative process trying to find the best solution validating with users.
Here you can see some of that work, where low-fi wireframes are compared to hi-fi wireframes and you can see the interfaces and elements evolution from the very first stages to the final visual design.
And for the final act….here you can see how the app works and some of the interactions!
Please, I invite you to tell me if you liked the product, what things you don’t, what you would change or any other comments. Feedback is always welcome… like claps are! 😉