/ Hardware UX

Mobile App for Connected Scent-Emitting Hardware

Turning an evolving connected-hardware concept into a coherent mobile experience for CES 2023

A broad view of the mobile app screens, timeline controls, scent settings, and modal interactions created for the CES demo.

Designed the mobile product experience for a connected scent-emitting hardware system, bringing evolving features, complex timeline interactions, and existing interface work into a coherent iOS MVP for CES 2023. The work gave the team a more consistent interface and clearer interaction model for controlling scent alongside media, while giving the developer reusable patterns and detailed interaction guidance for implementation.

Project details

Client context: Fair Worlds client project
Platform: Mobile app, iOS MVP
Focus: Connected hardware, mobile UX, timeline interactions
Tools: Figma, Material Design references
Role: UX and product designer

/ 01

Challenge

The product needed a usable mobile interface for controlling scent-emitting hardware in time for a CES 2023 demonstration. Many of the features, flows, and MVP priorities were still evolving while design and development were already underway. The challenge was not simply producing screens quickly. The app needed a coherent interaction model for unfamiliar hardware behavior, complex timeline controls, and changing features, while remaining practical to implement on deadline.

Key challenges included:

Defining MVP screens while features were still changing.
Designing complex timeline-based interactions.
Keeping the interface consistent across new and existing screens.
Supporting implementation of nuanced interaction details.
Balancing speed, clarity, and demo readiness.

Core mobile screens for browsing scenes, managing saved scenes, and creating scent experiences.

/ 02

Role

I joined after some initial screens had been created, but many features, flows, and interface decisions were still unresolved. I worked closely with the project's developer throughout implementation, including direct collaboration on nuanced app interactions and timeline behavior.

My work included:

Designing new screens.
Reworking existing screens for consistency.
Creating reusable components and a simple design system.
Designing menus, popups, icons, and timeline controls.
Creating interactive prototypes to compare flows and refine interactions.
Working directly with the developer to clarify interaction behavior during implementation.
Presenting design progress in daily standups and critique sessions.

/ 03

Approach

Created consistency during feature change

Because features and design direction were shifting, I created a simple component system that gave the evolving MVP a more stable visual and interaction foundation. New screens and changing features could reuse established patterns instead of introducing another one-off solution. This made it easier to update styles, add screens, compare options, and keep the product coherent as the scope changed.

Scent creation and editing screens used consistent controls, color-coded values, and reusable patterns for complex input.

Prototyped interaction options

Interactive prototypes turned unresolved interaction questions into flows that could be reviewed and compared. They were especially useful for working through information architecture, menus, modal behavior, media selection, and the timeline interactions that connected scent events to audio and video.

Timeline and media selection screens helped clarify how video, audio, and scent elements would be added and controlled.

Designed for implementation

I organized final designs in Figma so the developer could work from a consistent set of screens, components, states, and interaction details. For nuanced behavior, particularly timeline controls, I worked directly with him to clarify how interactions should respond rather than relying on static screens alone.

Modal and edge-case states supported saving, deleting, discarding changes, and adding scent details during scene creation.

Improved accessibility and visual clarity

I followed Material Design guidance where useful, but adjusted colors and contrast where needed to make the interface clearer and more readable. This helped keep the MVP visually consistent while improving legibility across controls, settings, and interaction states.

Settings screens supported account management, demo reset behavior, and scent tube level visibility.

/ 04

Outcome

The project turned a changing set of features and early interface concepts into a coherent mobile MVP that could be implemented and demonstrated with the connected scent hardware at CES 2023.

The final work provided a consistent set of screens, reusable components, defined interface states, and interaction guidance for some of the product's most complex behavior, including timeline-based control of scent alongside media.

The component system also created a more stable foundation for continued product development beyond the immediate demo, rather than leaving the team with a collection of disconnected event-specific screens.

Most importantly, the app gave the hardware a usable interface through which people could create, control, and understand scent-based experiences. For an unfamiliar interaction model, the mobile experience served as the bridge between the underlying hardware capabilities and what a user could actually do with them.

App walkthrough

A walkthrough video shows the app flow, timeline interaction, scent creation, and related interface states.

Demo context

A public demo clip shows the scent app and hardware being discussed in the context of the CES presentation.

What this work demonstrates

This work demonstrates the ability to bring structure to an evolving product, define interactions for unfamiliar connected hardware, and turn complex behavior into an interface that can be understood and implemented. It required product judgment under deadline pressure, interaction design for emerging behaviors, reusable system thinking, prototyping, and close collaboration with a developer as the MVP moved toward a public demonstration.

Need help clarifying a complex product or connected hardware experience?

Designing Realities can help define flows, improve interface clarity, and support product teams moving quickly.

Start a conversation