Skip to main content

UI/UX Design

UI/UX Design

A UI design agency that builds what it designs, so nothing gets lost.

A lot of design agencies hand your screens to someone else to build. We design and develop under one roof, so what your customers see matches what you signed off.

For Marketing Teams, Product Owners & Anyone Choosing a Design Agency

Designed by people who know how it gets built.

Maybe you've got a new site or product and you're comparing agencies. Maybe your last agency handed over gorgeous screens your developers couldn't build. Or maybe you're tired of refereeing between a designer and a dev team who've never met.

As a UI/UX design agency with our own developers, we take you from research and wireframes through to finished, tested components. The people drawing your screens work alongside the people building them, and they talk. A lot.

Why Teams come to us?

“Our designs keep getting lost in the build.”
Our designers and developers are the same team, in the same meetings. If a design choice won't survive the build, someone says so before you've fallen in love with it.
“It looked beautiful. It just didn't work.”
We design with actual components, real content and build limits on the table from day one. Pretty screens that fall apart at 375 pixels wide don't make it past us.
“We need a design system, not a one-off.”
We design in components, so buttons, cards and forms are built once and reused. Your site stays consistent as it grows, and new pages don't need a designer every time.
“Our site feels like it's from 2015.”
Modern doesn't mean busy. We use interaction and animation where they help someone understand what just happened, like a form confirming it's sent. Motion for its own sake gets cut.

The Gecko Way™

Our approach to successful projects

Before anyone opens a design file, we want to understand who's actually using your site and what they're trying to do. That means talking to you and the people who'll live with the site day to day. We'll look at your analytics to see where visitors drop off, and read the enquiries and support requests that show what's confusing people. If you've got brand guidelines, we'll take them. If you haven't, we'll tell you what we need. We'll also ask the awkward questions early. Who signs this off, what's the budget really, and what would make your board say yes? Better to know now than in round three of feedback.

Next we turn what we've learned into decisions. We map the key journeys (the three or four routes that actually make you money or save your team time) and sketch the structure that supports them. This is also where our developers first get involved. They look at the early thinking and flag anything that'll be expensive, fragile or slow to build, so you're choosing between realistic options rather than wishful ones. You'll get a clear view of what we're recommending, what we're not, and why. If we think part of your brief is solving the wrong problem, we'll say so plainly and suggest what to do instead. The output is usually a journey map for each key route, showing where people arrive, what they need at each step and where they're getting stuck, alongside a first pass at the screen structure that supports it.

Now the screens. We start with wireframes to agree layout and hierarchy without the distraction of colour. Then we build clickable prototypes so you can test a journey before a single line of production code exists. Once the structure's right, we design the UI as a component system: buttons, cards, navigation and forms. Each has its states defined (hover, focus, error, loading), so nothing's left for a developer to guess. Accessibility goes in here too. Colour contrast, focus states and readable type are checked as we design, not patched later. Interaction and animation come last, used where they help and dropped where they don't. Most of your visitors are probably on a phone, so mobile-first design is our default: we design for the smallest screen and scale up, rather than squeezing a desktop layout down.

A design only works if the people using it every day understand it. So we document the component library properly: what each piece is for, when to use it, and when not to. Your content editors get guidance on how pages are meant to be put together, so the site still looks like itself six months from now, long after the launch buzz has worn off. If your own developers are building it, they get annotated files and a proper handover conversation with ours. We'd rather spend an extra afternoon explaining than leave you holding a beautiful file nobody can interpret.

We don't hand over a design and wave. When our team builds it, the designer stays involved through development. They check that what's built matches what was agreed, and make the call when real content throws up something unexpected (it always does). After launch, we look at how people actually use the new screens and suggest fixes based on that, not on taste. And because design, development and support all sit with Gecko, you'll never hear anyone say "that's not our bit". It's all our bit.

What's Included in Our UI Design Services

UX Research & Discovery

Good interface design starts with understanding who's using your site and what they're trying to get done. We look at your analytics to find where people drop off, review the journeys that matter most to your business, and talk to the people on your team who hear customer complaints first. Where it's useful, we'll test ideas with real users before committing to them.

The aim is that every design decision can be traced back to something we learned. So when someone in a meeting asks "why is the button there?", you've got an answer that isn't "the designer liked it". It also gives you something solid to take to your board. User research doesn't need to be a six-month study, either.

A handful of conversations and a close look at the numbers usually give us enough customer insight to design with confidence. If you've got existing market research or customer surveys, we'll read those too, and we'll do some competitor research to see what your visitors are likely comparing you against.

Wireframing & Prototyping

Wireframes let us agree layout, hierarchy and content priorities without anyone getting distracted by colour or imagery. They're quick to change, which is exactly the point, because moving a block on a wireframe costs far less than rebuilding a finished page. Once the structure's settled, we turn key journeys into clickable prototypes you can use on your own phone or laptop.

