A collection of small works

Made to explore.

Transparent mechanical keyboard with white keys, green escape key, blue enter key, and yellow space bar
Portrait of Mila seated against a warm brown studio background

Mila.Liu

I’m Mila, a multidisciplinary designer with a background in landscape design and urban planning.

About Me

Education

Present

Design Studies

ArtCenter College of Design

Coursework focused on interaction, spatial experience, emerging technology, and new relationships between people and designed systems.

Earlier

Landscape Design & Urban Planning

Design Foundation

Built a foundation in landscape systems, public space, environmental thinking, and design at an urban scale.

Experience

2026 — Present

UX/UI Artist

The Donovan’s Venom · Volunteer

Designing child-friendly interface flows and administrative permission experiences for an online piano learning platform.

2026

Product & Interaction Designer

Independent Projects

Developing AI-supported product experiences, physical computing prototypes, and responsive systems through research and rapid prototyping.

Earlier

Landscape Designer

Urban & Public Space Projects

Contributed to landscape and urban design work, including public-space planning and an urban riverside park redevelopment.

Designing experiencesthat connect people, systems, and space.

Portrait of Mila Liu

Mila Liu

Multidisciplinary Designer

I turn complex ideas into experiences people can understand and use. My background in landscape design and urban planning taught me to see every interface as part of a larger system.

I work across digital products, physical interaction, and spatial experience. Whether I’m shaping an AI-supported service or a responsive environment, I look for the clearest relationship between people, information, and action.

I care about the small details, but always in service of the whole. The goal is work that feels thoughtful, grounded, and natural to use—not complexity for its own sake.

Demos

Animated SemaForm dog ears with two Ollama mascots peeking into the frame

2026 · Physical computing / AI interaction

SemaForm: LLM-driven interactive design

Using a language model through Ollama, this demo translates natural language into physical movement to explore the emotion and force carried by words. Inspired by MIT’s inFORM, it first turns intent into an intermediate motion description, then sends that description to a group of servo motors to perform the action.

A mature tree reconstructed from bark-derived contours, point clouds, and generative scan marks

Bark AtlasTree skin archive

2026 · Natural observation / AI generative design / Interactive 3D

Bark Atlas|Tree Skin Archive

Beginning with twenty close-up bark photographs, this experiment translates grooves, cracks, knots, and layers into digital growth rules. Users adjust environmental parameters to explore how one surface archive can unfold into different three-dimensional growth trajectories.

2026 · XR / Tangible interaction

XR SandBox: Real-Time Terrain Interaction System

A tangible XR system that connects Unity with a 10×10 servo array, allowing digital terrain and physical form to respond to one another in real time. The project explores an accessible, low-cost interaction model for spatial simulation, education, and public exhibition.

Animated dog ears

SemaForm

LLM-driven interactive design

01 · Concept

Giving language a physical consequence.

SemaForm explores what happens when language stops being only something we read and begins to act upon the physical world. A sentence is interpreted as intention, translated into a motion score, and performed by a simple mechanical body. The demo treats movement as another layer of meaning—one that can carry hesitation, force, rhythm, and emotion beyond the literal words.

Sema

Ancient symbol associated with sema

derived from the Greek root sēma, meaning sign or mark.

SemaForm workflow showing how a sentence is interpreted and translated into servo gestures

Workflow

How a sentence becomes a gesture.

A sentence enters through the Python bridge and is interpreted by the local SemaForm model as intent, emotion scores, gestures, and a reply. If an emotion is detected, the emotion engine translates intensity into size, arousal into speed, and the emotion into a gesture template. Otherwise, the model selects a direct gesture. Both paths pass through the same code rules and serial command layer before the Arduino Uno coordinates the four servo motors.

SemaForm Arduino Uno prototype with four servo motors mounted on a wooden strip
Arduino Uno wiring diagram with a power rail and four SG92R servo motors

02 · System diagram

From intention to movement.

A local Ollama language model interprets a natural-language prompt and produces an intermediate motion description. That structured description is converted into timing and position values, sent through an Arduino Uno, and performed by four servo motors. Separating interpretation from execution makes the system legible, testable, and adaptable to different physical outputs.

