Makro

UX Design

Makro Webshop

The wholesale world is changing rapidly. And Makro changes with it! Makro is one of the biggest wholesale markets for the B2B section of the Netherlands.

With a small team we created a new webshop for Makro. My role on this team was mainly UX Designer, but consulting with the client and challenging the team was also a big part of my contribution.

Role

Lead UX Designer / UX Consultant

Deliverables

Design Thinking, Ideation sessions, Concept Creation, High fidelity designs, Interactive prototypes, writing Acceptance Criteria, Design QA’s

Year

2021

The project & me

This continues project is a follow-up from the MVP we have build in 2020. The approach we took was a data driven decision making process. Looking at the data from the MVP build, setting priorities, iterating, launching and back to the data again.

I started designs with knowledge metric level. What do we see on this particular page? Why do we think this is happening and how can we solve it? Based on key metrics I began designing with the right persona next to me and since the market for Makro is B2B, in a fairly unique way (a Makro-pas is required to buy at Makro), I have redesigned molecules, atoms and components.

Yes, I have started to create a Design System in Figma for this project.

Deliverables

During this project, I have created various mockups, written Jira tickets, created multiple high fidelity designs and several prototypes. Aside this I have created a small Design System to work with, used an agile way of working, consulted during client meetings and helped prioritise based on data.

The process

Review data

In Google Analytics we (as a team) started look into the data. Where do we see opportunities to improve the webshop with a big impact? After this meeting, we had a clear list of things we could improve.

Prioritise areas of improvement

Now we have a list of ideas to improve the webshop, but where should be start? We estimated each topic with a simple Impact X Effort X Potential method. This way we could prioritise the list in a logical order. Along with the strategy consultants and other stakeholders we discussed this list.

Analysis phase

What do we see in data?

So the priority has been set. Now it’s a question on what actually happens on the page itself. We looked at data and user behaviour through tools such as Google Analytics, Hotjar and quick user tests. Together with these insights and a goal on which metric should improved, the design process has begun.

Design with goals

Many pages were redesigned with this approach, and for each page we had a set of goals/metrics which we wanted to improve. I will list some examples to give you an idea.

Refinement phase

Meetings & Criteria

After showcasing the designs with the development team and the client, we agreed or refined the designs. Once settled, I started, together with a Business Analyst, to work on the Acceptance Criteria in the Jira Tickets.

To development

Support & QA

Once the tickets and designs are ready, I quickly huddle with the developers to go over the fine details of the design. After that has been done, the devs go do their magic. In case of any questions, I help them as much as possible.

At the end, I perform a design QA on the test environment to ensure everything works as supposed to be.

Check out some prototypes ๐Ÿ™‚

Tools/processes used in this project

Google Analytics
To capture behaviour in data

Figma
To create designs & Design system

Figma
To prototype designs

Jira
To write Acceptance Criteria

Design QA’s
To ensure development is pixel perfect

Sessions
To ideate, brainstorm, map-out flows