Designing CRM360° for Conrad Electronic — a UX Case Study


Prologue: A plea for the problem space!
When teams properly integrate approaches from Human Centered Design, the importance of understanding the problem space normally doesn’t need to be addressed anymore. Foundational research doesn’t get thrown under the bus for the sake of faster (but flawed) design deliveries. And directional research like usability testing is a natural part of evaluating hypotheses before fully integrating stories into dev sprints.
When dealing with new and UX-wise less experienced organisations, things can turn out differently at times. Luckily with Conrad and project CRM360° we were welcomed with open arms and open minds, which gave us the opportunity to fully experience the power of research and its influence on product decisions later on. This case study shall give you a brief look into a 2+ year time period of research, strategy and design for a custom made CRM system used by Conrad employees.

This is how it started. At the end of 2016 Conrad Electronic (CE) approached Codecentric AG, one of Germany’s leading Agile Software Development firms, to help them build a tailor-made CRM system that should provide a 360° view on Conrad’s business and private customers.

Main challenges:

  • Lots of data, widely spread throughout silos across organisations and therefore hard to access
  • A broad, clustered toolset already in use, but no consolidated solution, a pain mostly felt by colleagues in Customer Care
  • Complex processes and organisational exceptions through countless touchpoint, digital and non-digital

What was my job?

I entered this project in January 2017 as the leading UX Consultant, on behalf of UX&I (a subsidiary of Codecentric) specialised in Product Strategy, Design and UX. My role was to apply Human Centered Design methods to a project with immense technical focus and to provide valuable insights from user research to help build a solution that would take into account the complexity of everyday business cases and real user needs. Ben Regali and Johanna Guggenberger joined the UX team throughout the whole journey.

Human Centered Design according to DIN ISO 9241 — 210

Who is Conrad Electronic?

Conrad Electronic is a leading retailer of specialist and everyday electronics based in Germany and active in many other European countries. With more than 750.000 articles for private customers and more than 1,4 million articles for business clients, CE serves not only multimedia lovers, hobbyists and the DIY obsessed but also B2B clients of any size.


Early questions about users

  • Who is going to use CRM360°?
  • Why, what for and how will they use it?
  • What will be the context of usage?
This is what we wanted to know!

In daily team discussions it was tempting to simplify the recipient of our solution as “the user” or as “Customer Care person”, which denies the fact that there is a vast variety of people working for Conrad in the context of a customer related activity. In fact we are dealing with a diversity of people, needs, goals and constraints, therefore we needed to take a deep dive into the realities of everyday Customer Care work inside CE.

Methods

  • Contextual Inquiries & Interviews with people needing to access customer informations and business documents
  • Interviews with business stakeholders
  • Find behaviour patterns as a possible starting point for personas (by A. Cooper)

Basically we cleared our mind from any pre-assumptions and went to the field in explorer mode. All we knew is, we wanted to understand the domain of Customer Care in Conrad by revealing layer by layer from basic activity levels to work environment up to general motives, like why is someone working in CC at all.

Observing users in Contextual Inquiries

First Takeaways

  • Observation & Interviews of 20+ people at their workplace
  • After asking “Why” and “Who else” multiple times, we were able to detect formerly unaddressed user groups
  • The perspective users need to have on clients and related documents vastly differ depending on each individual role (multiple personas)

For example working in Customer Care means having to quickly find client related documents like invoices while listening to a potentially angry customer with a bad telephone line. In the sales department on the other hand you are dealing with more serious business clients, phone calls can be planned and prepared for and your main focus is understanding a client’s performance and possible sales leads.

Behaviour patterns

6 of 30 behaviour scales we found in the first round

We mapped the qualitative data from our field trips to around 30 behaviour scales and tried to find patterns that pointed in the direction of personas.

Some insights from this approach were:
  • collaboration with colleagues is highly relevant for all user groups
  • onboarding for new employees takes way too long
  • users deal with a huge amount of different interaction patterns
  • certain employees deal with a considerable amount of stress while interacting with software and clients at the same time
  • forcing a sudden tool-switch could lead to a loss of self-confidence and a lower felt competence with some colleagues
There cannot be one tool to rule them all
The tools and tasks for customer care related activities are too diverse to be met with one single solution. CRM360° needs to take all those varying roles into account while maintaining an interconnected vision of multiple services under the roof of CRM360° and preventing formerly established data silos to come up again.

How could we help users?

Potential benefits found out during research:
  • Strengthen employees’ competence and sovereignty when directly interacting with customers
  • Enable an efficient and effective service interaction that lets customers experience Conrad as a competent and reliable brand
  • Support customer analysis and alarming systems to be able to provide clever and sustainable sales solution.