The approach is informed by MIT Tangible Media Group’s inFORM, which demonstrated how digital information can be rendered through a shape-changing physical surface. SemaForm extends that question toward language: rather than reproducing a digital shape, it asks how an AI-interpreted intention might become an expressive physical behavior.

03 · Core code

A small translation layer between language and hardware.

The core loop asks the model for a constrained action plan instead of unrestricted prose. Each response must describe four servo positions, a duration, and an easing quality. The program validates those values, converts them into safe ranges, and streams the sequence to the Arduino Uno. This intermediate layer keeps the model interpretive while keeping the hardware predictable.

CodeFunction in SemaForm
ollama.chat(model, messages, format=SCHEMA)

Requests a structured JSON analysis from the local SemaForm model, turning the conversation into intent, emotion, gesture, and reply data.

json.loads() / json.dumps()

Translates between model text and Python dictionaries so each motion plan can be validated, remembered, and logged.

re.search(pattern, text)

Recognizes softeners and follow-up language such as “a little,” “bigger,” or “faster,” allowing a previous gesture to be adjusted.

max(lo, min(hi, value))

Clamps model-generated values to safe physical ranges before they reach the servo motors.

serial.Serial("COM3", 115200, timeout=0.1)

Opens the live serial connection between the Python agent and the Arduino Uno without blocking the conversation loop.

ser.write(command.encode()) / ser.readline()

Sends a complete gesture command as bytes, then listens for the Uno’s OK or DONE response before continuing.

del history[:-6]

Keeps the last three conversational turns, giving Sema enough short-term context without letting the prompt grow indefinitely.

Selected Python functions · Ollama + JSON + serial communication

04 · Hardware

A deliberately simple body.

The current prototype uses an Arduino Uno, four SG92R servo motors, a shared power rail, and an independent 5V supply. The servos receive control signals from the Uno while drawing power separately, with all grounds tied together. This modest setup makes it possible to study expressive timing and coordination before committing to a final physical form.

Intelligence iteration

Teaching Sema to understand.

Sema’s intelligence was developed through three design iterations and three interviews. The design iterations expanded what it could recognize in language; the interviews used the same questionnaire each time to reveal misunderstandings, test revisions, and refine the Modelfile and emotion database.

Three design iterations

01

Mapped simple words into recognizable categories and corresponding physical actions.

02

Built fifteen emotion modes after Sema could read a personal story but could not yet understand the emotion behind it.

03

Used different wording to describe the same event, testing whether Sema could understand meaning beyond individual keywords.

Three interviews

Claude interviewed Sema three times with the same questionnaire. Each response became evidence for revising the Modelfile and expanding the emotion database, creating a repeated cycle of testing, correction, and validation.

01

Baseline interview

02

Revision interview

03

Validation interview

Live conversation

Language becomes behavior.

Two paired conversations compare Sema before and after iteration. In each pair, the screen recording shows how Sema reads and replies to language, while the phone recording shows the servo movement produced at the same moment.

Initial conversation

Screen conversationScreen
Servo responsePhone

After iteration

Screen conversationScreen
Servo responsePhone

05 · Future form

From mechanism to presence.

Today, SemaForm exists as a set of exposed servos. The next stage is to give it a perceptible body: a screen that reveals how it interprets language, a physical volume that makes motion readable, and a tactile surface layer that can stretch, fold, or ripple. The goal is not to disguise the mechanism as a character, but to explore how an AI tool might develop a material presence of its own.

Bark Atlas

树木的皮肤档案 · Tree Skin Archive

From close observation of bark surfaces to an interactive system for tracing how texture can become growth.

Open live prototype

Concept

Reading growth through the skin of a tree.

If bark is a continuously written archive, what can we read from its surface? Bark Atlas begins with close observation: the direction of grooves, the spacing of cracks, the deflection around knots, and the separation or overlap of outer layers. These irregular textures become an entry point for understanding the relationship between growth and time.

Field observation

Twenty surfaces become an initial archive.

Twenty close-up bark photographs form the first sample set. They are not treated as decorative references, but as records of direction, interval, interruption, density, and layering that can be compared before becoming generative rules.

