Book a consultation
A closing call-to-action block that puts people at the centre: team portraits surround one clear promise and a single button.
- One message, one action
- Human faces build trust
- Soft background keeps the button the loudest element
All projects
Case study
FlairsTech: an AI-powered managed services website
A full-scale marketing and service website for a global technology managed services provider, from the homepage and service pages to the blog, careers and a custom AI product.
- Client
- FlairsTech
- My role
- UI/UX Technical Lead
- Platform
- Web, desktop and mobile
- Scope
- Website, design system, AIMY page
Overview
FlairsTech is a technology-driven managed services provider delivering end-to-end solutions, from application maintenance and technical support to digital transformation and custom software.
They needed a website that communicated enterprise credibility while staying approachable. The project covered the full website, built as a cohesive system with shared components and a consistent design language.
About the client
- 100+global partners
- 5delivery centers
- 1,000+certified professionals
What it covers
- Homepage
- Service pages
- About
- Contact
- Blog
- Careers
- AIMY product page
The challenge
What had to be solved
Credible, not cold
Show enterprise credibility while staying approachable for buyers of all sizes.
One language, seven page types
Keep a single design language across homepage, services, about, blog, careers, contact and a product page.
A product inside the brand
Give the AI product AIMY its own presence without breaking the FlairsTech identity.
Global scale, local feel
Speak to the US, GCC, Egypt and Poland without the copy feeling generic.
Workflow
From brief to screens
Brief and analysis
I take the brief from the client, then read it closely: goals, audience, constraints and what success looks like. Nothing is drawn until the requirement is clear.
Sketch
I start on paper: quick sketches of structure and key flows, so ideas are cheap to change before any pixel is placed.
Foundations and design system
I set the foundations: colour, type, spacing and core components. If the client already has a design system I build on it, otherwise I create one for the project.
Build the screens
With the system in place I assemble the screens from its components, so every page stays consistent and fast to build.
The process
How the work moved
Discover
Understand the audience and the "simplify lives" positioning.
Structure
Sitemap for seven page types, navigation and mega-menu variants.
Design language
Colour, type and a shared component library.
Page design
Homepage, services, about, blog, careers, contact and AIMY.
Handoff
Front-end ready files and a system the team can extend.
The work
Homepage, full length
flairstech.com
Hover to scroll the page
Selected screens
6 screens that carry the system
Services
The services landing page opens with a team photograph under a blue overlay, then moves straight into scannable service rows.
- Breadcrumb for orientation
- Blue overlay keeps the title legible over photography
- Service rows with clear headings
Careers
Careers reuses the same page hero and speaks to people first: a bold headline paired with a short culture statement and team photography.
- Same hero pattern as Services
- People-first headline
- Photography carries the culture
Contact
A focused contact form with reassurance beside it: client logos sit under the headline so the form feels safe to send.
- Short form with a service selector
- Client logos under the headline
- A single Send message action
Blog article
The article template keeps long reading calm: a clear title, author and date block, share tools and a feature banner that links the post back to client work.
- Author, date and category meta
- Share actions beside the title
- Feature banner at the top
Our approach timeline
A winding timeline explains the engagement in four steps, so a complex service reads as a simple path.
- Four steps on one curved path
- Large faded numerals as wayfinding
- A short text for each step
Design decisions
The thinking behind the choices
Dark to white
The page opens dark and transitions to white, communicating the journey from complexity to clarity and matching the "simplify lives" positioning.
Blue as the authority signal
Electric blue (#2563EB) is used only for CTAs, links and active states, creating a clear hierarchy and a trust signal common to enterprise tech.
Numbers that convert
Key performance numbers (98% CSAT, 97% SLA) sit on the service page hero, turning compliance data into a conversion tool.
Global services, local feel
A dotted world map with location pins scales globally while the copy stays regionally specific (US, GCC, Egypt, Poland).
AIMY as a product, not a feature
The AI gets its own section on the homepage and a dedicated page, with its own visual identity inside the brand.
One navigation everywhere
A shared nav (Solutions, Services, Industries, About, Blog, Contact) and a "Schedule a Call" CTA repeat on every page, with mega-menu variants.
The brand
Colours the design speaks in
- #2563EBElectric blueCTAs, links, active states
- #0B1430Deep navyDark hero (derived)
- #E8EFFFSoft blueSurfaces (derived)
- #FFFFFFWhiteWhere the page lands
What I delivered
- Website design
- Shared component library
- Mega-menu variants
- AIMY product page
- Blog and careers templates
Next case studyUmrahHub: the official Umrah planning and booking platformView case study
