Discover — rebuilt from the ground up
The old page was dated, inaccessible, and passive. I directed the product and content designers and rebuilt it as an active interface: continuous personalised suggestions, and feedback with something in it.
Interaction Design · Product Design
Siteimprove — Frontier
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.
- Role
- Interaction Designer, User Experience Designer
- Toolkit
- Figma, Storyline, Evolve, Photoshop, Illustrator
- Team
- Soumya Sharma, Dave Zinsman, Juan Siera
- Duration
- Aug 2022 – May 2023
01 The brief
A learning platform nobody was excited to learn on.
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.
- O-01
Engagement worth coming back for
New features and a redesigned flow that invite people to take part instead of watch.
- O-02
An experience without the friction
The problems we found in research, fixed directly, starting with a rebuilt navigation.
- O-03
A user flow that actually flows
The existing flow analysed and reorganised so what people want is reachable, not hunted for.
- O-04
Features that teach differently
Interactive learning modules, personalised recommendations, social learning communities, and gamification, for different ways of learning.
- O-05
Accessible to everyone
WCAG 2.0 adherence, so people using assistive technology get the same learning opportunity as everyone else.
- O-06
Inclusive by research, not intention
User feedback and research guiding inclusive practice across backgrounds and learning styles.
02 Research
I went looking for the learner, then for the gap.
The research ran in three moves: basic user needs first, then 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.
- Other SaaS companies
- Corporate employees
- HR professionals
- Freelancers
- Educators
- Accessibility-focused learners
The empathy map
32 observations from the research sessions
FL The Frontier learner persona — synthesised from user research
-
Thinks
E-01- Is motivated by the personalized learning experience and the progress they’re making.
- Appreciates the platform’s commitment to inclusivity and accessibility.
- Is confident in their ability to navigate the platform and manage their courses.
- Is satisfied with their learning progress and the achievements they’ve made.
-
Feels
E-02- A sense of achievement when they complete courses and earn certifications.
- A sense of community through the platform’s social learning features.
- Valued by the platform’s commitment to inclusivity and accessibility.
- Excited about the opportunity to participate in live events and learn from peers.
-
Hears
E-03- Positive feedback about the platform’s interface and diverse offerings.
- Excitement about the platform’s live events and new course promotions.
- Success stories from peers who have improved their skills using the platform.
- Discussions about the platform’s gamification and social learning elements.
-
Sees
E-04- A visually appealing, intuitive interface that’s easy to navigate.
- Commitment to WCAG 2.0 standards, ensuring accessibility.
- Live events that they can sign up for and participate in.
- Other users actively engaging with the platform and sharing their achievements.
-
Does
E-05- Regularly checks their personalized dashboard to track progress and manage courses.
- Participates in social learning communities, contributing to discussions and resources.
- Actively engages with the platform by participating in courses and live events.
- Continually updates their skills by completing courses and earning certifications.
-
Says
E-06- Shares their learning progress and achievements with peers.
- Recommends the platform to others based on their positive experiences.
- Discusses new courses and features they’ve discovered on the platform.
- Provides feedback about their experience with the platform.
-
Pains & problems
E-07- Frustration when faced with technical issues or slow load times.
- Disappointment if the courses or live events don’t meet their expectations.
- Feels disconnected if there’s a lack of interaction in the social learning communities.
- Feels discouraged without visible, immediate progress in their skills.
-
Needs & objectives
E-08- Gains new skills and knowledge from the diverse range of courses.
- The ability to track progress and manage courses easily.
- Values the personalized, inclusive, and accessible learning experience the platform offers.
- The opportunity to participate in live events and learn from peers.
Swipe for all 8 quadrants — 32 notes
The best graphics in the field were wrapped around the most confusing flows. Clarity was the differentiator.
Where everyone else stopped
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 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
I planned the city, then rebuilt it in four passes.
The structure came first: clear pathways, meaningful labels, focal points. The interface came after, 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. 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.
What is in the platform
the product taxonomy
Frontier the LMS itself
- T-01 Courses sorted by subject
- Analytics
- SEO
- Accessibility
- Ads optimization
- Quality assurance
- Web performance
- Center of Excellence
- T-02 Resources everything around the courses
- Siteimprove Community
- Q&A sessions
- Help desk
- T-03 Live events in a room, or at your desk
- Online webinars
- In-person seminars
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.
The map I designed to
information architecture + primary flow
User login Siteimprove ID
- F-01 Discover the landing
- New course promotion
- Top course
- Power tip
- F-02 Catalog the course library
- Search courses
- Course filter
- F-03 Live events in person and online
- New events banner
- Registration page
- Select event → calendar
- Launch event
- F-04 Dashboard the personal one
- In-progress courses
- Completed courses
- Certifications
- F-05 Profile under the user icon
- Courses enrolled or completed
- Sign out
I approached this like planning a city, 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.
Watch the roadmap become the road.
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.
Two futures, and the users picked one.
explored 
chosen 
Courses — search and filters people can actually use
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 and the filters, 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 list was easier to read and easier to navigate, and it held up better against the accessibility bar.
New ground — live event registration
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.
Personalization — goals, progress, and a profile worth opening
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 rounds of user feedback.
And then the course itself, not just the shell around it.
I led the accessibility work, and we held it to the letter.
As leader of the accessibility team I ran the implementation of WCAG 2.1, holding to both AA and AAA content standards. The fine grain got the same attention as the framework: colour contrast tuned for visibility, focus states on every button, and disabled states designed 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 colour codes every screen inherits.
the component library — colour
-
Text
every word on the platform
#191919 -
Button
the primary action, and nothing else
#0D4CD3 -
Disabled button
still visible, plainly not available
#141155 -
Background
the field under everything
#FFFFFF -
Secondary
the quiet surface, and one of the two divider tones
#EAF3F7 -
Hover state menu
the filter row the pointer is on
#D3EBFF -
Line dividers
the rules inside a panel
#CAD6DB -
Side menu
the filter panel's own field
#F8FDFF
One 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 rest of the library, stated once.
the component library — type and buttons
-
Type
Gilroy, one family
- H1, H2 and H3 for headings
- B1 and B2 for body
-
Button
one button, four states
- Active — the filled blue button
- Disabled — the same shape, in the disabled blue
- Hover — the fill a step darker
- Focus — the fill held, a ring outside it
-
Navigation
three places a person can be
- Top navigation — Discover, Catalog, Live Training, Dashboard, account
- Side navigation — search by topic, then by content type
- Course navigation — chapters, and where you stopped inside them
Every state designed, including the ones people only reach by keyboard.
the interaction specification — element, states, timing
-
Discover
top-navigation link
- Default — the label, no rule under it
- Hover — a blue underline arrives
- Focus — a navy ring around the link, underline held
- 250ms ease between states
-
Go
primary button
- Default — the blue button
- Hover — the same button, a step darker
- Focus — a navy ring outside the button
- 250ms ease between states
-
Onboarding Configuration
course card
- Default — the thumbnail and its title
- Hover — the thumbnail dims
- Focus — one rounded navy ring around card and title together
- 300ms ease between states
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.
The notes the developers built from.
And then it was just a good product.
04 Outcomes
Sixty-one days later, it was in production.
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
days to production / full launch
Production launch 11/7/2022 · full launch 2/3/2023. Course and site curation started on day one, we upleveled the site with proserve so the brand experience was strong from the start, and we identified and prioritised the technical need that mattered most: SSO.
shipped at launch
- 2 domains launched
- 78 courses published
usage from launch day
- 2.20k domain-registered students
- 1.11k active students
- 3.68k course registrations
- 812 course completions
- 651 total session hours
And this is it, running.
05 Reception
Learners posted about it publicly.
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
What the work taught me.
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.
- varied devices and screen sizes
- accessible and inclusive for every user
- aesthetics balanced against usability
- deadlines met, budget held
- keeping pace with the web
A company that sells accessibility now teaches on a platform that practises it.