Source archive20 grayscale surfaces
Black and white bark sample 01
01
Black and white bark sample 02
02
Black and white bark sample 03
03
Black and white bark sample 04
04
Black and white bark sample 05
05
Black and white bark sample 06
06
Black and white bark sample 07
07
Black and white bark sample 08
08
Black and white bark sample 09
09
Black and white bark sample 10
10
Black and white bark sample 11
11
Black and white bark sample 12
12
Black and white bark sample 13
13
Black and white bark sample 14
14
Black and white bark sample 15
15
Black and white bark sample 16
16
Black and white bark sample 17
17
Black and white bark sample 18
18
Black and white bark sample 19
19
Black and white bark sample 20
20
Detected archive20 image-derived growth traces
Darkened bark sample 01 with image-derived growth traces
01
Darkened bark sample 02 with image-derived growth traces
02
Darkened bark sample 03 with image-derived growth traces
03
Darkened bark sample 04 with image-derived growth traces
04
Darkened bark sample 05 with image-derived growth traces
05
Darkened bark sample 06 with image-derived growth traces
06
Darkened bark sample 07 with image-derived growth traces
07
Darkened bark sample 08 with image-derived growth traces
08
Darkened bark sample 09 with image-derived growth traces
09
Darkened bark sample 10 with image-derived growth traces
10
Darkened bark sample 11 with image-derived growth traces
11
Darkened bark sample 12 with image-derived growth traces
12
Darkened bark sample 13 with image-derived growth traces
13
Darkened bark sample 14 with image-derived growth traces
14
Darkened bark sample 15 with image-derived growth traces
15
Darkened bark sample 16 with image-derived growth traces
16
Darkened bark sample 17 with image-derived growth traces
17
Darkened bark sample 18 with image-derived growth traces
18
Darkened bark sample 19 with image-derived growth traces
19
Darkened bark sample 20 with image-derived growth traces
20
Black-and-white bark texture used for pattern analysis

Texture analysis

The surface is read as behavior, not ornament.

The analysis isolates visual relationships that can influence a growth grammar. A highlighted feature in the source image is paired with its corresponding segment on the digital tree, making the translation from evidence to form visible rather than hiding it inside the system.

01

Groove direction

Sets the dominant orientation of extension.

02

Crack interval

Becomes spacing and branching rhythm.

03

Knot deflection

Introduces local turns and interruptions.

04

Layer separation

Creates overlap, peeling, and secondary growth.

Generative workflow

From a photographed trace to a possible tree.

The workflow keeps the original texture visible while translating it into a rule set. Environmental controls then modify how those rules unfold, allowing one archive to produce multiple trajectories without presenting the result as a biological forecast.

01

Photograph

Upload one bark surface.

02

Detect

Locate edges, directions, and interruptions.

03

Translate

Convert features into growth rules.

04

Modify

Apply environmental design parameters.

05

Grow

Render and compare a 3D trajectory.

Interactive simulation

Environmental conditions reshape the same archive.

Users adjust moisture, temperature, light, wind, and soil type to watch the initial texture stretch, extend, and branch across a three-dimensional tree body. Corresponding highlights link the detected source edge to the form it influences.

Growth conditions

+ Upload bark photograph
Moisture68%
Temperature21°C
Light74%
Wind32%
Soil structureLoam
Visible correspondence

Source features and generated segments remain linked through shared highlights.

Comparable outcomes

The same texture can be replayed under different parameter settings.

A designed model

The controls guide a generative experiment; they do not predict biological growth.

Current boundary & future archive

From isolated surfaces to records that can be followed over time.

Bark Atlas is currently a nature-inspired generative experiment: environmental conditions influence evolution through design-set rules. The next step is to connect each surface to species, age, site conditions, and repeated observations so that isolated images can become comparable, readable, and traceable growth records.

01Species and age
02Site and environmental history
03Repeated seasonal observation
04Comparable growth trajectories

Selected product, spatial, and environmental design projects.

PROJECTS

Good Days interface displayed on a tablet and phone beside a black and white Schnauzer

Good Days: AI Agent UX/UI

