Project Overview
This project focused on designing the user interfaces and interactions for controlling external heaters—primarily used in outdoor or camping environments. The scope included two key components:
- A minimal interface for a 128 × 64 pixel monochrome OLED screen integrated into the heater hardware.
- A companion mobile app enabling users to control and configure both air and water heaters remotely.
My Contributions
As the lead UX/UI Designer and Figma expert, I worked closely with a developer and a subject matter expert to design a cohesive, scalable design language and system for both the OLED interface and the mobile app. The goal was to ensure intuitive usability, despite the vastly different constraints and capabilities of the two platforms.
OLED Deisplay
Designing the OLED display consited of 2 phases
Designing for the OLED display required navigating strict limitations: a single-color, low-resolution screen and minimal user input via a physical knob (with turn, click, and double-click functions). My work included:
Iconography & Layout Design: Created a custom set of icons, symbols, and textual elements optimized for legibility at 128 × 64 pixels.
Interaction Design & Screen Flow: Mapped out the full screen flow and user interaction model, clearly documenting how users could navigate menus using physical inputs. This ensured consistent and discoverable behavior across all menu levels.
Screen Flow in Figma
Mobile App
The mobile app was designed to control multiple heater units—both air and water—through direct commands or scheduled programs. Key features included:
The mobile app was designed to control multiple heater units—both air and water—through direct commands or scheduled programs. Key features included:
Multi-Device Management: Designed intuitive navigation and controls for managing multiple connected devices from a single app.
Manual & Scheduled & Scheduled Control: Developed interfaces for real-time control (on/off, temperature settings) and for creating time-based programs to automate heater operation.
Light & Dark Theme Support: Implemented a flexible color system in Figma to support both light and dark themes. By carefully organizing color styles into light and dark palettes and leveraging Figma’s “modes” functionality, I ensured visual consistency and easy theme switching.
Figma artboards for development
Outcome
The result was a unified, user-centered interface system tailored to vastly different devices—ensuring ease of use whether users interacted via a basic hardware display or a fully featured mobile app.