01
feature sections
02
control settings
03
modes
04
product
Scoping the UX through AI enabled wireframing.
The main challenge was how to organise a vast number of control settings (1600 in total) in a simple and intuitive interface for a wide range of users, often not technology experts, and usually in a rush and under pressure. I often use AI tools to facilitate initial wireframes for content and mapping the experience direction. I then use these as prompts for further design development. These simple wireframes were generated using Lovable.dev. The initial explorations of functionality and experience were then user tested with working prototypes to understand where we could improve understanding.
/ Home Screen
/ AV Controls
/ Lighting Zones
/ System Overview
It was essential to set base standards when designing the interface, so for this project I created a Design System for the key UI elements required.
/ Foundations and building blocks
Comprehensive colour system
Light and Dark modes
Icon system for signposting and navigation
UI components for - buttons, navigation and controls
Shown here are examples of how the initial AI / UX wireframes and control model were translated into the final product.
(Drag left to right below to see the transition from ideas to execution)
The result was a clean, modern and scalable UI and design system that would function day-to-day for a wide range of users with different skill levels. It was also developed to work in Light/Dark mode for different environmental conditions, where a dark mode would be preferable, for instance - if the room is blacked out and a presentation is underway, using dark mode to alter room conditions would be preferable to minimise light interference to the presenter.
The HubX project was quite different to many product design assignments I am given. It was a digital product, but primarily a physical one, that controlled environmental conditions through a usable interface.
The result was a simple, and intuitive interface, that aligned to user needs, delivering the end product.