What should we build?

Teams were split up to concentrate on solutions, that were custom made for each user group but with a reasonable degree of interconnections:

CSF: 360° Search for Customer Care

A tool for helping Customer Care colleagues to quickly find clients, business documents or other artefacts while eg directly interacting with customers on the phone

SAT: Client and Business Analytics for Sales

This solution creates ways of supporting the sales department in understanding B2B clients’ numbers, growth and undiscovered potentials, while setting trigger points for sales activities or alarms.

My Account: Self help for customers

Give customers themselves control and transparency over their own informations and business documents


Though being a part of multiple teams, I will in the following focus on the approach we took for SAT, the solution for the sales department.


How we built the Sales Analytics Tool (SAT)

This was our approach to building SAT

Research

Like we did in our earlier exploration phase, we took a deep dive specifically into Conrad sales by using the following methods:

  • Shadowing (just observe a day in the life, minimal intrusive)
  • Contextual inquiries (observe & interview)
  • Stakeholder interviews (to get the full picture)

Defining the Problem Space

For our findings we created an executive summary and held a presentation for the whole team. We tried to let everyone walk in the shoes of Conrad sales agents by illustrating a typical workday and by vivid storytelling. We had to answer the following questions:

  • What is the basic structure of the sales department?
  • What are goals and tasks of sales agents?
  • What are typical pain points or rewarding events working in sales?

Behaviour Patterns! (again)

We again mapped our qualitative research findings to behaviour patterns, this time just for the sales department.

Reflecting the structure of Conrad sales, two personas with a particular set of needs and activities also showed up in the pattern map:

Inside and External Sales.

Personas

Based on our research we were able to define two key personas for sales, that we would consult in future design decisions. We focussed on the following aspects:

  • Portrait
  • Demografic Data
  • Character traits
  • Strongest Quote
  • Motivations and needs (acc Diefenbach, Hassenzahl)
  • A glimpse into a typical day
  • Main goals and tasks
  • Main frustrations

Personas helped us generate a shared understanding of who we were designing for and were a reference point for prioritizing scenarios in a later stage.


User Goals

Looking at our problem definition with the personas decorating the workspace wall, we had to ask ourselves this following question before diving into design and coding:

How can we make Luise’s and Robert’s life better with SAT/CRM360°? And how could we measure a potential success?

To find answers, we held a workshop with the whole team, including Conrad Developers, Codecentric Consultants, UX&I Consultants and the product owner to define potential benefits from a user’s perspective.

Some key goals we could identify were:
  • Create transparency
  • Strengthen collaboration
  • Keep data quality high
  • Gain insights from visualized trends
  • Enable fast reaction times

Should-Be Scenarios

To define and prioritize main user-flows, we created Should-Be Scenarios, that describe use-cases in context of our future solution. In short, we wrote stories, that would point to what we would have to build in an interface. The story format also made it easy to validate our assumptions with real sales agents.

A typical scenario for Luise

Our Scenarios consist of:

  • Title and ID
  • Acting Persona
  • Prioritization (How important is this?)
  • Frequency (How often does this occur?)
  • Short summary
  • Long Text with Highlights (activities, requirements, conditions)
  • Solution level pointing to features needed to achieve what’s in the story

Scenarios are a perfect format to illustrate real life experiences without concentrating on screen activities only. It also allows team members or external stakeholders to get a feeling for the persona’s problems and emotional states while performing tasks.

UX-Vision Movie

This design artefact was rather exotic, but it helped us get important stakeholder buy-in and create a shared vision throughout all project teams. We worked our way back from a fictional solution and created a promo video for SAT.

The video format helped us stay blurry on a detailed feature level, but gave an overall expression of where we were heading in terms of how it would feel to use SAT. It shows how we were thinking about certain use patterns, the importance of customization or how we planned to integrate third party solutions.

This doesn’t exist (yet)

User Story Mapping (J.Patton)

This valuable method by Jeff Patton is the perfect transition from vision to designing and building stuff. In several User Story Mapping workshops we went from personas and scenarios as a starting point to build what we called then “scenario maps”. This meant, that we basically went from scenario to scenario to build small maps to later consolidate everything in one big picture.

We translated activities, that we found in our scenarios, to red post-it notes in an horizontal line representing the dimension of time. Above that line related activities are summed up under blue epic-notes and below every activity, in vertical order, we filled in all the yellow detail-notes needed to accomplish that activity.

It’s an ideal tool to prioritize details (move up or down) and define the scope of upcoming releases or MVPs by simply drawing a horizontal line that includes everything above it and excludes everything else for now.

