Redesigned the Five Frogs website to modernise its digital presence.
Five Frogs Tech is a software development, IT consultancy and staffing company helping businesses grow, scale and succeed through technology.
Project overview
Five Frogs Tech already had an established website, but its dated visual design and fragmented content structure no longer reflected the company’s expertise or market position.
The project focused on redesigning the existing website to strengthen the company’s digital presence, communicate its services more effectively and create a clearer path for potential clients, partners and job candidates.
The Problem
The Existing Website No Longer Reflected the Business
The previous website felt outdated, cluttered and difficult to navigate. Content lacked clear organisation, sections competed for attention and there was no consistent visual hierarchy to guide visitors through the experience.
Inconsistent typography, colours, spacing and UI patterns weakened the brand identity. As a result, users could find it difficult to understand the company’s capabilities, explore its services or determine the appropriate next step.
PROBLEM STATEMENT
How might we create a welcoming online experience that helps people recognise their needs, trust the instructors, understand the available services, and confidently choose a suitable plan?
The Challenge
Creating a New Identity Without Losing Existing Content
The main challenge was to completely modernise the experience while preserving the company’s existing content, page structure and core messaging.
The redesign needed to introduce a stronger brand identity and clearer user journey without changing the fundamental scope of the website. Each page and section had to be reorganised and visually improved while continuing to communicate the same business information.
The Solution
A Clearer, More Credible and Conversion-Focused Experience
I redesigned the website around a consistent visual language and a clearer content hierarchy. Complex information was divided into focused sections, making it easier for visitors to scan the pages, understand the services and identify relevant actions.
The new experience uses stronger headings, concise supporting content, structured layouts and consistent calls to action. Improved spacing and visual hierarchy create a more comfortable reading experience, while responsive layouts keep the website accessible across desktop, tablet and mobile devices.
The redesign also creates clearer journeys for the company’s primary audiences:
Potential clients can understand the company’s expertise and explore its services.
Businesses can identify relevant technology and staffing solutions.
Job candidates can discover available opportunities.
Visitors can easily contact the company or request more information.
Component Library
I created foundational, reusable components to ensure consistency across the redesigned website. The library includes:
Brand colours and supporting colour styles
Typography hierarchy
Spacing and layout guidelines
Buttons and interaction states
Navigation and footer components
Service and industry cards
Reusable calls to action
Header and Navigation
Simplifying Access to Key Information
I used concise, single-word navigation labels to make the website structure easy to understand and reduce the effort required to scan available options.
A prominent call-to-action button is positioned on the right side of the header, giving potential clients immediate access to the primary conversion path from any page.
From a UX perspective, familiar navigation labels improve discoverability, while a persistent CTA helps users take action without searching for a contact option.
Hero Section
Communicating the Company’s Value Immediately
The hero section uses a bold, centrally aligned headline to quickly communicate the company’s expertise and create a strong first impression.
Two calls to action support visitors with different intentions: one can guide users towards exploring the company’s services, while the other provides a direct path to contact the team.
A technology-logo carousel provides a quick visual overview of the platforms and technologies the company works with. This helps technical and non-technical visitors understand the company’s capabilities without reading detailed content.
From a UX perspective, the section establishes relevance within the first few seconds and provides clear next steps for both exploratory and high-intent visitors.
Section Heading System
Creating a Consistent Content Hierarchy
I introduced a two-level heading system across the website. Each section begins with a short supporting label, followed by a clear primary heading and concise description.
Key design solutions
1. Benefit-led hero section
The hero combines a welcoming headline, supporting copy, an immediate call to action, programme highlights, and a yoga-focused image. This establishes the service category quickly while giving the page an approachable human presence.
2. Problem-awareness content
The “signs that it’s time for a change” section uses relatable symptoms and emotions. In UX writing, this is a self-identification pattern: visitors recognise their situation before being asked to buy.
3. Scannable service architecture
Class categories are presented as compact cards with a featured visual. This supports information scent—the small labels and cues that help users predict what they will find after clicking.
4. Instructor credibility and social proof
Teacher cards make the service feel personal, while testimonials reduce uncertainty by showing experiences from other students. Together they strengthen trust before the pricing decision.
5. Transparent three-tier pricing
The three plans are placed side by side to reduce comparison effort. A visually emphasised middle plan can act as the recommended option, supporting faster decision-making without hiding alternatives.
6. Responsive, reusable visual system
Typography, colors, cards, buttons, spacing, imagery, and decorative botanical elements form a lightweight design system. The mobile concept shows how the same brand can remain recognisable across screen sizes.
Design System
I created a foundational design system to maintain consistency across the website.
The system includes:
◉ Colour and typography styles
◉ Buttons and interaction patterns
◉ Class and instructor cards
◉ Testimonial components
◉ Pricing cards
◉ Form elements
◉ Spacing and layout rules
◉ Reusable content sections
This foundation allows future pages, classes, instructors and wellness programmes to be added without losing visual consistency.
Expected Impact
The Yoganjali experience is designed to:
◉ Strengthen the institute’s online credibility
◉ Make services easier to understand
◉ Help visitors discover suitable classes
◉ Build trust through instructors and testimonials
◉ Simplify membership comparison
◉ Create a clearer path from interest to enquiry
◉ Support future business and content growth
This foundation allows future pages, classes, instructors and wellness programmes to be added without losing visual consistency.
Teams
The team section introduces the experienced instructors behind Yoganjali. Each profile highlights the instructor’s name, speciality and teaching approach, helping visitors understand who they will be learning from.
This section adds a personal touch to the experience and builds trust by making the people behind the studio more visible and approachable.
Testimonials
The testimonial section shares honest experiences from Yoganjali students. These stories help visitors understand how the classes have supported their physical health, mental clarity, and daily routines.
By combining short quotes with student names and images, the section creates social proof and reassures new visitors that they are joining a supportive community.
Pricing and Plans
The pricing section presents three membership plans for different goals, schedules, and levels of commitment.
Each plan includes a clear price, short description, and list of benefits, making it easy for visitors to compare their options. A highlighted recommended plan guides users toward the most suitable choice without making the decision feel overwhelming.
Simplified Membership Selection
Yoganjali offers three membership plans for users with different goals and levels of commitment.
The plans are displayed together in a comparison-based layout, helping visitors review benefits, understand pricing, and select the most suitable option with less effort.
Reflection
Yoganjali helped me explore how brand expression and usability can work together in a wellness experience.
The main challenge was balancing a calm, emotional visual style with the clarity required for service discovery and membership comparison. In a future iteration, I would test the information architecture with target users and validate how effectively the pricing section supports plan selection.