Research & redesign of an omnichannel sales tool — UX/UI case study

Miro Kirov
Jan 28, 2019 · 5 min read

About

The client has a massive chain of consumer goods stores all across the UK. One of their core strengths is the full-circle of the services they provide. They succeed to do so, by closing the loop between buying consumer goods and offering broadband & TV packages in-stores.

The Problem

They had more than 40k employees, a big part of which are working as sales consultants in the physical stores. They use a sales tool, a hybrid app, to pitch deals (or “packages”) to customers and sign them up on the spot. They approached us with a request to rethink how this tool works.

The Team

On this project, I was working with a well-versed team consisting of designers, developers, and project managers.

Process

Our plan for success was divided into three stages:

▲ Research

In the research phase, we tried to understand the product, clarify initial assumptions, uncover user pain-points and insights.

🎙 Stakeholders Interviews

We started the process by aligning our mutual goals for the future vision of the product with the stakeholders. We conducted five interviews with all the primary stakeholders, which gave us the main goal for the project from their perspective. To summarize their perspective into one sentence, our goal was to:

📚 Desk Research

We continued our learnings by doing desk research and end-to-end product audit, which confirmed our thesis that the customers see the interaction with salespeople as slow, non-personalized and opaque.

🔬 Qualitative User Research

User interviews & Field studies helped us learn that colleagues were not sure what their commissions are, which resulted in a lack of motivation to sell higher-priced packages. Another issue was that salespeople were transitioning from a tablet to desktop to close the deal because it’s easier to fill the form.

🦹🏻‍♂️ Mystery Shopping. We went undercover, around the stores and introduced ourselves as recently relocated to London, in a need of a mobile service.
Our observations showed us that a lot of the colleagues had a lack of understanding of the app.

📈 Quantitative User Research

Surveys & Google Analytics data gave us great insights like price and speed being the most important factors in a deal search. We also learned that people who had already made a switch from one provider to another are more prone to doing it again.

◉ Interpret

Condensing the research with empathy for the user, understanding the problem and discussing potential solutions.

💭 Design Thinking Workshop

Getting all the stakeholders in the same room for a 3-day workshop was a great way to empathize with the users and interpret our research findings.

During these sessions, we created Personas, Empathy Maps, User Journeys, Problem Statements and brainstormed on ideas for the solution.

👤 Personas

Personas are all about forging an alignment on user behaviors, needs, and goals in a concise way, based on research data. We created 3 main personas:

📌 Problem Statements / Solution goals

Next step in our process was reframing the pain-points of the different users into statements for our future tool:

I. Educate and Support

Hand-holding the non-qualified colleagues through their journey with the customer.

II. Stimulate Efficiency

Reward and encourage high-achievers, resulting in maximum commission. Make it hassle-free to up-sell, cross-sell without losing time to navigate.

III. Recommendation Transparency

Making the process and results transparent for customers by clearly stating all the different pros and cons between deals.

◆ Solve

In this phase I focused on visualizing the solutions in a way that they can be validated as well as refined early and often.

🗺 Information Architecture & Flows

We created a mix of a sitemap and flows for the app, outlining key features.

✍️ Wireframe & Prototype

Our next step was wireframing and evaluating the solutions. High-fidelity prototypes were created to demonstrate micro-interactions. Below I’ve listed the three main features we created:

Deal Hints
After the customer adds his information a list of results is populated. We came up with a way to clarify why these are the best deals for his needs, which in return educates both the salesperson and the customer. The hints were customized based on his input.

This feature helped towards our Educate & Support goal.

Quick Cross-sell
The in-line cross-sell pop-up activates as soon as you add a deal, which gives the colleagues an option to build a better commission on the spot.

This feature helped us Stimulate Efficiency in salespeople.

Simple Compare
Simple compare gavethe customer a transparent overview of the deals and how they compare to each other. It’s easy to initiate and navigate directly from the results view.

Recommendation Transparency is what we tackled with this feature.

Visual Design + Features

My involvement in this project was focused on the discovery phase, but I also did a design concept to help set the future visual style.

Conclusion

Research was key for this project’s success and by applying different methods we managed to get a wide range of customer perspectives, which resulted in personalized features. Although the project was a flourishing, we faced extensive challenges trying to strip down unnecessary information, while focusing on high-potential solutions without sacrificing the user needs.

Crafted with ❣️ in London, UK © 2020 Made by Miro

Design + Sketch

The best collection of articles, tips, tutorials, and…

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Miro Kirov

Written by

Lead UX Designer. Ex @atlassian @softserveinc @despark . Jury Member @cssdesignawards @HorizonAwards @vegaawards . Design thinker. Dad.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond