top of page

CRM Redesign

CRM_Double_Simple_Screen.jpg
Overview

The previous CRM was used to upload, manage, and store customer information, for internal use and for frontend websites. It served as the hub for customer data, content creation and compliance with regulations. However, The previous CRM was dev built, cumbersome and time consuming to operate. The goal was to redesign this system to vastly improve the user experience across all metrics.

​

Role: End-to-end sole product designer working with a PM, PO and devs.

Timeframe: 1.5 Quarters (While working on other design projects and day-to-day tasks)

Current Solution

Previous process took the users 21 steps and 27:30 minutes to complete.

​

There was no flow, only individual steps and painfully long create/edit forms and details screens.

screencapture-qa3-genesis-gdcgroup-tech-resources-brands-1836-2024-08-31-14_20_08.png

Details screen

screencapture-qa3-genesis-gdcgroup-tech-resources-offers-new-2024-08-31-14_20_29.png

Create/edit screen

Problems

The system compiled of a series of individual steps that had to be completed individually. Each of the 21 steps were presented to the user as a separate folder, with the user having to navigate in and out of each to complete the process. (See image)

​

Users moved through the system based on who had trained them, with additional and differing steps and processes for the USA and rest of world.

Screenshot 2024-08-31 at 14.31.32.png

Previous navigation menu

Goals

Reduce the number of steps and time needed to complete the creation, editing and viewing processes. 

​

Create a defined flow through the creation process so that users can quickly and intuitively create files, reducing onboarding times and errors.

​

Allow for efficient search and view functions.

​

Increase visibility of system to keep users informed about whats going on and reduce amount of technical jargon used.

​

Remove unnecessary steps, features and information. Introduce a new aesthetic and minimalist UI with an improved visual hierarchy.

Result Overview

Reduced the brand creation process time from 27.30 minutes to 3.59 minutes.

​

Reduced the brand creation process from 21 to 14 steps.

​​​

Standardised processes for all users groups.

​

Boiled down the full CRM into a V1 consisting of 3 new features (Creation wizard, details screen and viewer) in order to meet the project deadline. Other features were moved to later versions.

​

​New Brand 'Details screen' shows all brand information in one place, removing the need to open 21 different screens to get the full picture.

Process

Discovery

01

Stakeholder statement and syncs

Gathered product requirements. Set the scope and deadline.​

Regular syncs were set up for updates and feedback.

Functionality mapping

The functionalities needed for our system, informed by the previous steps, were mapped out.

07

Screenshot 2024-04-03 at 21.40.11.png
Screenshot 2024-04-01 at 18.30.50.png
Screenshot 2024-04-03 at 22.02.30.png
Screenshot 2024-04-01 at 22.33.59.png
Screenshot 2024-04-01 at 22.32.38.png

02

Heuristic evalutaion

Carried out with the team to diagnose problem areas in the current solution and to get the team thinking critically.

03

Usability testing and user intervies

Used to gather user goals, behaviours and the context of use.

How the previous system succeeded and failed was observed.

04

Affinity mapping

Usability testing and the heuristic reviews results were mapped onto an affinity map. ​Results were grouped by theme, to pinpoint areas of focus.

05

User flow charts

Flow charts were created and analysed showing the current flows pain-points.​ New flow charts were created for our desired new flow.

06

Competitive benchmark

Direct and indirect competitors, along with the specific functionalities were analysed.

Stakeholder sync

Affinity map

User flow chart

Functionality map

Competitive benchmark

Wireframing, prototyping and user testing

01

Wireframing and usability testing

Wireframes were created and A/B tested to validate the new flow ideas. This round was focused on the steps and functionality.

02

Lo-fi prototype and usability testing

Based on the results of the previous round of testing the lo-fi prototype was built going into greater detail and level of interactivity.

03

Hi-fi prototype and usability testing

The designs were iterated based on user and stakeholder feedback. The high fidelity designs were created with the final UI and user tested again.

Prototyping example

Design system and handover
Screenshot 2024-04-03 at 21.52.53.png

A design system was created, including typography, icons, buttons, navigation, components, tables, modals and more. This allowed devs to create reusable components and work at scale.

​

Annotations were also added to the file to ensure all necessary context.

Design system

Results

Creation Wizard

A creation wizard was created composing of 14 steps, reduced from 21.

​

Creation time was reduced from 27.30 minutes to 4 minutes.

Screenshot 2024-08-31 at 16.44.26.png
Viewer

Users have full control over the viewer tables with filters, hide/show columns and resize and reorder columns.

​

Users can now also create and save custom views.

Screenshot 2024-08-31 at 16.54.36.png
Details screen

All information relating to the the parent file now appears on the parent's detail screen, previously this information was scattered across 21 different folders.

Details screen

Feature breakdown and design choices

Feature_breakdown-08.png

  1. Wizard nav offers feedback on where in the process users are located and allows them to jump between steps

  2. Feedback on if the previous step has been fully completed or not

  3. Create launches a modal to input data

  4. Feedback on how many items need to be created to fulfil the step

  5. Save and exit options

  6. Feedback on number of sub-steps

  7. Ability to hide and show previously created items

Feature_breakdown-10.png

  1. Global search 

  2. Enter creation process at any level

  3. View previously created files

  4. The above 9 most popular items were displayed. All other items were hidden behind 'More'

  5. User preferences and log-out accessible from user's image

  6. Collapse/expand left menu

  7. Ability to switch between the default 'All' view and other created views

  8. Ability for users to create custom views

  9. Primary CTA to create

  10. Ability to filter and group the table, along with the functionality to edit the amount and positions of the columns

  11. Ability to sort the column

  12. On hover, users can drag the column to a new position or resize the width of the column

  13. Pagination controls

Feature_breakdown-09.png

  1. Leave details screen

  2. Ability to navigate the file's parent 

  3. Ability to drag sections, allowing users to order their screens as they wish

  4. Edit button

  5. Access to actions such as export, clone etc.

  6. Items attached to this file are easily accessible through tabs

  7. Create an item to attach to this file 

Takeaways

Key learnings

We started the project without analytics data, leading to knowledge gaps despite extra user interviews and testing. In hindsight, I would have pushed for earlier installation of analytics tools. I worked with the web analyst to set up Google Analytics and Microsoft Clarity which later saved time and improved confidence in future decisions.

​​

A quarter was given for research, but there was no design timeframe set. We received half the time we expected for the design phase. This wasn't enough time to design and test all the features planned from the research phase. Defining our timelines and objectives early on would have allowed us to focus and deliver a better set of core features.

© 2024 by Séamus Flannery.

bottom of page