Skillgate

Website Design and Application UI

UI Design Website Design App Design

SkillGate’s business is built on a simple promise, which is that compliance training doesn’t have to be a nightmare for the people managing it. Their Traffic Light system, their compliance libraries, and their LMS all exist to take the pressure off HR and training teams, and that’s a genuinely useful thing to sell. The challenge we were given was making sure the website and the application communicated that as clearly as the product itself does.

SkillGate offer is broad, with hundreds of compliance courses, soft-skill libraries, and specialist training all sitting under one system, and the website needed to make sense of that without burying visitors in choice. At the same time, the application itself, the actual LMS that learners and team leaders use day to day, needed an interface that felt as considered as the sales pitch that brought people to it in the first place.

The website

We were designing for two different audiences here, and that shaped everything. The website speaks to the person deciding whether to buy, usually someone in HR or L&D weighing up a handful of providers, while the application speaks to the person who’s already been sold and just needs to get their training done. Both needed to feel like the same company, but neither could speak in the same voice.

We built the homepage around a clear, confident pitch, answering the question every buyer actually has, which is why they should trust SkillGate over anyone else. The completion rates, the course library size, and the ease of set up all needed to sit up front, because that’s what gets a training manager to book a demo rather than bounce.

The courses page does the heavier lifting, since it’s where SkillGate’s actual range gets shown off. We organised the compliance library by category, health and safety, information security, organisational compliance, and so on, so a visitor could scan for their specific need rather than scroll through hundreds of course cards looking for the one that matters to them. Each course card carries just enough information, the duration, a short description, and the price, so a buyer can compare options quickly without having to click into every single one.

We kept the layout consistent across categories, using colour to separate them so the page still feels navigable even as the list grows. It’s a page built to be used, not just looked at, which mattered more here than almost anywhere else on the site.

The second part of the brief was the application itself, the dashboard learners see once they've logged in. This is where the day-to-day relationship with SkillGate actually lives, and it needed to feel calm and clear rather than like another system someone has to fight with.

We designed the dashboard around what a learner actually needs to know when they land on it: what’s outstanding, what’s in progress, and what’s overdue. The mandatory tasks sit front and centre, the learner’s overall compliance status is visible without digging, and everything else, the course library, the wider training content, sits just below in easy reach. Because SkillGate’s system is built to be customised per client, we designed the UI to carry a client’s own branding cleanly, so the interface still feels like SkillGate underneath while wearing whoever’s colours and logo sit on top.

The compliance status indicator was one of the more important details to get right. SkillGate’s whole Traffic Light approach depends on that red or green status being immediately understandable, so we made sure it was impossible to miss and impossible to misread, whether you’re a learner checking your own progress or a team leader checking your team’s.

How it came together

Across both the website and the application, we worked from the same visual language, keeping colour, type, and layout consistent so the two never felt like separate products wearing the same logo. The website needed energy and clarity to convert a visitor into a demo booking, while the application needed calm and structure to help a learner actually finish their training, and we designed each to do its own job while still reading as one system.

The outcome

The result is a website that makes SkillGate’s range of courses genuinely easy to browse, and an application interface that gives learners and team leaders a clear, calm place to get their compliance training done. It’s a good example of what happens when a website’s job, winning the customer, and an application’s job, keeping the customer, are designed with the same care and the same eye.

contact us

Let's talk

If your website or your product could do with the same kind of care we gave SkillGate, get in touch and let's have a chat.

More from Chemical Design

Similar projects

ui design

Wandermento

Wandermento helps people turn their travels into something they can actually keep - personalised prints and a companion app that...

View project
ui design

Psion Consulting

UI design for a desktop and mobile application that works alongside Psion Vision's Realwear Smart Eyewear, giving field-based users one...

View project
branding

Verto Cloud

Long-term creative partnership delivering brand identity, websites, campaigns, exhibition design, and product visuals for UK software company Verto Cloud.

View project