ClapHere landing page
The new ClapHere website was designed to showcase the platform’s core features and solutions, providing a clear and engaging experience for businesses exploring Claphere’s services. The site highlights tools for growth, efficiency, and scalability, focusing on user goals and problem-solving to address specific needs.
Deliverable:
Website
Service:
UXUI, Design system, Branding, Research, Graphics
Tool:
Figma
When:
Created in 2024
objectives
To create a professional and approachable website that highlights Claphere’s features and benefits, structured around user goals. The site aims to improve clarity, scalability, and visual appeal while supporting businesses of all sizes—from small shops to multi-location enterprises.
CONTRIBUTIONS
[Sole Designer]
Led the entire design process, from research and planning to wireframes and high-fidelity UI design.
(Initial Design of Claphere website was designed by another designer - on Live website link)
Work Process
Competitive and User Research
Gathered requirements and ideas from the director to align the vision and goals of the project.
Studied competitor websites to analyze their sitemap structures and approaches.
Crafting User flow and scenarios
Personas, potential clients and target audience
Reviewed the current website to identify areas for improvement and opportunities to refine the structure.
Categorise Information
Collected and organised all content and information to ensure clarity and logical grouping.
Focused on simplifying navigation while making it easy to highlight Claphere’s core features and solutions.
Sitemap
Explored 3 structural approaches for organizing the site:
User Type Focused – Content segmented by audience (e.g., single store, small businesses, enterprises).
Feature-Centric – Highlighting Claphere’s tools and offerings.
Goal-Oriented (Selected) – Structured around most's restaurant owner's goals and struggles and problem-solving, focusing on workflows and business growth.
Layout Structures
Drafted layout structures and sections to define how content flows across pages.
Designed wireframes to map and tested reuse of elements / components across different pages for consistency and quick implementation.
Wireframes
Created high-fidelity pages, adding detailed content and visual elements to showcase features and solutions effectively.
Focused on readability and a professional tone while maintaining a modern, inviting feel.
Design System
Established a design direction featuring:
Approachable styling with rounded corners for a softer, friendlier look.
Gradient accents in orange, purple, and pink for a vibrant and dynamic feel from ClapHere's branding colours.
Real photography to add professionalism and authenticity.
For the Learn page with the 6-week lesson campaign, here’s how we can align the design to the new blue color scheme:
Visual Approach
Color Palette – Use shades of blue as the primary color to convey trust, reliability, and professionalism.
Accent Colors – Complement with subtle dark grey and soft blue for a clean but bold and polished look.
KEY TAKEAWAYS
Balancing Detail and Delivery – Learned to assess when deeper thinking and refinement were needed versus when quick execution was more effective to meet deadlines without compromising quality.
Goal-Oriented Thinking – Focused on identifying the core message and key selling points, ensuring every section aligned with the purpose of attracting and informing potential users.
Design Flexibility – Developed layouts that were adaptable and scalable, enabling the reuse of sections across different pages and content updates without breaking design consistency.
Learn about ClapHere’s core features and workflow solutions