Case study part 2: IA & 

NOTE: If you haven’t read the first part (UX Research) of this product, I recommend you to do it first!

After finish the research of this project, we have to make it visual! Let’s see the steps to achieve it.

Kekomo mockup

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.

Some details from the competitors.

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 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).

Left: Brand attributes. / Right: Product names.

The winners attributes were: (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.

Moodboard

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.

Colors

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.

Left: Colors from the moodboard. Right: First color palette attempt.

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…

Fonts

As a product made for pregnant and moms, we tried to find smooth and curvy fonts. After a lot of test, we’ve chosen Baloo and Rubik combination. This is an example:

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…

Final Style Tile

Design evolution

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.

Low-fi vs High-fi wireframes comparison

And for the final act….here you can see how the app works and some of the interactions!

Kekomo app sample

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! 😉



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here