Back to case studies

/ Hardware UX

Mobile App for Connected Scent-Emitting Hardware

Designing a mobile app and timeline interface for an innovative hardware demo at CES 2023

Mobile App for Connected Scent-Emitting Hardware

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

Designed mobile app screens, interaction flows, and timeline controls for a connected scent-emitting hardware product. The project moved quickly and required practical UX decisions, close developer collaboration, and a consistent interface system that could support an MVP demo for CES 2023.

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 required a mobile app that could control an innovative scent-emitting hardware device. The app needed to support a CES 2023 demo, which meant the design had to move quickly while features, flows, and MVP priorities were still being decided.

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 developers as they implemented nuanced interaction details.
  • Balancing speed, clarity, and demo readiness.
Core mobile screens for browsing scenes, managing saved scenes, and creating scent experiences.

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.

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.
  • Collaborating with developers 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 allowed the app to evolve without every new decision causing visual inconsistency. This made it easier to update styles, add screens, compare options, and keep the MVP coherent.

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

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

Prototyped interaction options

Interactive prototypes helped compare screen designs, test information architecture, and work through details like menus, popups, and timeline controls.

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

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 developers could access screens, components, and implementation details directly. I also worked closely with developers to explain interaction behavior, especially around timeline controls.

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

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.

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

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

/ 04

Outcome

The project produced a comprehensive set of Figma screens, a simple design system, and a component library that supported efficient implementation and future development.

The app was prepared for demonstration at CES 2023 and gave the team a coherent MVP interface for controlling the scent-emitting hardware.

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 shows

This project shows the ability to bring structure to a fast-moving product effort, design for connected hardware, clarify timeline-based interactions, and collaborate closely with development teams under deadline pressure.

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