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.
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.
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.
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.
This consistent structure improves visual hierarchy, makes long pages easier to scan and helps visitors understand the purpose of each section before reading the supporting content.
About Section
Building Credibility Through Experience and Expertise
The About section combines a large company image with an expertise carousel, experience highlights and key achievements.
The image introduces the people and culture behind the company, while the supporting information communicates its experience, specialist knowledge and accomplishments.
Our Services
Making a Broad Service Offering Easier to Explore
I organised the company’s primary services into a grid of nine cards. Each card uses an icon, clear heading and concise supporting content to make the offering easy to scan.
Subtle hover interactions provide visual feedback and make the interface feel more responsive. The ninth card acts as a call to action, directing visitors to the complete Services page.
Onboarding Process
Turning a Complex Process into a Connected Journey
The onboarding process is presented through alternating cards positioned on either side of a central timeline. Each card includes an icon, heading and short description explaining an important step.
As visitors scroll, the timeline progressively highlights each stage, visually connecting the steps and showing their position within the overall journey.
Testimonials and Achievements
Combining Business Evidence with Client Experience
The section presents achievement cards on the left and supporting results on the right, allowing visitors to quickly review the company’s experience and outcomes.
A testimonial carousel at the bottom adds client perspectives and supports the quantitative information with personal experiences.
Final Call to Action
Creating a Clear Path to Conversion
A focused call-to-action card is placed before the footer to capture visitors who have explored the company’s services, process and credibility.
The section uses a direct message and prominent action to encourage visitors to discuss their requirements or begin a potential engagement.
Footer
Providing Complete Secondary Navigation
The footer uses a lighter shade of the primary theme to create visual separation while maintaining brand consistency.
It includes the company’s address, social-media links, important page links and contact information. This gives visitors a reliable place to find supporting information after reaching the end of any page.
Internal Pages
Mobile responsive
Related Projects