A long-term health companion designed for urban dog families.

Aera Urban Plant Exposure interface designs with botanical environmental information and sign-in screens

Urban Plant Exposure

A context-aware platform that helps sensitive urban residents understand and respond to plant-related environmental exposure.

A square tangible sand terrain installation with blue-white projected contour lines in a quiet art gallery

03 · XR / tangible interaction

XR SandBox — Tangible Terrain

A real-time terrain system connecting Unity to a physical servo array.

Full-age Music Educational Platform

A learning experience designed to support musical growth across different ages.

↗

Scroll to explore →

Good Days

More good days, remembered together.

An AI health companion that grows with your dog, turning everyday moments into a meaningful, long-term picture of their well-being. It remembers what matters, connects changes over time, and helps you care for more good days together.

A dog resting comfortably on a green sofa in warm natural light

A conversational product concept for urban dog families, designed around everyday care and the moments that call for closer attention.

RoleUX/UI Designer
TimelineFeb—Apr 2026
FocusAI Agent · Health

The product experience.

Good Days displayed on a MacBook Air, iPad and iPhone

Everyday care, connected over time.

A simple conversation lets owners log meals, activity, symptoms, and meaningful moments without completing a detailed form.

The experience brings care history, recovery check-ins, and veterinary summaries together across desktop, tablet, and mobile.

From a first hello to an ongoing conversation.

Good Days final screen: Home
01 / 04 · HomeAutomatic walkthrough · Pressing the bell.

01 · Design thinking

From fragmented moments to continuous care.

Daily care is ongoing, but health information often lives in disconnected notes, photos, messages, and reports. When something changes, owners must reconstruct the story from fragments.

Why Good Days: connecting fragmented everyday care into continuous health memory

Design opportunity

Help owners carry useful context from an ordinary day into the next care decision.

Design question

How might an AI companion make ongoing care easier without adding another demanding routine?

03 · Journey map

The lived journey of noticing change.

Follow the owner from noticing a small change to seeking advice and supporting recovery. The journey reveals where observations stop becoming useful context.

Understanding the Care Journey: everyday care, noticing change, remembering context, veterinary visits and recovery

Where care breaks down

Recall becomes difficult at transitions: a new symptom, a vet visit, or a change in treatment. Small observations are easily lost between these moments.

User needs

Owners care for their dogs as family. They need low-effort tracking, a view of physical and emotional well-being, and accessible records that help them explain changes to their vet.

02 · User research

Understanding care, uncertainty, and trust.

The framework organizes care into four connected dimensions: Daily Nutrition, Physical Health, Companionship, and Dog’s Archives. These categories give each observation a clear place without separating it from the wider story.

Information framework: everyday care and scattered inputs become continuous health memoryProduct structure: Daily Nutrition, Physical Health, Companionship and Dog’s Archives

Keep capture simple

Use natural conversation as the entry point. Ask focused follow-up questions only when more context is useful.

Connect, with owner control

Link observations across the four dimensions, show the context behind a summary, and let owners review and correct what is remembered.

04 · Workflow

Turning observations into action.

The task flow moves from sharing an observation to clarifying its context, reviewing the response, and saving a useful next step or visit summary.

Good Days workflow: notice a change, check the overview, share an update, clarify context, receive insights, save to memory and revisit later

05 · Framework

How the conversation becomes a record.

This layer defines how the conversation and the saved record work together: what is captured, what needs confirmation, and what can be revisited later.

From conversation to structured records: identify information, extract events, classify them, and connect the health memory

Conversation ↔ reviewed record

A conversation captures context; the owner confirms important details before they enter the record. Later exchanges can refer back to that history, while summaries separate reported facts from interpretation.

06 · Low-fi to Hi-fi

Making the relationship feel clear and calm.

Low-fidelity work establishes hierarchy and navigation. High-fidelity design refines legibility, tone, and feedback so logging a small observation feels approachable.

Low fidelityStructure

01 · Listen & respond
01 · Listen & respond
02 · Continue with context
02 · Continue with context
03 · Conversation insights after 10 minutes
03 · Conversation insights after 10 minutes

