Establishing a Strong Brand and a Seamless User Experience
How I redefined 5&5’s online presence by creating a cohesive brand identity, a scalable design system, and an engaging user experience.
Project Overview
The 5&5 website had undergone multiple redesigns over the years but needed a stronger brand identity and a clearer way to showcase its services, clients, and partnerships. As the Lead Designer, I defined the visual system, user flow, and overall experience, creating a design system to maintain consistency as new pages were added and improving usability across devices. This high-visibility project required close collaboration with my manager, the marketing team, and the CEO to ensure the design reflected the company’s values and business goals.
Team Collaboration:
Project Manager, Engineers/Developers, Creative Chief Director, and Junior Designers
Brand Identity
Website Redesign
B2B / B2C
Visual System
DURATION
5 months
September 2023 – January 2024
Tools
Figma, FigJam, WordPress, Asana, Illustrator
Project type
Website Redesign & Brand Evolution, Internal Project at Tijoh
ROLE
Lead UX/UI Designer
Problem
Finding a voice by unifying 5&5’s brand and message.
The main challenge was that 5&5 lacked a unified identity and clear messaging. Over time, the site had become inconsistent in style, color, and structure, making it difficult for visitors to understand who the company was and what made it different.
As a business in the restaurant technology industry, standing out was key. The brand needed to convey trust, credibility, and expertise while showcasing its growing network of clients and partners.
Design Challenge
How might I create a unified, trustworthy brand identity while ensuring the website remains easy to maintain and scalable for future growth?
Goals
Charting a path by defining clear objectives for a cohesive website.
The project had a tight timeline, aiming for launch at the start of the new year. With limited time and multiple ongoing projects, efficiency and clarity were critical.
goal#1
Establish a consistent and recognizable brand identity.
goal#2
Improve website usability and readability.
goal#3
Ensure the design system supports future scalability.
goal#4
Deliver a responsive, accessible, and visually engaging website.
Research & Insights
Listening closely to uncover the site’s strengths, weaknesses, and opportunities.
I began by reviewing analytics, user feedback, and previous screens to understand how the website had evolved over time. Although data was limited, several issues became clear. Low color contrast made text difficult to read, and the layout felt crowded, affecting clarity and focus. Animations were inconsistent and often distracting, while variations in font sizes and styles created a weak typographic hierarchy. On mobile, spacing, arrows, and buttons lacked consistency, and new content often didn’t fit within existing layouts, causing misalignment across pages. These findings revealed the need for a complete visual and structural cleanup that prioritized accessibility, hierarchy, and overall consistency.
Looking beyond appearance to identify the core challenges of brand consistency and scalability.
After analyzing the research, it became clear that the problem wasn’t just visual, it was about brand consistency and scalability. The company was growing rapidly, but the website hadn’t kept up. To support that growth, we needed to establish a unified design system, create flexible templates for future content, and reinforce the brand’s credibility and story through design. By reframing the challenge, the focus shifted from simply redesigning the site to building a foundation for long-term growth.
Design & Iteration
Refining the experience from concept to reality through design and feedback.
Feedback and Refinement
Feedback from leadership and the marketing team helped shape the redesign. After launch, I refined the site based on real-world observations, simplifying the Services page, adding service tags, and updating the Blog section for a more personal touch.
Animation Direction
I defined the motion and interaction design to make animations feel purposeful and enhance navigation. Collaborating with engineers, I fine-tuned transitions and micro-interactions to achieve smooth, responsive performance.
From Wireframe to High-Fidelity
Early wireframes focused on layout hierarchy and usability. As the designs evolved, I refined typography, spacing, and motion to create a cohesive and engaging experience.
Impact & Results
After launch, the improvements were quickly noticeable both internally and externally.
Efficiency ↑ 50%
Faster page creation for new content.
Engagement ↑ 20%
Increased time spent on pages by users.
+ Client Satisfaction
Positive feedback highlighting the refreshed, professional look.
+ Collaboration
Streamlined teamwork between design, marketing, and development.
What I learned along the way
Design work does not end at launch. Iteration and refinement are ongoing.
Collaborating with engineers on animation improved my ability to communicate motion intent while staying mindful of performance.
Maintaining a design system is crucial for consistency and efficiency in a fast-growing environment.
Completing a design systems course reinforced the principles of scalability and accessibility, which directly influenced this redesign.
How I’d take it further
Conduct a full usability and accessibility audit post-launch.
Continue optimizing animation performance for mobile.
Ensure the brand’s digital presence continues to evolve to better serve users.
