Whitelabel CMS
WhiteLabel storefronts offer flexible, user-centered designs tailored for F&B businesses. Aligned with the ClapHere BrandBook system, they support variable modes—light, dark, and branded—for compatibility with diverse identities and scalable growth.
Deliverable:
Website
Service:
UXUI, Design system
Tool:
Figma, Adobe Creative Suite
When:
Created in 2023
objectives
The project was to create pages for diverse workflows and features adaptability and integration from ClapHere specific features, such as self QR ordering, online ordering, membership systems, loyalty programs, business information and locations, and visual modes (light, dark, and brand-specific)
CONTRIBUTIONS
[Sole Designer]
Research and gathered references from existing QR self-ordering platforms to establish foundational knowledge.
userflows for QR self-ordering and anticipated features like online ordering, LINE LIFF integration, and membership systems.
Created a scalable design system, incorporating variables for light, dark, and brand-specific modes.
Designed mobile-focused, user-friendly interfaces adaptable for desktop use, delivering complete UI designs for all workflows.
Work Process
Research & Planning
Studied existing F&B storefront designs and defined user journeys and mapped workflows for anticipated features, ensuring scalability and alignment with business goals. to identify industry standards and user expectations. Gathered references and insights to plan designs that cater to customisable workflows and user preferences.
User Flow
Mapped out user flows for different workflows, including QR self-ordering, online ordering, memberships, loyalty programs, and LINE LIFF integrations.
Created sitemaps and section layouts to structure information effectively and support scalability for future features.
Design System
Developed a design system that adhered to Claphere’s brand guidelines for consistency across platforms. Set up Figma variables to accommodate light, dark, and brand-specific visual modes, optimizing for flexibility.
Wireframes
Designed wireframes and page layouts to test workflows and visual structures. Focused on mobile-first designs, ensuring responsiveness for desktop views as well.
This is one of the project that I planned out the structure - user flow - chose taskflow - mapped put screen flow - jumped to high-fidelity UI wireframes to fast forward the design process and able to deliver
Features
QR Self-Ordering
Designed a user-friendly interface enabling in-store customers to place orders via QR codes.
Online Ordering
Created intuitive workflows for delivery and pickup orders, ensuring a seamless experience.
LINE LIFF Intrgration
Crafted responsive designs tailored for LINE’s in-app browser to enhance customer interactions.
Membership & Loyalty Programs
Developed visuals for user profiles, saved locations, points tracking, and rewards redemption.
Business Informations & Stores page
Designed layouts for showcasing essential business details and multi-location setups.
KEY TAKEAWAYS
Scalable Design Solutions: Built layouts and workflows that worked for both single and multi-location setups, ensuring flexibility for future growth.
Visual Consistency: Followed the brandbook while creating adaptable modes; light, dark, and branded colours, to meet diverse needs without losing identity.
Focus on Usability: Simplified navigation and workflows to create intuitive user experiences across features.
Practical Problem-Solving: Managed design constraints by prioritizing clarity and scalability without overcomplicating the system.
Hands-On Learning: Learned and applied Figma variables to support visual modes, balancing customization with efficiency.
See how the CMS adapts for different brand identities?