Deliverable:
Desktop App
Service:
UXUI, Design system, Research
Tool:
Figma, Adobe Creative Suite
When:
Developed in 2022
objectives
Redesign the app’s look and feel by creating visual consistency—refining spacing, radius, mood and tone, color schemes, font sizes, and reorganizing the information architecture for better usability.
CONTRIBUTIONS
SAMSIS Design Studio [A team of 3 Designers]
Design Team Collaboration: Worked as a junior designer in a team of three.
Design Direction & UI Options: Created design directions and multiple UI concepts for review.
Custom Icons: Created and customized icons to match the design style.
UI Design: Designed UI pages and ensured consistency across layouts.
Handoff Design: Reviewed and adjusted spacing, fonts, and colors for polished delivery.
Work Process
UX Research
Product study is a crucial starting point, focusing on understanding the product’s workflow and its core functionality, asked for clarifications.
Gathered key information and user requirements from the client, analysed user behaviour to ensure designs align with features and functionality.
Studied touchpoint of how the app integrates with the hardware, analyzing user interactions and pain points to inform design decisions.
Product's Screen flows
Understanding the workflow and key touchpoints of the application, as well as the machines it will integrate with.
Visual Design and Layout Structure
Created initial drafts exploring colors, navigation styles, and layouts to test mood and tone.
Incorporated brand colors and kept the design application-focused, based on client feedback.
After a few more rounds of design draft and redefine the look and feel
Design Direction
Light and Dark Modes
Beyond the branding colour scheme, the system allows for customisable themes and offers two additional modes to suit different user preferences: Light and Dark Modes. Clients requested these modes to retain their existing colours; hints of green in the Light Mode and a touch of branding purple in the Dark Mode.
Wireframes
Redesigned and refined wireframes, ensuring a user-friendly structure and both Minimum and maximum screen resolution size.
Iterated designs based on feedback loops and collaborated with developers to address constraints.
Final Delivery
We prepared design handoffs, including Design system, detailed UI specifications, High-fidelity and provided supports during the development phase to resolve issues and refine visual details.
Features
Roast History
Track and log roasting sessions with detailed data. Manage filters, sorting options, and column interactions for efficient data organization.
Active Roast
Real-time monitoring of roasting profiles and temperature adjustments. Edit profiles, log details, and track roast development visually.
Post Roast
Review roast logs, analyze performance metrics, and manage saved profiles. Playback and edit roast data for adjustments and improvements.
Bean Management
Maintain an organized inventory of coffee beans. Sync data with Roast World and manage archived and active beans.
Calendar
Schedule and view roasting sessions in day, week, or month formats. Seamlessly integrate tasks and timelines for planning roasts.
Recipe List
Create new recipes, save roasted recipes, and modify roasting recipes, set on filters. Design two-column layouts for expanded and collapsed views.
KEY TAKEAWAYS
Communication and client management: Being the main point of contact taught me how to gather requirements, clarify ideas, and keep communication clear and focused.
Collaboration and teamwork: Working with experienced designers helped me refine my process, balance ideas, and incorporate feedback effectively.
Design systems and consistency: I learned to build cohesive design systems, focusing on visual consistency and scalability.
Iterative design approach: Testing and refining designs based on feedback taught me to adapt quickly while prioritising usability.
Growth as a designer: This early project pushed me to take ownership, problem-solve, and stay flexible, shaping how I approach design today.
