The award-winner app (Grand One 2017), has been around since 2015. As Kesko grows and expands its business, there was a need to redesign it to keep visually align with the new brand guidelines.

I joined the project in 2018 as a Senior UI/UX designer to be part of the team that will make the biggest visual change since its release. The main goal was to change the home screen and later the rest.

Competitive Study

I started researching the competitors (direct and indirect) to see what they have been doing. I also wanted to know the preferences of the client in terms of theme and style. Here are some examples:

Audit the app

I looked into the current app content and tried to find out the primary components. I ranked from the most relevant to less, based on the home screen design. I was trying to find if there was a need to change the information architecture based on user needs.

Also, the client said that most users are more interested in personal offers and recipes.

1
The header navigation takes too much space, and sometimes the information is irrelevant to the user.
2
Shows your preferred store, which you can’t change. So if you buy in a different store, the information is irrelevant to the user.
3
The home menu is located right in the middle and it’s activated. The most relevant menus such as offers and recipes are located in a random position.
4
The navigation is confusing, the hidden items are easy to skip. Not all users are familiar to the swipe navigation, it also varies from iOS to Android.
5
There is no action point for this information, takes a lot of steps to find this info in the app.

Information Architecture

Now that I got to understand a little better the content structure, I tried to design something familiar with a better organization based on the relevance of the content.

My goal here is to get people’s attention to the relevant components at first glance. Also, make sure that the content in the header navigation is more clear and easy to the eye.

An important observation was the home screen design would dictate the look and feel throughout the app. So I had to keep this in mind.

1
Header navigation now takes less space, and it is separated from the personal store component. Also, the bullet navigation shows the number of hidden items.
2
I added a section for your favorite stores, which you can change and add more with only 2 steps. Also, it shows relevant information such as open hours.
3
Dividing the design into sections opens the possibility to add more content such as recipes and offers.
4
The navigation now reads from left to right, and the order is based on the most relevant menus.

Mockups & Clickable prototype

I worked on the design for a week, I came up with a few variations, basically trying to reorganize the components. After that, we did a round of user interviews with a clickable prototype.

We want to make sure the user will still find the relevant components, and how they react to the new look and feel. The feedback was very positive, which gave us the green light to move forward.

Learns and key takeaways

After the round of user interviews, getting the designs approved was quick. And the team soon started the development. All the designs were made in Sketch, and for the deliverables, I used Zepling.

Also, I had a chat with one of our developers to help me understand the technology behind the app and its APIs. This was essential to the design process since the changes were going to affect the iOS and Android versions.

K-Ruoka Mobile is an ongoing project, and a lot has been done since my arrival. We released the redesigned version later in 2018, and the user feedback was very positive.

Here is a short video that I created: