Product flow to refactor a process

Internal web app
Overview

This project is about the process followed to re-factor the trade-in flow of a web app that helps workers to administrate, control and manage the flow of trading cars.

Role Product Manager, UX Researcher & Product Designer

Product Lifecycle | Roadmap | User Research | UX Design | Interaction design | Facilitator | Prototyping | User testing

May 2020 - January 2021
The product

Our product is an internal web app for a 5-year-old start-up.

The project

Being the Product Manager helps me get the business and the user view of the product status.

Trade-in cars are a regular paying method our clients use for buying our cars. At that moment, it wasn't a business need to improve, but it was for sure a user experience need to be re-factored.

The roadmap

Due to the start-up environment, requirements and priorities come and go within quarters or even weeks, so it’s quite hard to know when a fuctionality will be actually built. Specially in the 2020, the year COVID-19 attacked our world.

The Trade-in epic roadmap has been planned on April 2020, and after the whole work, this is how the final roadmap ended up being:

UX Research process

My work-flow process is based on the Double Diamond Theory and Lean UX process. I aim to incorporate the key stages of Discovery, Definition, Ideation and Implementation in all of my projects.

I spent a 4-month field study to alnalyse the effectiveness of this internal web app of the Trade-in process. Study participants were workers from every department involved on the duty.

Discovery stage

For this stage of the research I decided to divide the Discovery stage on 3 phases:

STAKEHOLDERS MAP
RECRUITING
  • Demographic: Users who take part on the trade-in process
  • Gender: 50/50
  • Sampling: 7 (1-2 users/deparment)
QUALITATIVE SURVEY (CAPI)
FEEDBACK

We must communicate via email or slack with the teams involved to manage a trade-in quotation

It's hard to quotate Trade-in cars

Every time a client wants to trade-in his car I feel the sale is on risk for the lack of management on the application

USER INTERVIEWS
USER EXPERIENCE DIARY
Exploring stage

It's time to start analysing the information from the Discovery stage. To do it so I decided to divide the Exploring in stage on 4 phases:

Affinity map mining

I created the interview questions to obtain qualitative information to define the the Affinity map. After mining the interview results I could list the data (one color per user):

Affinity map clustering

To synthesize the data, I created 4 clusters of insights:

Personas definition

In my experience, using the Affinity map to create Personas is the easiest and most reliable method because of the use of qualitative data. The categories I included for the Personas definition were:

Heuristic evaluation

As the application was already built and so its UI, the goal of this phase was to compare and better understand the usability gaps in the existing process by my expert view.

The workflow I followed was:

  1. Identifying usability problems with notes by detailing the heuristic to improve and some recommendations to propose solutions on this early stage.
  2. Eliminating duplicated heuristics
  3. Compilating results
Service blueprint

As the trade-in process involved 5 different teams, I needed to understand the flow and user’s pain-points.

Research insights

Messy flow

The flow defined in the platform does not fit with the real flow

Too convoluted

Users do too many interactions outside the platform. This leads to confusion and mistakes

Lack of control

So many departments involved with different priorities. Hard to control and management

Poor UX interface

There have been too many usability heuristics to be solved to improve the UX

Missing coherency

The current process assigns wrongly the work among departments

Working on solutions

It’s time now to start working on solving the pain-points gathered on the research.

Wireframing & UX testing

Tools used

Thanks to the UX Diary and the heuristic evaluation, I designed Low-fi wireframes based on an initial and hypothetic user flow. To ensure worker’s productivity, my goals on this initial UX Testing were:

#1 Information architecture

To validate the IA of the new screens

#2 Usability

To detect usability fails

#3 Correct mistakes fast

To fastly discard UX hypothesis

#4 Confirm data request

To assure all data is necessary for the process

The UX testing helped me to validate the user interactions flow and to discard the information architecture and usability of the designs. The findings were:

Not clear IA

Users could know where they were but they didn’t know what to do first

Messy navigation

Too many inputs and tabs that could be reduced

Optimized user flow

The user flow defined matched with the key points of the process

Good duty assignments

Each user knew what, when and where it was expected from them on the process

User flow

Tools used

I continued iterating on the designs to clear the IA and the UX by testing more proposals with users.

User interactions flow:

Final designs

Tools used

I had to build some new components on the Design System. Thanks to the continious UX testing we succeed on the firsts UX findings. These are the final screens for the initial part of the process (validation, initial quotation and initial agreement):

User interactions flow:

This is the screen of the Trade-in process where purchasers and sellers collaborate to propose a purchase price to the client:

Validating data is the first duty for purchasers to assure the car is a good buy for us (good hand car) or not:

Purchasers save the changes on the validation group “Data”

Purchasers save the validation

Purchasers validate the fields from the validation group “Photos”

When all fields are validated, purchasers can save the changes

Purchasers save the changes on the validation group “Photos”

Purchasers can now quotate the initial estimated purchase price

When the data is validated, purchasers can now quotate an estimated purchase price.

Purchasers can add directly to the proposal the calculator the estimated price

Puchaser must confirm the proposed estimated price by clicking on the CTA

The Trade-in quotation status is now “Waiting for client agreement”

The client has not accepted the quotation proposal and the process ends

The client has accepted the quotation proposal and the process continuos

Now deliveries must contact the client to set a delivery date and the type of delivery. On the delivery date the trade-in car would be mechanical certified and purchaser would set a final quotation price. If client agrees, the trade-in car would be added to the sale incomes; if not, the client would have to choose another paying method to buy our car.

Final notes

This process took me nearly a year to be built because of 3 factors:

  1. The complexity of the flow
  2. COVID-19 pandemic
  3. The company priorities

We have just developed it in our application and users are starting to use it.

User reseach never stops! Now it’s time to measure and listen to users to continue the iteration and the progress of a great application made by great people.