UX research, wireframing, UI design
Designing an improved buyer experience for MediaMarkt customers
This project for MediaMarkt was one of my first big client projects while I was working at Let’s Talk. The client needed a new and improved application that allowed salespeople to advise customers. In this way, the customer could get a new mobile phone and subscription. This included possible up-sells, like internet and tv subscriptions.
Early notes from an intake with the MM team.
I worked on the initial inquiry, UX research, wireframes, and visual designs together with the MediaMarkt team. Later on, I delivered the project to my front-end dev colleagues. The process began with an intake with MediaMarkt managers to get a clear idea of their wishes and visiting a store to find opportunities.
This resulted in a customer journey map and several possible opportunities.
The challenges that were derived from these activities include:
– improving the ui qualities: the old UI was inconsistent and had small click-targets. This made it harder to use and didn’t give the right impression. After reviewing the MediaMarkt brand guidelines, I found several challenges for UI improvements.
– giving appropriate information for both customer and employee: this tablet app is special in the sense that it is used by two people at once. The employee and the customer. These people have different possible experience levels. A newly hired employee should be able to give the right advice, same as an experienced employee. Additionally, a customer should be able to easily compare prices and specs at a glance.
– being able to use a checkout in the app: in the customer journey and intake, we learned about the gap between closing a deal verbally vs going to the cashier counter. This left opportunity for new features.
– designing a future-proof structure: keeping in mind the growth of this e-commerce tool, I was asked by stakeholders to come up with a UI structure that could accommodate growth. This was because it would be useful to see what prospects need to call after leaving their contact info in the store.
A new user flow was created after a concept phase.
User flows created for the new design.
After creating customer journey maps and writing user stories, we landed on wireframes.
Wireframe for the tablet app
These were then made into visual designs after review by the MediaMarkt team. You can review the invision prototype here for closer inspection.
– I worked with a design system to create a consistent and on-brand UI for MediaMarkt. Additionally, we tested the click targets to optimize their size and shape, while still conforming to brand guidelines.
– In the user flow, we took into account that the text should be clearly legible to two users next to each other. The image size was also changed to accommodate this. To make it easy to compare for customers, we built functionalities to visually compare phones and specs. As a checkout screen, we made a visual summary of everything selected by the client.
– To accommodate future growth, I recommended MediaMarkt opt for a main screen structure with quicklinks, and a sidebar with icons clearly indicating what step in the process you’re in. These structures are easy to keep building upon. The tool did end up including several new screens. The new functionality involved being able to follow up to prospects by calling them and seeing what bundles they explored. This functionality was easily built within the quick link home screen.
This was the project where I really fell in love with what UX can do. The close collaboration with the client and end-user helped shape the design greatly. A personal struggle in this project was maintaining UX standards and controlling the quality of the design, after the release. This happened because of unforeseen changes and additional wishes. Though challenging, I really enjoyed experiencing first-hand what design ownership means and involves. On many levels, the project was rewarding: a happy client, a system that is used throughout the Netherlands and is still being improved, and interesting sessions with stakeholders.
Impression of a screen UI design