Interaction Design · Product Design
The learning platform I rebuilt for a SaaS company that sells accessibility.
Siteimprove helps other companies grow their traffic by making their sites accessible and searchable. Frontier is its learning management system — the place customers go to actually learn the product, and the standards behind it.
01 The brief
The company sold accessibility. Its own classroom wasn’t holding anybody.
Frontier is where Siteimprove’s customers learn the product — and the accessibility, inclusivity, and customer-service standards behind it. It needed a revamp and a rebrand: engagement was low, the interface was dated, and the flow lost people somewhere between where they landed and what they came to learn.
The brief went further than “make it prettier”: six things had to be true by the time I was finished.
Two launch dates were already written down: 11/7/2022 for production, 2/3/2023 for full launch.
New features and a redesigned flow that invite people to take part instead of watch.
The pain points we identified, addressed directly — navigation rebuilt on intuitive design principles.
The existing flow analysed, reorganised, and optimised so what people want is reachable, not hunted for.
Interactive learning modules, personalised recommendations, social learning communities, and gamification, for different ways of learning.
WCAG 2.0 adherence, so people using assistive technology get the same learning opportunity as everyone else.
User feedback and research guiding inclusive practice across backgrounds and learning styles.
02 Research
The research ran in three moves: basic user needs first, then comprehensive market research, then a study of how other learning-focused platforms actually look and behave.
The audience was much wider than “students.”
Before I designed anything I wanted the needs written down in front of me: who is on this platform, what they are trying to finish, and what makes them close the tab. Six audiences came out of it, and none of them wanted the same thing on the same day.
32 observations from the research sessions
FL The Frontier learner persona — synthesised from user research
Swipe for all 8 quadrants — 32 notes
The best graphics in the field were wrapped around the most confusing flows. Clarity was the differentiator.
the market, feature by feature
| Feature | LinkedIn Learning | Master Class | Gong | Skillshare | Frontier |
|---|---|---|---|---|---|
| Global navigation | Yes | Yes | Yes | Yes | Yes |
| Personalization | Yes | Yes | No | Yes | Yes |
| Promotional section | Yes | Yes | Yes | Yes | Yes |
| Registration page | No | No | No | No | Yes |
| Accessibility | Yes | No | No | Yes | Yes |
| User flow | Yes | Yes | No | Yes | Yes |
| Mobile functionality | Yes | Yes | No | Yes | Yes |
| SEO | Yes | Yes | No | Yes | Not in scope outside the LMS scope |
| Certification | Yes | Yes | No | Yes | Yes |
| Profile section | Yes | Yes | Yes | Yes | Yes |
Scroll the table sideways for every column
What I kept seeing: sub-courses nested inside courses until people lost the thread, so interest drains and the course that mattered gets missed; strong graphics wrapped around a confusing flow; and a few genuinely good promotional interactions that showed me how a course can make itself discoverable. Every platform I studied left registration unsolved. Frontier built it. SEO sat outside this platform’s scope, so I’ve marked the gap rather than hiding it.
03 The redesign
The structure came first — clear pathways, meaningful labels, focal points — and only then the interface, one phase at a time, each one earning the next.
I named what was in the platform before I decided how anyone would move through it.
Two taxonomies came out of that, both built on user-centric principles. An organizational one sorted Frontier by stakeholder and operational function — a bird's-eye view of who the platform is for and who keeps it running. A product one sorted what is actually in it: courses by subject, resources by the kind of material they are, and live events by whether you attend them in a room or from your desk.
The organizational side named the people around the LMS: learners, faculty and organizations on one side of it; content owners, administrators and tech support on the other.
the product taxonomy
Frontier the LMS itself
Three tags travel across this tree rather than living inside it — Certifications, IAAP Approved and Learning Path — so a course can be found by the subject it teaches or by what finishing it earns you. Attributes as tags, not as extra branches, is what keeps a catalogue navigable while it grows.
information architecture + primary flow
User login Siteimprove ID
I approached this like planning a well-structured city: clear pathways, focal points, meaningful labels, and a search that works — organised around how people already think, so the platform costs them less to use. Courses, resources and live events each got their own home in the product taxonomy, with tags carrying the attributes across them. The flow is deliberately short on options, because every extra one is a chance to lose somebody.
Low fidelity set the structure of every screen — a practical roadmap, no detail noise. High fidelity added the labels, refined the layout, and tuned the navigation, so the team could see the real thing before anyone built it.
This was more than a facelift: the old page was dated, inaccessible, and passive. Directing the product and content designers, I reconstructed it into an active, user-centric interface: continuous personalised suggestions, and feedback with something in it.
A cross-functional pass on search and filtering, with users, product and developers at the same table, aligned to WCAG 2.1. I streamlined the interface, made the filters intuitive, and kept the information below the overwhelm line.
The grid became a list because users said so. Courses and search results started in a grid; feedback called it overcrowded and overwhelming. The shift to a list brought readability, simpler navigation, and a more accessible result.
A flow that did not exist before: choose an event, weigh the details, confirm. Accessibility held throughout, and every round of user feedback went back into it.
Goal tracking gave learners a live view of what they had in progress and what they had finished, and I redesigned the profile around a layout people could read. Both went through iterative rounds of user feedback.
I led the accessibility work, and we held it to the letter.
As leader of the accessibility team I spearheaded the implementation of WCAG 2.1, adhering to both AA and AAA content standards. The fine grain got the same attention as the framework: colour contrast tuned for visibility, focus states properly implemented on every button, and disabled states optimised rather than forgotten.
The component library is what made it hold. One set of decisions — type, colour, states, navigation — reused everywhere, so the standard survived every screen after it.
the component library — colour
every word on the platform
#191919the primary action, and nothing else
#0D4CD3still visible, plainly not available
#141155the field under everything
#FFFFFFthe quiet surface, and one of the two divider tones
#EAF3F7the filter row the pointer is on
#D3EBFFthe rules inside a panel
#CAD6DBthe filter panel's own field
#F8FDFFOne set of decisions, reused everywhere. Contrast was tuned here rather than argued about per screen, which is what made the AA and AAA commitment survive the fortieth page.
the component library — type and buttons
Gilroy, one family
one button, four states
three places a person can be
the interaction specification — element, states, timing
top-navigation link
primary button
course card
The focus state is the one that gets skipped, so it was specified first: the same ring, the same timing, on a link, a button and a card. The keyboard gets the designed product, not the leftovers.
04 Outcomes
It launched clean and branded, with content people could find and a login that got out of the way. Then the usage arrived.
61 92
Production launch 11/7/2022 · full launch 2/3/2023. We hit the ground running on course and site curation, upleveled the site with proserve so the brand experience was strong from day one, and identified and prioritised the technical need that mattered most: SSO.
shipped at launch
usage from launch day
05 Reception
Two of their posts are reproduced here as they wrote them.
Great start to a Sunday morning! The new interactive course from Siteimprove provides great levels of exposure and in-depth knowledge to all features of the tool.
Reviewing the basics and learning something new with Deque University.
Kiran completed the Platform Manager Certification, issued by Dave Zinsman, Director of Customer Education, valid January 8, 2023 to January 8, 2024. Lisa’s certificate — Accessibility Fundamentals for the Web and Siteimprove Analytics — is dated October 13, 2022.
06 Reflection
Thoughtful design moves engagement further than I expected it to.
Balancing aesthetics against function across every screen size sharpened how I make trade-offs. Holding inclusivity for every user — including users with disabilities — turned accessibility into a design material for me rather than a checklist at the end. Tight deadlines and a fixed budget taught me project management the hard way, and keeping pace with where the web was going kept the toolkit honest.
The lesson I kept: user-centred decisions, features people actually want, and accessibility standards are what turn a redesign into engagement. A platform 2.20k people registered on, and 812 finished something on, is the proof.
A company that sells accessibility now teaches on a platform that practises it.