The desktop wireframes keep conversation as the primary experience. As the exchange develops, a secondary panel reveals extracted details, four care dimensions, and a connected timeline while the chat remains available. Owners can review and correct the draft insights.

High fidelityExperience

Good Days high fidelity screen 1: Listening & responding
~2 minutesListening & responding
Good Days high fidelity screen 2: Remembering the exchange
A little laterRemembering the exchange
Good Days high fidelity screen 3: Reviewing shared details
~10 minutesReviewing shared details
Good Days high fidelity screen 4: Connecting daily care
A day of memoriesConnecting daily care

Illustrative stages: conversation becomes reviewed memories, then a connected view of daily care. Timing varies with what the owner shares.

Design System

A shared visual language for conversation, memory, and everyday care. Organized through foundations, semantic tokens, components, and interaction states.

Initial specifications for refinement. These are Good Days tokens, not default Material values; generated screens are visual references rather than measured source files.

Color roles

Primary / on primary#173B33

Brand, user bubbles and actions · paired with #FFFCF5

Canvas#FFFCF5

Warm reading surface

Agent surface#EDF2E9

Replies and gentle grouping

Secondary#AEBFAB

Supporting controls and accents

Warm accent#F8C557

Illustration only; dark text on top

Carrot accent#F2674B

Dog collar and expressive details

Body / muted#173B33 / #52665D

Primary text / secondary text

Outline#D9E2DB

Soft boundaries and separators

Status roles: confirmed #246345; needs detail #765200; error #A93632. Always pair color with a readable label; never use color alone.

Typography

A little more understood.

Small moments become a lasting memory.

From today’s conversation · Edit

Helvetica Neue Regular · Helvetica · Arial · sans-serif

Page title 28/36 · section title 20/28 · card title 16/24 · body 16/24 · control label 14/20 · metadata 12/18. Values are font size / line height in px.

Regular 400 for reading; medium 500 for labels; semibold 600 for hierarchy. Keep the supplied handwritten Good Days wordmark as artwork, separate from UI text.

Layout, spacing & shape

4px
8px
12px
16px
24px
32px
48px
64px

Desktop reference 1440 × 810. Conversation uses 84% of the viewport, with 8% side gutters; bubbles remain content-sized, max 480px. On smaller screens use 24px tablet and 16px mobile gutters.

Bubble padding 12 × 16px · card padding 24px · icon-to-label gap 8px · card gap 16px · section gap 48px. Radius: bubble/card 16px; input/button fully rounded.

Composer: max 720px, minimum height 56px. Icons 20px; avatar 28px; send glyph 18px inside a 32px circle and a 44px hit area. Controls use at least 44 × 44px targets.

Graphics & iconography

Good Days illustration and wordmark reference

Use the same white dog, dark-green ears and carrot collar throughout. The handwritten wordmark and soft edge foliage express warmth; keep illustrations away from reading and control areas.

Add
Send
Microphone
Archive
Health
Edit

Functional icons: 24 × 24 viewBox, rendered at 20px, 1.75px rounded strokes, consistent optical weight. Decorative illustrations have no interaction role; icon-only controls require accessible names.

Component anatomy

You ate a little less today.
About how much did I eat?

User: right aligned, primary / on-primary. Agent: left aligned, agent surface / primary. No user avatar; one consistent dog avatar for the agent.

Breakfast · Today

About half at 8 AM.

Memory card: observation, time, confirmation state and edit action. Keep unknown details pending; link back to the original conversation.

Composer: Enter sends; Shift + Enter adds a line. Empty input disables sending. Attachments have preview and removal; voice input shows an explicit recording state and stop control. This specimen demonstrates styling, not live AI or recording.

Interaction states

Default
Hover
Pressed
Focus
Selected
Disabled

Hover: an 8% dark state layer and gentle shadow change. Pressed: a 12% layer and 1px inset motion; release restores the surface. Click performs one action; prevent duplicate requests while loading.

Keyboard focus: a visible 2px primary ring with 3px offset. Selected tabs retain an underline and aria-selected state. Disabled controls use muted color, no hover response and a clear reason nearby.

