The challenge.
Representing an appliance’s actions and states clearly, from programme selection to error messages and completion.
My contribution.
I developed the interface in HTML, CSS and JavaScript from Alicia Aurecchia’s design. The project includes weight and programme selection, settings, progress and status messages.
- Web interface programming.
- Implementation of screens and interaction states.
What we built.
A web prototype for exploring the screens and interaction flow, with code on GitHub. It is not presented as an accessibility certification.
Intermediate states and error messages are part of the experience too.
Development decisions.
Translate the appliance into a clear sequence
The interface organises load selection, programmes, settings, progress and completion. Each screen needs to give context to the next: what was selected, which action is available and what is happening. My work turned the visual design into states and interactions using HTML, CSS and JavaScript.
Respond to a simulation’s state
The repository includes an appliance emulator with sensors and actuators for the door, water, temperature, detergent and drum. The interface listens for changes and coordinates operations such as filling, draining and heating. The prototype explores how visible controls relate to state that changes over time.
Make room for progress and errors
The gallery documents programme selection, operation, notifications and completion. These states explain whether the appliance is ready, running or needs attention. The exercise’s value lies in developing the complete flow from Alicia Aurecchia’s design.
The project in use.
- Select the load and programme, reviewing each screen’s options before starting the process.
- Follow washing or drying progress and observe how information changes during the simulated cycle.
- Compare notifications and completion with the initial screens: each state should communicate a clear situation and action.
What to explore.
A way into the project through its screens, supporting material and, where available, its source code.
- Continuity between programme selection, confirmation and operation.
- Interface updates when the emulator’s sensors change.
- Status messages and the visual hierarchy of available actions.