Ferrari Classic Parts

Design for complex internal CMS

DATE

December 2019

MY ROLE

Sr. UX/UI Designer, Design Team Lead

DOMAIN

Automotive

SERVICES

Persona Creation, Design System, Competitive Analysis, Jobs to be Done, Usability Testing, Surveys, UI Concepts, Prototyping

PROJECT DEFINITION

  • The Product:
    Initially, the system consisted of three separate CRM applications, each divided by specific functionalities.

  • Target Audience:
    The primary users included sellers, managers, and store delivery directors. The goal of the application was to streamline their workflows—enabling them to quickly locate any product, access all related information, group items into sets and kits, and effortlessly create product lists for online sales.

  • Business Challenge:
    The outdated design logic and user flows of the existing applications significantly hindered employee productivity. This inefficiency led to delays in processing and shipping goods, resulting in customer dissatisfaction and, ultimately, a decline in store demand.

  • My Role:
    As a Senior UX/UI Designer and Design Team Lead, I collaborated closely with developers, business analysts, and project managers. Our team operated from Lviv, Ukraine, while working in partnership with the core team based in London, UK.

CASE STUDY

As a designer, I was challenged to create an intuitive, user-friendly interface for a highly complex system that managed information on over 40,000 car parts. The goal was to streamline the workflow for managers—making it easy to quickly find any product, access all relevant information, group items into sets and kits, and efficiently create product lists for online sales. My process began with an in-depth analysis of the managers' needs, preferences, and pain points. Our team, consisting of three designers and two business analysts, also incorporated over 800 master requirements and layout suggestions from key stakeholders into the project’s scope.

Defining master requirements
Defining master requirements
Defining master requirements

Defining master requirements

JOBS TO BE DONE

My role in the team was to address the known usability issues and product enhancements, in order to increase the user adoption inside Ferrari CP. We gathered a series of customer requests to identify what tasks the users were trying to accomplish. I also conducted interviews with users (managers of CP) located in the London, UK.

COMPETITIVE ANALYSIS

After we moved on to analysis of competitors web sites, and as a result made a spreadsheet with all features for comparison. As a result of all work that was done, we finally had a vision about full scope of user needs and features that could cover them.

Spreadsheet with competitive analysis
Spreadsheet with competitive analysis
Spreadsheet with competitive analysis

Spreadsheet with competitive analysis

IDEATE

With this information, we started whiteboard sessions with the team and after moved on to sketching. On that stage we created and proposed tons of ideas that were visualised through sketches and hi-fi wireframes.

Sketches
Sketches
Sketches

Sketches

Wireframes
Wireframes
Wireframes

High fidelity wireframes

DESIGN SYSTEM

One of the most difficult tasks was to create a custom design system, because front-end development team and I understood that we will not be able to improve and process components in the future so we invested more time at the start to design a quality and consistent set for our interface. Inspiration was taken from Google and Atlassian design systems and as a result I created something in between, that allowed to more clearly and qualitatively fit the components into the system.

UI CONCEPT

After completing the previous stages and agreeing on the general layout and placement of elements, we moved on to designing concept of the user interface. Concept was proposed in two themes to suit user requests and modern trends.

Part details page concept in white theme
Part details page concept in white theme
Part details page concept in white theme

Part details page concept in white theme

Part details page concept in dark theme
Part details page concept in dark theme
Part details page concept in dark theme

Part details page concept in dark theme

PROTOTYPING

To ensure that UI is correct and will work best for the end users, there was a need to give them ability to touch and feel the design same as a working app, so fully linked prototype was created.

Figma screenshot with prototype connections
Figma screenshot with prototype connections
Figma screenshot with prototype connections

Prototype connections. Figma screenshot

USABILITY TESTING

The tests were moderated, remote and conducted iteratively by 4 users. This made it possible to test the interface a total of 24 times and identify and improve a large number of different nuances and painpoints. Also, with the help of usability testing, it was possible to track the time required to complete some scenarios. So, at the end of the project, it was a very important argument to prove that the investment in the design was worth it.

RESULTS

  • Satisfaction Surveys
    Satisfaction percentage increased by >40%. So I can easily say that the end users were completely satisfied with a modern UI and well thought UX;

  • Usability Testings
    Speed of completion i.e. Basket Fulfilment Scenario increased more than thrice. From 24 min to 6,8;

  • Improved Functionality
    New functionality removed need of swiping to third party apps and gave ability to track, monitor and communicate around goods.

KEY LEARNINGS

  • Always clarify and validate
    Your understanding and assessment of a problem may be totally inaccurate. Always clarify your understanding of the problem, and validate your ideas and theories before applying them. Doing so ensures that you are working on the correct problems and ensures that your ideas and theories are correct. Restate and rephrase their problem in your own words, use open-ended questions and to encourage them to open up, but be careful not to add your bias when asking questions.

  • Don't lose sight of your target audience
    It's easy to forget them, but keeping your audience in your sights will help keep you on the path to success. Stay in touch with the problems your customers are facing. Remember that you probably aren't the audience you're targeting. It's easy to think "I would want X if I were a user so that I could do …" but the problem is that unless you have actually been in that person's shoes, you won't know what they want. It will just be assumptions and conjecture on your part to say that. You might guess what they need correctly a few times, but you really have no idea what they need unless you ask them what problems they are facing, or about the needs they have.

  • Always establish metrics to measure goals, progress, and success before starting.
    If success is not measurable, it's difficult to prove the value of your work, and ultimately your worth to the project, client, and company. Push for the definition of success and the measurement of success before starting anything to ensure that you are pursuing the correct goal.

Photo with Lviv based team, after one more successful demo. N-iX Winter party 2020.
Photo with Lviv based team, after one more successful demo. N-iX Winter party 2020.
Photo with Lviv based team, after one more successful demo. N-iX Winter party 2020.

Photo with Lviv based team, after one more successful demo. N-iX Winter party 2020.