You and your team can click through a checkout, an enquiry form or a sign-up flow and feel where it works and where it doesn't, long before development starts. Our developers review prototypes too, so anything that'll be tricky to build gets spotted here.

Prototypes are also where we run usability testing, checking that the user journeys we mapped earlier hold up when real people try them. From there we move into high-fidelity responsive interface design, showing exactly how each screen looks and behaves on a phone, a tablet and a desktop.

UI Design & Design Systems

This is where the site starts to look like itself. As a user interface design agency that also builds what it designs, we create your UI as a system of reusable components rather than a stack of individual page designs.

Each component, from buttons and cards to navigation and forms, has its states defined: hover, focus, error, disabled and loading. That's the detail that usually gets left for a developer to guess, and it's where inconsistencies creep in.

A proper design system keeps your site coherent as it grows, makes new pages faster to produce, and gives your content team a set of pieces designed to work together. The same approach works for digital products too, where product interfaces like a dashboard or account area have to stay usable as new features get added.

Interaction & Micro-Animation

Small interactions do a lot of quiet work. A button that responds when pressed, a form field that confirms it's been filled in correctly, a menu that opens smoothly rather than snapping shut: these are the details that make a site feel considered rather than dated.

We approach this the way a dedicated interaction design agency would, deciding what moves, how fast and why, with the same care as the static screens. What we don't do is add motion because it looks impressive in a presentation. Every animation needs a job, whether that's guiding attention or confirming an action.

It also needs to respect visitors who've asked their device to reduce motion. And where familiar interaction patterns already exist, like swiping through images on a phone, we'll usually stick with them, because nobody should have to learn how your site works.

Accessible Design

Accessibility is much cheaper and far more effective when it's designed in rather than bolted on after launch. We check colour contrast, type sizes and spacing as we design, and define visible focus states for keyboard users. We also plan how each component will be announced by screen readers before a developer touches it. We use WCAG 2.2 AA as our baseline.

For many organisations, particularly charities and public-facing bodies, this isn't optional. It's worth doing even when it is, though. Clearer labels, readable type and forms that explain what went wrong make the site easier for everyone who visits it.

Design to Development Handoff

This is where having design and development under one roof pays off. When our own developers build your site, the handoff isn't really a handoff at all. They've been reviewing the designs since the wireframes, and our designers stay involved through the build to check that the finished components match what you signed off.

If real content throws up something the design didn't anticipate, the person who designed it is right there to make the call. If you're working with a separate development team, we'll give them annotated files, a documented component library and a proper walkthrough. We'll also stay on hand to answer their questions as they build. Either way, you get a developer-ready handoff rather than a folder of screens and good intentions.

What's Included in Our UI Design Services

UX Research & Discovery

Good interface design starts with understanding who's using your site and what they're trying to get done. We look at your analytics to find where people drop off, review the journeys that matter most to your business, and talk to the people on your team who hear customer complaints first. Where it's useful, we'll test ideas with real users before committing to them.

The aim is that every design decision can be traced back to something we learned. So when someone in a meeting asks "why is the button there?", you've got an answer that isn't "the designer liked it". It also gives you something solid to take to your board. User research doesn't need to be a six-month study, either.

A handful of conversations and a close look at the numbers usually give us enough customer insight to design with confidence. If you've got existing market research or customer surveys, we'll read those too, and we'll do some competitor research to see what your visitors are likely comparing you against.

Wireframing & Prototyping

Wireframes let us agree layout, hierarchy and content priorities without anyone getting distracted by colour or imagery. They're quick to change, which is exactly the point, because moving a block on a wireframe costs far less than rebuilding a finished page. Once the structure's settled, we turn key journeys into clickable prototypes you can use on your own phone or laptop.

You and your team can click through a checkout, an enquiry form or a sign-up flow and feel where it works and where it doesn't, long before development starts. Our developers review prototypes too, so anything that'll be tricky to build gets spotted here.

Prototypes are also where we run usability testing, checking that the user journeys we mapped earlier hold up when real people try them. From there we move into high-fidelity responsive interface design, showing exactly how each screen looks and behaves on a phone, a tablet and a desktop.

UI Design & Design Systems

This is where the site starts to look like itself. As a user interface design agency that also builds what it designs, we create your UI as a system of reusable components rather than a stack of individual page designs.

Each component, from buttons and cards to navigation and forms, has its states defined: hover, focus, error, disabled and loading. That's the detail that usually gets left for a developer to guess, and it's where inconsistencies creep in.

A proper design system keeps your site coherent as it grows, makes new pages faster to produce, and gives your content team a set of pieces designed to work together. The same approach works for digital products too, where product interfaces like a dashboard or account area have to stay usable as new features get added.

Interaction & Micro-Animation

Small interactions do a lot of quiet work. A button that responds when pressed, a form field that confirms it's been filled in correctly, a menu that opens smoothly rather than snapping shut: these are the details that make a site feel considered rather than dated.

We approach this the way a dedicated interaction design agency would, deciding what moves, how fast and why, with the same care as the static screens. What we don't do is add motion because it looks impressive in a presentation. Every animation needs a job, whether that's guiding attention or confirming an action.

