RoastWorld
Developed by Aillio Technology, is an essential online platform designed for specialty coffee roasters. It integrates closely with RoasTime, Aillio’s real-time roast tracking software, to provide a seamless workflow. Through RoastWorld, users can manage and analyse roasting profiles, track inventory, and share experiences with a vibrant community. Together, RoastWorld and RoasTime deliver a powerful, data-driven ecosystem that supports both beginners and expert roasters in refining their craft.
Deliverable:
Website
Service:
UXUI, Design system
Tool:
Figma, Adobe Creative Suite
When:
Developed in 2024
objectives
To do a minor rebranding and redesign overall look of the RoastWorld platform and improving usability, scalability, and deepening its integration with RoasTime for enhanced data management and workflow efficiency, while aligning the overall design with Aillio Technology’s branding.
CONTRIBUTIONS
SAMSIS Design Studio [A team of 4 designers]
Rebranding Design: Collaborated on a minor rebranding effort, including logo refinement and color palette updates, to ensure consistency across the platform.
UX/UI Design: define key user flows, wireframes, redesign UI to enhance core features, including roast profile tracking, inventory management, and community engagement.
Team Collaboration: Coordinated with a team of three designers, delegating tasks, providing briefs, and reviewing work to maintain quality and coherence.
Lead Designer: Led the second phase of the redesign, briefed and overseed a junior designer, provided hands-on support when required, and reviewed and refined their work to ensure quality before handoff.
work Process
The entire process was divided into three key phases: Visual Design, Website Design, and an Extended Phase. The extended phase involved outsourcing junior designer, where I took on a lead role, overseeing and supporting the work to maintain design quality and consistency.
visual Design
Brand Study
Studied Aillio’s corporate identity and RoasTime app to ensure visual alignment with the parent brand while refreshing RoastWorld’s look.
Moodboard & inspirations
Collected references and created a mood board with design directions, focusing on modern yet approachable visuals.
Draft Design
Explored new logos, developed early concepts to test visuals and explore design ideas.
Design Direction
Crafted a refined logo and updated colour schemes to ensure consistency across the platform
Logo
Website design
Product Study
Studied the existing platform’s features and workflows, focusing on its technical requirements and user expectations. Asked detailed questions to understand functionalities, especially inventory tracking and recipe sharing.
Planning & Structure
Mapped out user flows and reorganised information architecture to improve clarity and navigation. Identified opportunities to simplify workflows for a better user experience. Seek out for clarifications about the product and users from client.
Draft Design
Design Direction
Established guidelines for a cohesive and visually engaging user interface The Option B was Chosen
Design System
Built a scalable design system, including reusable components, typography, colour palettes, and UI patterns, ensuring platform-wide consistency and easy future updates.
High-Fidelity Wireframing
Created layouts and high-fidelity UIs without prototyping, instead using feedback from stakeholders and the team to make iterative refinements. Developed visual consistency across features, ensuring scalability for future updates.
Revise and HandOff
Divided work among 3 designers, assigning tasks based on strengths. Briefed and reviewed junior designers’ outputs while continuing to refine some sections independently. Maintained alignment through regular meetings before handoff.
Extended Phase
Additional New Feature
Roast Analyzer and Rating Cupping - During this phase, I led the design process by collaborating with an outsourced junior designer where I shifted primarily to a leadership role; briefing, reviewing, and guiding junior designer while finalising key elements myself.
Which has not be released yet ;)
Features
Dashboard Insights
The platform features a newly designed top navigation bar that maximizes horizontal screen space, offering easier access to various sections and filters and users can now view additional data columns within the dashboard tables (Roasts and Beans), providing a more comprehensive overview of their roasting activities and history.
Roasts Profile Management
Track and analyse roast data in real-time through detailed profiles. Users can monitor key parameters and refine their roasting techniques based on previous data, integrating seamlessly with RoasTime.
Recipes
Automatically sync data with the RoasTime application, allowing users to access their roasts, recipes, and logs across devices for a smooth, integrated experience.
Beans
Inventory Management: Keep track of coffee bean inventory with features for adding, updating, and logging bean usage. This helps roasters manage their resources efficiently and plan for future roasts.
Vendors
Vendors Listing: can feature their beans and other products on the platform, making it easier for users to discover and purchase directly through search or filters. can access insights into how their products are being used, including roast data and user reviews, to help improve offerings.
User Profile
Users can update their profile with personal details, interests, and preferences. Users view, track, and organise their roasting data and profiles. Users can interact with others by sharing roast profiles, posting content, and participating in discussions. Privacy Controls: Users have control over what information they share publicly or keep private.
News
The section allows platform admins to post updates and announcements. Admins can create, edit, and publish news articles to keep users informed. Users can filter news by categories such as Platform Updates, Community News, and Educational Content.
KEY TAKEAWAYS
Leadership and Delegation – Strengthened my ability to guide and mentor junior designers while balancing hands-on contributions and project reviews.
User-Centric Approach – Learned to prioritise workflows and features based on user needs, ensuring usability for both desktop and mobile users.
Adaptability in Process – Navigated shifting priorities by focusing on quick revisions based on feedback instead of prototyping, keeping the process efficient.
Team Communication – Improved collaboration and alignment through clear briefs, regular meetings, and feedback cycles, ensuring smooth handoff to development.
UI QA Service - Working as a freelance or outsourced design team can sometimes be tricky, especially during the post-handoff phase. I’ve found that providing a UI QA service after handoff helps ensure the final product matches the intended design. It allows me to verify that all elements are implemented correctly and catch any errors or communication gaps with developers.
Additionally when communication errors do occur, I take it as a valuable learning opportunity to improve my design documentation and communication processes, helping to avoid similar issues in future projects.