Loading preserves control width and labels the pending action. Success gives inline confirmation; failure keeps entered content and offers retry. Destructive record removal requires confirmation and provides undo.

Motion: 150ms for hover/press, 200ms for card reveal; ease-out. Respect reduced-motion preferences. Keep health content legible and expose all actions through keyboard input.

Organization reference: Material Web tokens · Interaction state layers

End of case study
Aera Urban Plant Exposure product interface hero image

Product design · UX/UI · Environmental information

Urban Plant Exposure

In tune with your surroundings.

A context-aware platform helping sensitive urban residents understand and respond to plant-related environmental exposure.

Environmental information, translated into an everyday decision.

Aera brings local plant conditions, timing, and practical guidance into one calm mobile experience. Instead of asking people to interpret pollen charts or identify species, it explains what may be happening nearby, when conditions may ease, and how to adjust an activity with less uncertainty.

Aera product output across home, welcome, and sign-in screens
01

Understand the moment

See the current exposure level, the plants contributing to it, and whether conditions are increasing or easing.

02

Plan with context

Compare time, duration, and location before deciding when and where to go.

03

Respond without alarm

Receive proportionate suggestions while keeping medical diagnosis outside the product.

Why plant exposure is difficult to act on.

For sensitive urban residents, discomfort is often real before its cause is clear. Existing information is fragmented across weather, pollen, air quality, maps, and personal memory. The challenge was not adding another data dashboard, but helping someone understand a changing situation quickly enough to make a useful decision.

13 / 17

participants did not proactively check environmental exposure before going outside.

Weather first

was the familiar entry point, even when weather alone could not explain the experience.

Accuracy

was the most frequently prioritized quality when people evaluated environmental guidance.

An explanation platform—not a diagnosis tool.

Research shifted the concept away from predicting symptoms or naming a medical condition. The product focuses on environmental interpretation: what is changing nearby, how long it may last, and which everyday adjustments remain realistic.

01

Explain before advising

Show the environmental reason behind a suggestion so guidance feels grounded rather than generic.

02

Design for key moments

Support planning and in-progress decisions instead of requiring people to build a daily checking habit.

03

Keep agency visible

Offer options with clear trade-offs; the user decides whether a change is worth the time and effort.

P04Anonymous participant
Verified response
“I can feel something is wrong before I know what is in the air. By the time I search, I’m already outside.”
Daily commuter · edited for length
P09Anonymous participant
Verified response
“Weather tells me if it will rain, but not which plants are active along my route.”
Urban resident · edited for length
P12Anonymous participant
Verified response
“Pollen, weather, and maps are all separate. I’m never sure which source I should trust.”
Sensitive resident · edited for length
P15Anonymous participant
Verified response
“I would change my route for five minutes—not fifteen—unless I knew the exposure was actually high.”
Routine walker · edited for length
P17Anonymous participant
Verified response
“I don’t need an app to diagnose me. I need to understand what may be happening nearby and how long it could last.”
Park visitor · edited for length

Designed for the moments when the cause is unclear.

Aera is designed primarily for sensitive urban residents who experience recurring discomfort but cannot easily connect it to a place, plant, or moment in time. The product supports decisions before, during, and after an outdoor activity without asking people to interpret environmental datasets themselves.

Three use moments
01
Before exposure

Should I change my plan?

Compare nearby conditions, time windows, route options, and the effort required to make a change.

02
During exposure

What is happening around me?

Reopen the active session to understand nearby plant factors, current intensity, likely duration, and lower-exposure options.

03
After exposure

What should I remember?

Save the environmental context and a brief personal check-in so useful patterns can emerge over time without implying causation.

Core task flow
  1. Check conditions
  2. Plan activity
  3. Start trip
  4. Reopen during
  5. Recheck
  6. Save context

One system across the full exposure journey.

The sitemap organizes the product around five stable destinations—Today, Plan, During Activity, Records, and Me—while preserving a continuous path from understanding current conditions to planning, receiving in-context support, and reflecting afterward.

From environmental signals to a readable answer.

The information framework combines regional measurements with local plant context, seasonal timing, weather, and the user's current activity. The interface progressively reveals only what supports the next decision.

01

Conditions

