K-Rauta

eCommerce

K-Rauta

K-Rauta is a chain of DIY and home improvement stores belonging to Kesko, the second biggest retailer in Europe. K-Rauta is the market leader in the building and home improvement trade, and according to surveys, the most trusted building and home improvement store chain in Finland. The building and technical trade division operate in seven countries: Finland, Sweden, Norway, Estonia, Latvia, Lithuania, and Poland, with a total of some 500 stores. Kesko hires over 22,000 people around the world.


My role

I'm a Lead Product Designer in K-Rauta responsible for User Experience Design, Customer Experience Design, and User Interface Design. My job is to research, find, design, and prototype new and better design solutions for desktops and mobile devices. I create, update and improve Design Systems from atoms to fundamental components. I work with a large group of developers, testers, product owners, marketing and business representatives.


Challenges

Working online with a huge team

Working online with a huge team

The biggest and most important challenge in such a vast project is working online with many people from a few departments. We use Jira for task management and Microsoft Teams for everyday communication. We have dailies split into groups responsible for different parts of the project and team meetings if we have to discuss something. Everything is very well organized. Sometimes I have a lot of time pressure, but I deliver on time, whatever is necessary.

Mobile navigation with categories

Mobile navigation with categories
Mobile navigation with categories
Mobile navigation with categories

Old mobile navigation was cluttered and not intuitive. The goal was to design multi-level navigation for mobiles, including shopping categories and subcategories.

I decided to design the navigation as sliding drawers with a back button on top. I used icons in the main navigation. Thanks to that, it was much more intuitive and easy to use, and the user could find everything much faster without getting confused.

Sorting and filtering improvements

Sorting and filtering improvements
Sorting and filtering improvements
Sorting and filtering improvements

This improvement was significant for the users on mobiles and desktops. Product listing was an infinite scroll, but pagination with several products per page was a much better solution, especially for a massive number of products in each category.

There is no sidebar on mobile devices, so I've put the sorting and filtering on mobiles are constantly visible on top, so it's more intuitive, and users don't have to scroll back to the top to filter products. Active filters are displayed as tags on top of the page, and users can remove them with one click.

Paint tinting

Paint tinting
Paint tinting
Paint tinting

When the user buys a bucket of paint, he can see the color tinting button on the product details page. After clicking the button, a modal window opens, and the user can fill up the color code field or choose one of the colors from the palette. Color palettes are categorized.

After adding color to the base paint, the user can add it all to the shopping cart with one click. In the shopping cart, he can see the color tinting as a separate service with the price. He can change it or delete it from the cart at any time.

Deck planner

Deck planner
Deck planner
Deck planner

Buying materials for building a terrace is complex, especially if you're not a professional. This tool has been created mainly for house owners, but experienced carpenters also use it a lot.

The user can easily order all necessary materials to build a terrace just with a few clicks. After choosing terrace shape and size, he can select a surface wood type and support type. After that, it generates a list of items, and he can order them. He can replace items at any step, even from the summary screen.

The biggest challenge in this initiative was to design everything so users could easily understand, so everything had to be clear and intuitive.

Consumption calculator

Consumption calculator
Consumption calculator
Consumption calculator

Have you ever wondered how much paint do you need for your room? Or how many wallpaper rolls? Or how many tiles are for your bathroom? We designed and developed this tool to calculate it for you. The user can add a surface, fill up a few dimensions and even deduct doors and windows or other holes. The tool calculates the amount of material needed, and the user can add it to the basket with one click.

New checkout

New checkout
New checkout
New checkout

Users can choose between picking up products from a store and home delivery. Product availability in stores and home delivery methods depend on the user's location. Not all home delivery methods are available in all areas. That's why the user has to start with inserting a zip code or city name.

Store selector

Store selector
Store selector
Store selector

The user can choose his closest store. The list of stores is displayed alphabetically, but after the user fills up the zip code field, the list of stores is sortable by the distance to the user. After choosing his store, the website shows products available online and in the selected store.

My Pages

My Pages
My Pages
My Pages

After logging in, the user can see the dashboard with the latest orders, deliveries, and points on the loyalty card. The list of orders page shows all orders, and the user can filter them by a few parameters. The list of deliveries shows delivery status. On the profile page, users can change their contact details and manage delivery addresses.

Product ratings

Product ratings
Product ratings
Product ratings

Each product has an average star rating of 1 to 5. On the product details page, users can see star ratings and other buyer opinions. Rating summary shows how many users rated this per each note. If the logged-in user bought this product, he could leave his rating and opinion. Users can vote if a comment was helpful or now by clicking thumb up and down icons.


Workflow

Workshop in Helsinki

My first assignment in this project was the trip to Helsinki to meet a few team members in person. We organized two days workshop to learn about K-Rauta customers' needs. I started with quick sketches on big sheets of paper. We've discussed user flows and journeys tested our ideas and assumptions, and gathered feedback from other team members. I made changes to the sketches, and we tried it again until we were happy with the result.

Move it all to Sketch

After I came back home from Helsinki, I've recreated the sketches as wireframes on a computer. I presented it to the team, we've done more tests, gathered more feedbacks, and tested it again.

When business owners have approved all wireframes, I've done high fidelity designs in Sketch and clickable prototypes in InVision. While working on the designs at the same time, I was building the initial design system. I hand it off to developers also using the InVision app.

Remote work

Following initiatives, ideas, and improvements we discussed online, there was no need to fly to Finland every time. While working on the subsequent designs, I improved the design system and updated it with new components.

Big migration to Figma

After a year, I moved the whole project to Figma. I improved the design system, and I updated all components with Figma's most significant and most helpful feature auto-layout, wherever it was possible. I also didn't have to use InVision anymore for developers' handoff because the design inspector is inbuilt in Figma. This decision helped me a lot to speed up the design process in the following tasks.

Quarter PI plannings

Every three months, we have a PI Planning, a huge event, with teams participating from 4 countries - Finland, Sweden, Norway, and Poland. We used to fly to Helsinki for this occasion. It was always great to see everybody face to face and have a few beers together, but since the Covid restrictions, we do it online.


Deliveries

  • Sketches on paper
  • Competitive analysis
  • Wireframes
  • High fidelity mockups
  • Interactive prototypes
  • Design systems
  • Typography
  • Color palette
  • Information architecture