Left: Product Owner Roman Swiderski (Conrad) pointing at the map. Right: A digital version for remote collaboration

Information Architecture

Looking at the User Story Map, we were able to build information and interaction clusters leading up to a navigational concept and a classic sitemap. It was the starting point for more concrete design activities.

This diagram shows how we structured content

Vision & Design Prototypes

Vision Prototype

The Vision Prototype helped us quickly build and also quickly discard ideas we had for SAT and focussed on Interaction Design. In relation to the implementation sprints, we were ahead in time with this prototype, which gave us the opportunity to validate key aspects of the design in usability tests before pushing the concept to visual design and building the frontend.

Design Prototype

The Design Prototype added the needed layer of visual detail and reliability, so we could use it not only to communicate our validated decisions for interaction design but also visual design specifics.

Vision & Design Prototype

The Design Prototype was content-wise near to actual sprints, while the Vision Prototype reached out far ahead to explore more abstract concepts. We evaluated concepts at Vision stage and also after being implemented in Usability Tests.

Prototyping and time-travels

Methods for Evaluation

  • Usability Testing on site or remote (moderator, notetaker, 30–45 mins)
  • Collaborative Mini-Workshops (UX Design, Product Owner, Users, 15–30 mins) to quickly evaluate feature and design ideas
  • Presentation and discussion about latest findings with the whole team
Collaborative Design Session — done via Goole Hangout and Realtimeboard

SAT-Design System

A well documented design system served multiple goals:

  • a centralized document, that can keep up with the evolution of the project while preventing design debt
  • guarantee design consistency, a quality not only for users, but for designers and developers as well
  • speed up the process of designing stuff, as well as speeding up implementation by reusing or adapting established components
Early version of the SAT-Styleguide

Tools we used for Designing and Prototyping

  • Sketch for all kind of prototypes and visual design
  • Invision for prototyping, team collaboration and partly for usability tests
  • Invision’s Freehand for remote ideation & design sessions
  • Realtimeboard for concept documentation and User Story Mapping
  • Adobe After Effects for the Vision Film
  • Google Suite for collaboration, communication, documentation

Wrap Up

With our UX process model we prepared a solid ground to walk into future releases, new scopes and changing team members. The concept, represented in the User Story Map as the backbone, stays a living document under constant changes, as well as design systems keep evolving.

The insights we could generate through the extensive research phases stay relevant and fuel the daily work in this project.

By writing this case study I wanted to emphasize the value of understanding and defining the problem space, before rushing into good looking solutions, that don’t solve real problems.
We are quite thankful that we were given the time and space to do proper research — and the benefits of doing it this way were felt by many people involved, not only team members and stakeholders, but also endusers.

About me

I’m a User Experience Designer with more than 20 years experience in the digital design business. My background is visual design, but my passion is understanding humans and their domains to build software that can have a positive influence on their lives.

Feel free to contact me, if you want to know more. But please don’t hate.

I’m writing other stuff on Medium.
I’m on Twitter
I’m on Linkedin 
I have a website



About Conrad Electronic SE

Conrad Electronic has been in the technology and electronics business since its foundation in 1923. With over 2,000,000 products from leading manufacturers and distributors for business customers, about 750,000 products for private customers available through the company’s online shops and over 20 German branches, the Bavarian family-owned business is one of the leading omnichannel technology distributors. Conrad operates with 17 locally based subsidiaries across Europe.

The product portfolio comprises products from leading manufacturers and strong own brands like TRU COMPONENTS, VOLTCRAFT, TOOLCRAFT, MAKERFACTORY, C-Control, renkforce, Speaka Professional, sygonix, Conrad energy or Emmerich. It also includes Conrad Connect, a leading platform for the Internet of Things (IoT), which enables the cross-supplier connectivity and management of intelligent devices, apps and services for private and business use.

For business-to-business customers, Conrad, as one of the leading European B2B distributors, offers its customers individual service through key account managers, inside sales and in-branch business advisors. In addition, customers can benefit from the following services: 24-hour standard delivery, eCatalogues, eProcurement solutions, calibration, comprehensive PCB and other product services. Since the end of 2013, Conrad has possessed new Electrostatic Discharge (ESD) handling facilities and an EPA (Electrostatic Protected Area). The company’s whole ESD management system is certified by TÜV Nord, based on DIN EN 61340–5–1.

For private customers, conrad.de is one of the top ten most visited Internet shops in Germany and offers an extensive technology product portfolio. Amongst others, customers can choose from innovative Smart Home products as well as related services for the installation. In addition, there is a large range of available omnichannel services like Click & Connect, customer advice and ordering service directly in Conrad’s shops as well as a digital 3D print service and 3D print Hubs in branches.