Pollen, air, weather, season

02

Local context

Plant species, place, time

03

Interpretation

Level, trend, duration

04

Action

Route, timing, protection

The final experience keeps complexity behind the interface.

The visual system uses a restrained green palette, soft environmental imagery, and progressive disclosure. The primary screen gives one legible condition summary; deeper views reveal maps, plant factors, timing, and planning tools only when needed.

Aera interface system showing welcome, sign-in, and environmental condition screens
01

One clear condition

The home screen leads with a readable level and trend instead of competing charts.

02

Evidence close to guidance

Plant factors and time windows sit beside recommendations, making the reasoning inspectable.

03

An active-session bridge

Users can leave and return during an activity without rebuilding the environmental context.

Low-fi exploration

Structure before visual language.

The first wireframes tested whether a user could understand the current condition, make a plan, and return to an active session without learning a complex environmental dashboard.

00

Open the app

A short promise introduces Aera before sign-in. The entry flow keeps the first decision simple: begin, continue with an account, or create one.

Aera low-fidelity opening screen
Aera low-fidelity sign-in screen
01

Check condition

The home screen turns current environmental conditions into one readable status and one clear next action, without asking users to interpret a dashboard.

Aera low-fidelity current condition screen
02

Plan an activity

The planning flow asks only for the context that changes a recommendation—place, time, route, and flexibility—then lets users compare options and confirm a practical plan.

Aera low-fidelity activity planning form
Aera low-fidelity plan options screen
Aera low-fidelity route and exposure screen
Aera low-fidelity plan confirmation screen
03

Reopen during exposure

When users return during an activity, Aera preserves the active context. Nearby sources, expected duration, protective guidance, and the session record stay connected instead of restarting the journey.

Aera low-fidelity active condition screen
Aera low-fidelity nearby sources screen
Aera low-fidelity exposure duration screen
Aera low-fidelity protection guidance screen
Aera low-fidelity activity records screen
04

Build a personal pattern

Repeated check-ins become an understandable personal pattern. Users can review what Aera noticed, connect it to recent activity, and use that context when planning again.

Aera low-fidelity activity records screen
Aera low-fidelity personal pattern screen

A calm interface for uncertain moments.

The high-fidelity system translates the wireframe hierarchy into a softer environmental experience. Rounded typography, restrained color, and generous spacing keep the interface approachable while evidence and timing remain easy to inspect.

Aera high-fidelity mobile screens showing onboarding, sign in, and current plant exposure
Clear hierarchy

Condition, trend, and duration appear before supporting detail.

Visible reasoning

Plant factors and timing stay close to the guidance they support.

Continuous context

The same visual language carries the user from planning into an active session.

A visual language rooted in movement and ecology.

The identity balances environmental credibility with an everyday, non-clinical tone. Its system is built from a compact logo, a calm natural palette, rounded typography, and shape rules that remain legible at mobile scale.

Aera logo combining a flowing path, leaf form, airborne particles, and the Aera wordmark
Indicative construction study · the clear-space unit is derived from the lowercase wordmark height.

Symbol meaning

  • The leaf represents local plant conditions.
  • The flowing base suggests a route through the city.
  • The airborne dots make invisible environmental signals perceptible.
  • Open negative space keeps the identity calm rather than clinical.

Color system

Aera Forest#284C3E
Warm Air#F4F1E8
Soft Sage#D8E2D4
Pollen Signal#E1B84D

Type & shape

SF Pro Rounded

Rounded terminals soften technical information without reducing clarity. The interface uses 8, 16, and fully rounded radii to distinguish information, cards, and primary actions.

What I would validate next.

The next round would test whether people can distinguish exposure information from medical advice, understand why a recommendation appears, and decide on a route or timing change without feeling pushed into unnecessary avoidance.

  • Comprehension of level, trend, and duration
  • Trust in the explanation behind guidance
  • Acceptable effort for route and timing changes

XR SandBox — Tangible Terrain

A real-time terrain system connecting Unity to a physical servo array.

Project story coming next.

Full-age Music Educational Platform

A learning experience designed to support musical growth across different ages.

Project story coming next.

Contact