It also needs to respect visitors who've asked their device to reduce motion. And where familiar interaction patterns already exist, like swiping through images on a phone, we'll usually stick with them, because nobody should have to learn how your site works.

Accessible Design

Accessibility is much cheaper and far more effective when it's designed in rather than bolted on after launch. We check colour contrast, type sizes and spacing as we design, and define visible focus states for keyboard users. We also plan how each component will be announced by screen readers before a developer touches it. We use WCAG 2.2 AA as our baseline.

For many organisations, particularly charities and public-facing bodies, this isn't optional. It's worth doing even when it is, though. Clearer labels, readable type and forms that explain what went wrong make the site easier for everyone who visits it.

Design to Development Handoff

This is where having design and development under one roof pays off. When our own developers build your site, the handoff isn't really a handoff at all. They've been reviewing the designs since the wireframes, and our designers stay involved through the build to check that the finished components match what you signed off.

If real content throws up something the design didn't anticipate, the person who designed it is right there to make the call. If you're working with a separate development team, we'll give them annotated files, a documented component library and a proper walkthrough. We'll also stay on hand to answer their questions as they build. Either way, you get a developer-ready handoff rather than a folder of screens and good intentions.

"I check every component with our developers while I'm still designing it, so the screen we sign off together is the one your customers use."

Mark Whitworth, UX Designer at Gecko

Redesign Case Study

A national charity came to us with an inaccessible, uneditable site that didn’t reflect their impact. Within 10 weeks, we delivered a new Umbraco build, simplified their user journey, and integrated their donation system. The bounce rate dropped by 42% in month one – and the team finally felt in control.

Pet Blood Bank v1

FAQs

UX (user experience) design is about how something works: the journeys people take, the structure of your pages, what happens when someone gets stuck. UI (user interface) design is about what they see and touch along the way: layout, typography, colour, buttons and forms. A useful way to picture it is that UX decides a checkout needs three steps, and UI decides what each of those steps looks like. You can't really do one well without the other, which is why we treat them as one job. A beautiful interface on a confusing journey still loses you customers. A clever journey hidden behind a clunky interface doesn't fare much better. Good user interfaces are the part people notice. Good UX is usually the part they don't, because everything just works.

Yes. If you've already got an in-house team or a development partner you're happy with, we can design the site or product and hand it over for them to build. We'll still design with build constraints in mind, because that's how we work anyway. Your developers will get properly annotated files and a component library that explains itself. We'd also suggest keeping us involved through the build, even lightly, so there's someone to answer the "what did the designer mean here?" questions before they turn into guesses. And if you later want us to pick up development or support, that's a short conversation rather than a fresh start. Our web development team will already know your designs well, because they'll have reviewed them while they were being drawn.

It depends mostly on scope, and on how quickly decisions get made on your side. As a rough guide, redesigning a handful of key templates on an existing site might take a few weeks. Designing a new site or product from discovery through to a full component system usually takes a couple of months, before build begins. Feedback rounds tend to have the biggest effect on timelines, so we agree at the start who signs things off and how many rounds are included. You'll get a timeline you can plan around after the Gather and Evaluate phases, and we'll tell you early if anything threatens it. For projects with a lot of people to keep happy, a couple of stakeholder workshops early on usually saves weeks of back-and-forth later.

Yes, it's how we design by default. Rather than designing every page as a one-off, we build a library of reusable components (headers, cards, buttons, forms, navigation) with their states and variations defined. Pages are then assembled from those pieces. It keeps your site visually consistent, makes new pages quicker and cheaper to produce, and means your developers build each component once rather than recreating it slightly differently every time. It helps your content team too, because they're choosing from pieces designed to work together rather than improvising. We've written more about why we work this way in our Component Based Designs blog. Even something as small as a button style gets decided once and documented, so nobody's debating shades of blue every time a new page goes live.

Often, yes, and it's sometimes the smarter option. If your site's structure and platform are sound but it looks dated or certain journeys aren't working, a targeted redesign can fix the parts that matter without the cost of a full rebuild. We'll start by looking at how the current site is actually used, where people drop off and what your team struggles to update. Then we'll recommend whether a refresh, a partial redesign or a full rebuild makes sense. If we think starting over isn't worth it, we'll tell you. If the platform underneath is what's holding you back, we'll tell you that too. For bigger sites, that starting point is often a UX review in its own right, using your performance data and conversion rate to show which pages are worth redesigning first.

Every project is scoped to what you actually need, but a typical engagement covers:

  • discovery and research

  • user journeys and site structure

  • wireframes and clickable prototypes

  • UI design built as a component system

  • interaction and animation design

  • accessibility checks throughout

  • a proper handover into development, whether that's with our own team or yours

You'll know exactly what's included and what it costs before we start, so the number you take to your board is the number that holds. If you'd like to talk through what your project would involve, book a free consultation with us.

× UAT site