Traffic Status V1.2
B2B SaaS System
2
CLIENTS CONVERTED
IN A MONTH
4 Million
RMB YEARLY
REVENUE CONVERTED
My contribution
I was the only UIUX designer and finish the whole website from 0-1 under the supervision of my design lead - Qian
Participate in:
Graphic Design
Design System
Lead:
UIUX Design
Product Management
User Research
Usability Test & Iteration
Collaborate with:
Marketing Team
Engineers
Copy Writer
THE BUSINESS PROBLEM
V1.1 HAS NO CLIENT
What
Traffic Status is a SaaS system using floating car data to measure, monitor, and predict traffic conditions.
Why
Why do clients(Operators and policemen in Traffic department) need Traffic Status?
Quantify the KPI for traffic police officers via metrics improvement.
Prioritize which congestion spots require action through comparing and temporal data.
Improve traffic conditions by adjusting traffic lights and dispatching policemen.
Our Status
With Traffic Status V1.1, all metrics in various granularity are generated. But we still have no client.
USER PROBLEMS
Users can not leverage the system to make decisions and improve their KPIs (traffic congestion metrics).
We have launched Traffic Status Version 1.1, which contains all the basic metrics and features of a traffic monitoring system. Based on the feedback of the pre-sale team, we already knew that potential clients were not 100% motivated to subscribe to our products because they didn’t think our product was usable enough for their real-life workflow.
THE BUSINESS RESULT
Get Our First 2 Clients
We shipped out our SaaS system V1.2.
From this version, we got our first 2 clients and 6+ potential clients within 2 months(before I left).
Revenue was 4 Million RMB/year, with trends growing to 16 million RMB/year.
SOLUTIONS
A Space Data Customization & Visualization Tool
Customization:
Draw boundary
Let user create a new area by drawing boundaries
Rational: familiar and easy
Precise customization:
Filter by type
Select the road type that will be included
Rational: clear and quick
Precise customization:
Delete the unwanted roads
Let users easily delete roads that should not be included when calculating the metrics via an interactive map.
Rational: Flexible and intuitive
Precise customization:
Delete the unwanted sections
Let users easily delete sections that should not be included when calculating the metrics via an interactive map.
Rational: Flexible and intuitive
Show Customized Metrics
Rational: Scenario based and intuitive
USER PROBLEM
How to
Make Decisions
based on the Metrics
Stakeholders’ work flow
Administration Head’s Problem
Traffic congestion can be quantified in a administrative district level using your system.
However, I am still
unclear how to manage the team and alleviate the traffic congestion throughout the whole district.”
“
Operators’ Problem
For my responsible areas,
I don’t know which roads or small areas need to dispatch (more) policemen
because the system only has the road ranking at the administrative district level.”
“
SUMMARY
How can traffic status help operators improve traffic congestion?
Be informed about the real-time traffic conditions of their responsible area assigned by the administration head.
Locate the abnormal congested road sections or intersections that need action in their responsible area.
Decide where to dispatch police officers.
UNDERSTAND THE JOURNEY
Operators
Decision-Making
Process
The Proposed
Decision-Making Process with Traffic Status V1.1
The Real Experience
Why can’t V1.1 facilitate operators to dispatch policemen?
REFRAME THE PROBLEM
Traffic Police Operators could not quickly get customized metrics to identify where to dispatch policemen.
Each traffic operator has their responsible area, whose metrics cannot be easily found in our system because we only show metrics on an administrative district scale.
Traffic operators cannot get customized metrics to instruct them on where to dispatch police officers.
There are many general metrics that traffic operators don’t care to steal their attention.
OPPORTUNITY
A Customization Tool
How can a customization tool facilitate the decision-making?
A customization feature that quantifies the traffic status of each team’s responsible areas so that
I can have an idea about different areas’ performance.
For department head:
For operators:
A customization feature to get metrics about specific areas so that we can know where to dispatch policemen.
IDEATION
Identify the Shortest Path for Customization
DEFINE
Key Feature & Priorities
Customize Area
Draw area boundaries
Upload area boundaries
Choose road type
Delete unwanted objects
Store the area and its roads
Get metrics about the area and the roads
Show Metrics
Draw a line with the direction
Upload a line with the direction
Choose road type
Delete unwanted intersections
A new road is created and stored
Get metrics about the road.
Customize Road
Show customized areas and their roads’ metrics on the first page
Show the frequent/sudden congested roads for customized areas on the first page.
Show customized roads via one click
DESIGN
Map the User Flow & Wireframes
Customize Areas or Roads
Show Customized Metrics
Key Improvements After Customization for Operators’ Workflow
One click
to show any customized area’s metrics and its roads rank & metrics.
Another click
Another click
DESIGN
Wireframes
ITERATION
A Seamless, Flexible, & Error-Tolerate Customization Journey
Iteration 1:
Change elements’ position for a seamless experience
BEFORE:
A pop-up window for road type selection which interrupts users’ experience.
AFTER
The sidebar for road type selection makes the whole experience more seamless.
TAKE AWAY
When designing a long process for users to finish, try to reduce friction by making elements consistent. Let users complete the whole process seamlessly.
Iteration 2:
Create more flexibility for drawing boundaries
BEFORE:
For the task of “Draw an area and adjust the boundary,” testing users found it hard to adjust boundaries by merely moving the fixed amount of points they initially drew.
AFTER
So we changed the drawing process - When users hover over their initial drawing points, midpoints will automatically generate for users to adjust detailed boundaries.
TAKE AWAY
Think through the real situation when users do this task. Users cannot make perfect actions the first time. We must provide them with clever tools to adjust details instead of drawing again.
Iteration 3:
When the user did not draw correctly on the roads, further customization to
embrace more errors for users.
Roads are intricate and intertwined with each other. Users are easy to make mistakes. How can we let users pleasantly correct errors without letting them do repetitive jobs?
BEFORE:
Minimize the wrong case rates while affecting the whole experience: Let users connect dots in case they didn’t draw on any road.
AFTER
Enable users to quickly and easily adjust the results when they didn’t draw it right. Do not let the conner case influence the whole experience.
Filter road types to match more precisely.
If there are still some wrong road sections, users can easily delete them.
TAKE AWAY
Never expect users will be perfect. It is our task to let them fix the error easily and pleasantly without having to draw again.
However, we are not supposed to let the “wrong case” influence the “right case” pleasant experience. That’s why the before solution is not the best. Sometimes, if trying to make sure users behave right will make the experience harder, then try other solutions.
FINAL DESIGN
Customize Areas
FINAL DESIGN
Customize Roads
FINAL DESIGN
Show Customized Metrics
Show Customized Areas’ Metrics
Show Customized Roads’ Metrics
