Flow Labs
Client
Flow Labs
Role
Designer — UX, UI, Web Design, Branding, Marketing
Duration
2022 – 2024
Design Team
Jen Huang, Roman Zayats, Kaiwen Tao, Amy Zhang
Development Team
August Brenner, Tommy Mckinnon, Alpha Chau, Richard Moore
Overview
Driving change to solve America’s gridlock problems
Context
Flow Labs builds transportation technology that simplifies the complexity of managing traffic networks and gets people where they need to go as safely and efficiently as possible.
40,000+
annual traffic crash fatalities
51 Hrs
spent waiting in traffic
29%
carbon emissions from transportation nationally
12%
carbon emissions from transportation globally
Problem
Flow Labs' powerful infrastructure was being held back primarily by the following:
The software faced challenges in usability, often causing confusion with reading some data graphs. It also lacked an intuitive display: navigation was cumbersome, data structures seemed all over the place, and visual representations were inefficient. A lack of visual appeal made navigating through abundant amount of information even more challenging.
What are the emerging opportunities and caveats?
Discovery
Establishing our North Star
Here are some of our primary principles: adaptable, informative, glanceable, and visionary.
Forming a clear timeline
Our MVP process spanned across 14 weeks.
ideation
The team experimented with different visual elements, styles, and techniques to find the most effective approach for enhancing visual appeal while maintaining clarity and functionality. This involved testing various design variations to assess their impact on user engagement and comprehension.
We started with basic low-fidelity designs, making it easy to iterate upon
Eventually, they evolved into mid-fidelity designs
Developing and applying a comprehensive design system:
Refining components and their variations:
Design Decisions
Revisioning visualizations
The visual representation of traffic data was redesigned to offer a more dynamic viewing experience, providing real-time insights to users.
Enhance glanceability
Necessary numeric metrics were added to graph cards to improve visual prominence and minimize user interaction in addition to improving the data organization according to users' workflow.
Common regions and proximity
Layout consolidation based on functionality. Primary navigation was centered on top whilst the map was placed on alongside the metadata and actions that are focused on the right.
Modular approach to data representation
Different types of data were treated as distinct modules, simplifying interpretation and adhering to the law of common region.
Final designs
Featuring vibrant colors, dynamic layouts, and intuitive interactions, the design captivates users' attention while facilitating effortless navigation and comprehension of critical information. Each element is thoughtfully crafted to strike the perfect balance between aesthetic appeal and usability.
Impact
Enhancing communities through inclusive, sustainable transportation that connects people to opportunity. Reducing congestion and emissions while increasing safety and access.
-51%
in crash risk
-24%
in travel time
-21%
in vehicle emissions
+413K
per intersection annually
Reflections
Collaboration is vital
Working within a team proved to be indispensable. While accustomed to taking on projects independently, the scale and complexity of this software made it essential for us to exchange ideas collectively, assess each other's strengths, and collaborate.
Don't expect a solution to arise easily
Embracing uncertainty and understanding that not every challenge has an immediate solution. It became evident that rigid timelines do not always align with the iterative nature of design. It is natural to be constantly revisiting and revising solutions as needed.