Bringing modern web design & no-code to life
Fryer UI: Easy Kitchen Operation
Fryr is the next-generation automated frying solution that meets the needs and speeds of your kitchen. It combines robotics and AI to give you increased throughput, consistency, quality and taste – saving you time, reducing wastage and ensuring product is always available exactly when you need it.
The project involves the styling of a UI for Fryr. This will be the primary interface that users will interact with to control Fryr as well as receive information and commands from the system. The format is a landscape iPad pro 12.9”, and includes various screens as well as dialog box elements.
Note: I can share full Figma working file for reference during the interview process.
.jpg)
Understanding user needs: Kitchens are hectic, messy, stressful, and full of demanding customers. The Fryr UI needs to support users in an easy operation of Fryr. Not one person will use the UI in a day, or even in a 15 minute window. Multiple people might be interacting with it all the time so consideration should be taken to provide a good level of feedback to everyone regardless of whether they were the one previously interacting with it.
Wireframes and User flows
Designing an easy experience
The wireframes in the Figma file serve as foundation – outlining the essential functions I need to incorporate. As I progress from concept to creation, the developed UI concepts remain true to these wireframes, ensuring continuity and clarity throughout the design process. However, there's also room for creativity – I have the freedom to explore different layouts, structures, and visual elements such as icons, fonts, and colours, adding a personal touch to the interface.
Key design elements
Foundations and final designs
As I delved into the UI design, keeping in mind the specifics, workflows, target users, and objectives, I started brainstorming different concepts. When I looked at the color choices, I noticed that a few of the Karakuri brand colors were too alike, making it hard to see things clearly. To tackle this, I suggest using red to signal errors – that way, they'll grab attention right away. Additionally, we could incorporate purple as a highlight color, such as for manual mode, to make certain parts more noticeable and visually appealing.
I carefully chose colours to draw attention precisely where needed and create a mental connection between colours and functions. The primary colour palette comprises green, blue, and red, injecting a bold usability factor. These colours are strategically employed across the product to naturally guide the user's gaze and emphasize crucial elements in a logical sequence.
Final User Interface Designs & Prototype
Following three rounds of initial concept iterations and explorations, we have settled on the ultimate design. This user interface (UI) is crafted to proactively prevent user errors, ensure accessibility, and facilitate a swift grasp of machine operations. The design enhances these aspects and the core functionality, amplifying their importance rather than diminishing or adding complexity to them.
Design System
Creating Consistency
After the final design was approved, the next step was to provide the developer with a detailed design system that included precise component specifications. To achieve this, I created a custom library specifically tailored for this project. This streamlined the developer's work process and ensured everything was well-organized. With this resource at hand, the developer seamlessly integrated the coded components using React, laying the groundwork for future use and smooth implementation.
