Deliverable:
Electronic Interface
Service:
Research, Branding, UXUI, Usability Test
Tool:
Figma, Adobe Creative Suite
When:
Developed in 2021
Objectives
Designing for a circular 5.5” touchscreen to simulate physical knobs interface.
Physical Command Knobs: Incorporating 3 knobs as the primary input method added complexity to maintain a seamless and tactile user experience.
Balancing visual clarity and functionality for quick decision-making during roasting.
Iterating designs based on usability tests and adapting to hardware constraints.
Contributions
[Two Designers]
Research: Studied coffee roasting workflows, specialty coffee trends, and user expectations.
UX/UI Design: Developed workflows, wireframes, and high-fidelity designs optimized for circular displays.
Icon Design: Created visual elements for clarity and ease of use.
Usability Testing: Tested designs with target user; roasters, baristas, and business owners and refined designs based on feedback.
Collaboration: Worked closely with a senior designer for mentorship and feedback throughout the process.
Work Process
Research & Discovery
Explored the coffee roasting process, taste profiles, and specialty coffee trends to understand user expectations.
Studied existing roasting machines and their interfaces to identify gaps and opportunities for improvement.
Conducted interviews with target users; roasters, baristas, and business owners to gather insights and validate design decisions.
As someone new to the coffee world, this research phase was eye-opening and provided a strong foundation for the design approach.
User journey
Mapped out the end-to-end process of the AiO machine, separated into 4 main stages; Pre-heating, Roasting, Cooling and Post-Cooling in step by step. Iterated workflows multiple times to simplify navigation and optimize usability for first-time and experienced users.
Workflow
Screen Flow
Initial Design
Visual Design
We explored multiple layout options to define the visual tone and design direction. Using detailed drafts, we iterated until the final design aligned with the machine’s modern and playful character.
1st Draft – Focused on exploring design layouts and visual moods.
2nd Draft – Created more design options after receiving feedback and also setting a direction for few ways we can go with using knobs and touch screen.
Design direction
Defined the aesthetic approach, drawing inspiration from AiO’s futuristic design and character. Focused on balancing functionality with visual appeal to this final visual style and mood.
Wireframes
We developed detailed wireframes for each page, focusing on usability and visual consistency. Designs included new custom icons and layouts tailored for first-time users, featuring both knob-guided screens and non-guided options to accommodate different preferences.
1st Revision – Adjusted layouts based on usability feedback to address user needs and improve clarity.
2nd Revision – Made final refinements for enhanced interaction flow and visual alignment.
Usability Testing
Conducted usability tests with three target groups—business owners, roasting staff, and baristas.
Key Findings:
• Some users misinterpreted steps in the flow, highlighting areas for improvement.
• Testing revealed opportunities for additional features to improve the experience.
Adjustments:
Refined screens and interactions based on insights gathered during testing.
key takeways
Learning Through Mentorship: Collaborating with a senior designer provided insights into refining designs and overcoming technical limitations.
Iterative Design Process: Testing and revising designs based on user feedback ensured usability and responsiveness.
Designing Within Constraints: Adapting designs to fit hardware constraints taught creative problem-solving for form and function.