DESIGN SYSTEM

MOBILE

NATIVE

Designing a visual system for environmental data.

View live product

ROLE

Visual Designer

TEAM

2 Designers

PLATFORM

iOS / Android

STATUS

Shipped

CONTEXT

Ambee Neo was a neo-brutalist visual system for Ambee's consumer app, designed to make air quality, pollen, weather and other environmental data feel distinctive while remaining clear and usable.

ROLE

I worked on extending and maintaining the Neo design system across the product—creating components and variants, documenting patterns, maintaining tokens, and designing interfaces for different environmental datasets.

The initial visual direction and foundational system were established by Era, our senior product designer. My contribution was focused on extending, maintaining and applying that system as the product evolved.

THE DESIGN CHALLENGE

How do you make environmental data loud without making it confusing?

Neo was built around a bold neo-brutalist visual language—strong colour, typography, strokes and shadows. But in an environmental-data product, colour also carries meaning. It can indicate severity, category and change.

The challenge was finding a visual language that could be expressive without competing with the information itself.

BUILDING THE VISUAL LANGUAGE

We explored texture as a secondary way to distinguish environmental datasets. Waves represented air quality, while dots represented pollen. Colour then communicated severity.

THE SYSTEM

Turning the visual direction into a usable system

As the product grew, the visual language needed to work beyond individual screens. I extended the existing system into reusable components, variants and patterns that could be applied consistently across the app.

I worked on:

  • Data components for air quality, temperature, UV, and wind

  • Component variants and states

  • Design tokens and variables

  • Icon matrices and sizing

  • Pattern documentation

  • Supporting designers and developers using the system

43

component sets

306

variants

FOUNDATIONS

The foundations

Keeping these foundations consistent allowed new components and screens to feel like part of the same system without requiring every element to be designed from scratch.

MAP

The map already had enough colour.

The problem
The map already contained colour. Adding a colourful environmental layer on top made the data harder to distinguish.

The decision
We moved the basemap to monochrome and reserved colour for the environmental layer.

DENSITY

Not every surface needs the same amount of information.

The map needed a detailed temperature scale, but that level of precision wasn't necessary inside a compact information card. We simplified the card into broader ranges so the condition could be understood at a glance.

WHAT SHIPPED

REFLECTION

Looking back

Visual systems need context
A visual language can be distinctive and still become distracting when the information architecture changes.

Systems are living things
Maintaining Neo taught me that a design system isn’t finished when the components are created. It needs to evolve alongside the product.

Removing is also designing
Some of the strongest decisions came from taking things away rather than adding another visual treatment.