In the ever-evolving world of digital learning — and SaaS in general — going to market with a modern design and intuitive, user-friendly workflows that make routine tasks easier and more efficient is crucial for customer success and user satisfaction.
Background
When I started at Northpass as Director of Design, my immediate and ambitious goal was to transform an outdated LMS into an intuitive learning administration platform aligning with modern design practices and UX patterns.
In early 2020, Northpass was riding several years of growth and had experienced a modicum of success with the existing design. However, in order to scale and meet the needs of an increasingly demanding customer base and to stay ahead of the numerous competitors and new players in the market, we knew we had to elevate the design. The mission was clear: upgrade the interface and the user experience to reflect the quality and reliability of the team behind the product we deliver, thereby increasing customer trust and brand loyalty.
Challenge
A quick walkthrough of the platform made it clear that the UI had undergone numerous updates over the years, yet the evolution was noticeably inconsistent. It was also apparent that various sections of the platform were designed by different designers, and some elements seemed to lack any design input altogether.
This led to an overall clunky, inefficient, and often confusing interface. Lack of cohesion, inconsistent flows for creating and saving, unintuitive navigation, and an uninspired design aesthetic reflected poorly on the company and effectively diminished trust in the Northpass brand and the team as a whole.
In addition to the improvement of the platform, another huge challenge was the implementation. A project like this can be difficult because users can become accustomed to known functionality and patterns even if they are not optimal. So upgrading the design without alienating the existing user base and upsetting all familiarity with the UI was something we had to keep in mind.
Not horrible by any means, but also not vibrant and dynamic. Our customers deserved an experience on par with the quality, efficiency, and professionalism demonstrated everyday by the team at Northpass.
Research & exploration
The redesign process was driven by thorough user research, which highlighted the need for a more coherent and intuitive design system. This was less of a time-boxed project and more of a comprehensive transformation of design philosophy and practices, which led to new design solutions and interaction patterns. As such, various research methods were employed over a long period of time (roughly one year) and continued as we iterated on different components and areas of the platform.
Research Methodology
Research was conducted using the following methods:
- User interviews
- Prototype usability tests
- Contextual observation
- Task analysis
The vast majority of research was performed by myself and our lead product manager. Between the two of us, we gathered extensive feedback directly from customers and indirectly from several internal sources. We logged hundreds of pain points and issues from our customer support team, CSMs, and sales reps.
User Personas
As an advocate for user-centered design practices, I always strive to understand the types of people using the product I'm designing. Northpass is somewhat unique in that we support two sets of users: our customers and our customers' customer. The primary persona plays an admin role, typically a learning manager or instructional designer working for one of our customers. There are other roles, such as executive sponsors, technical directors, and learners. However, the vast majority of the design system concerns the admin portal so the primary persona that informed our ideas was the administrator.
An adaptation of a familiar model. This helps me make sense of and explain the iterative design process to stakeholders and project partners.
Key Findings
It required zero research to see that the UI was outdated in its visual appeal. But research highlighted that there were some important trends emerging around basic functionality and usability. The admin UI for Northpass had a predominantly table-based data display format; filtering, pagination, and bulk actions were sorely lacking compared to what most users expect from an enterprise SaaS application. Because of this, many basic tasks were inefficient and required more of a power user level of experience to effectively administer a learning program.
Design Solutions
Elevating a legacy design to a modern experience requires going to battle on multiple fronts. There are high-level design choices to make like typography and color palette. There are also more intricate aspects to focus on — elements like buttons, icons, checkboxes, drop-downs, form inputs, which require thoughtful design attention. From there, how those elements are assembled to make usable components is critical. And then putting it all together to create pages with consistent, intuitive layouts and easy-to-use workflows across the entire application is what makes it remarkable.
Attention to detail is paramount - and we obsessed over every pixel.
Guiding Principles
We named the design system Peak, which aligned well with our corporate branding. The user experience of Peak was governed by 4 stack-ranked principles that are part of how I approach every design project. These principles are the foundation for making every design decision.
Stack-ranking these in terms of relative importance allows us to break ties and make quick decisions about priority and level of effort.
- Clarity
Eliminate ambiguity. Enable users to understand without guessing and act with confidence. - Efficiency
Streamline and optimize workflows. Anticipate needs to enable users to efficiently accomplish tasks and get more work done. - Uniformity
Create familiarity and harmony through consistency. Strengthen intuition by maintaining predictable behaviors and solutions to problems. - Craftsmanship
Build trust and brand loyalty by establishing bulletproof design patterns, thoughtful interactions, and aesthetic beauty.
Design System Elements
Color Palette
The old color palette consisted of black, white and bland green, which was simple but not very flexible, lacked modernity, and came off as too sterile and generic. As part of the larger brand redesign, we continued to embrace green as a primary color but went with a brighter green, introduced some secondary colors and anchored everything with a blue-tinted black color as the foundation color.
A fresh, modern color palette designed for versatility, accessibility, and aesthetic appeal.
Typography
Nothing wrong with Roboto, which was the typeface of the old user interface, but we chose Lexend, which is built specifically for readability. It also offers a custom, non-generic look that matches the overall goals of the corporate brand redesign.
Lexend: a variable font empirically shown to significantly improve reading-proficiency.
Buttons
Designing buttons seems simple on the surface, but can quickly become very complex. The complexity is necessary as it allows ultimate flexibility. The design system offers 3 different buttons - Primary, Secondary, and Tertiary. Knowing that most screens will include multiple buttons, we wanted a way to show hierarchy and help make decisions intuitive for users. Within each button type, there are 5 different states: normal, active, hover, pressed, and disabled. Additionally, each button is available in 3 sizes: Default, Large, and Small.
A thoughtful button schema is critical to a well-designed app, allowing for flexibility and scalability
Icons
It is often said that the best icon is a text label. While that is usually true, sometimes an icon can communicate a concept better when space is tight. Icons are a visual representation of a single and simple object, action or idea. We try to use them only when appropriate and work hard to ensure every icon is clear and easy to understand at a glance.
An ever growing library of icons - some curated, some custom.
Patterns & Components
Navigation, Page Headers & Wayfinding
We improved the navigation by restructuring the information architecture. Additionally, we elevated the usability of the 2-level navigation with a simple, readable, cohesive visual design update. Page header components throughout the site were rolled out which provide a clear indication of location within the application and intuitive controls for exploring further or taking action on the current page.
Early exploration to restructure the navigation and information architecture.
High fidelity mockup showing new navigation, IA and page header component.
Inputs & Controls
As an administrative platform, the Northpass app consists of a number of screens with settings and configuration options handled by utilities such as radio buttons, checkboxes, dropdown menus, text inputs, and other form elements. Creating consistency across the app with these elements goes a long way to crafting a cohesive look and feel. Additionally, given their frequent use and critical role in usability, considerable attention was devoted to ensure these key components of the experience were meticulously designed and carefully considered.
All types and all states of form inputs, radio buttons, checkboxes, and everything else needed for full configuration of every settings screen across the app.
Alerts & Messaging
Alerts play a vital role in a design system, serving as crucial communication tools that guide and inform users during their interactions. They are essential for enhancing user experience by providing immediate feedback or crucial information, such as error notifications, warnings, or confirmations.
In our copywriting, we were sure to make messages clear and concise, avoiding ambiguity about what the user should know or do next. Consistency in the appearance and behavior of alerts across the system helps users quickly understand and react to the information.
As such, we designed an array of alert types to serve various functions and provide flexibility in our design approaches. The design system offers floating alerts (often referred to as toast messages), inline alerts and text alerts. When designing these elements, we prioritized clarity, consistency, and context.
A wide array of alert types, somethig for every use case and context.
Modals
Modal dialog boxes are crucial in a design system, capturing user attention for important tasks like confirmations or data entry. We designed modals that were full-screen takeovers to ensure they stood out from the background and required user attention. We also prioritized usability, with clear instructions and an intuitive layout to facilitate quick user interactions.
We intentionally reserved modals for only two types of interactions — confirmation actions such as "are you sure you want to delete this?" and creation actions such as "give your learning path a name and we'll get started".
Example of a creation modal and a confirmation modal.
Design Summary
By overhauling the UI, we introduced a clean, modern look with improved navigation and consistency across all modules. The updated design patterns, including simplified workflows and interactive elements, made the LMS not only more appealing but significantly easier to use. This empowered our admin personas to work more efficiently and get more done.
Outcomes
We intentionally released the new UI slowly, one section at a time. Each time a new screen was rolled out, the initial feedback was overwhelmingly positive.
Administrators routinely expressed satisfaction with the streamlined interface and the intuitive interaction patterns, which together created a more enjoyable and engaging learning experience. The new design not only revitalized the platform but also restored faith in the brand, as users could see and feel the commitment to quality and customer satisfaction.
Quantifying the Benefits
The design and implementation of Peak not only enhanced the aesthetic appeal of the application, but also played a crucial role in making admins feel more confident and competent as they created course content, built learning paths and quizzes, enrolled learners, and administered groups and user permissions.
The existence of our design system had tangible benefits for the following groups of people:
Customers
The application used by our admin customers was significantly enhanced due to consistency and usability of the interface. This uniformity reduced user learning time, as familiar patterns and interactions across the platform simplified workflows and reduced confusion. These improvements boosted user efficiency and contributed to higher engagement and satisfaction rates across our user base.
Design Team
The design system vastly improves our designers' ability to create high fidelity mockups quickly and efficiently. Having all of the elements of the UI built with Figma components allows designers to spend more of their time on solving UX problems for our users and less time tinkering with every last pixel and having to make decisions about specific font sizes, hex values, or padding dimensions.
Engineers
Similarly, our front-end engineers are able to move much faster when building out screens and workflows. The handoff from designer to developer is seamless, engineers have confidence in what they are building and the design system removes guesswork as they implement the designs in HTML/CSS/JS code.
Sales Reps
Coming as somewhat of a surprise, we received a great deal of positive feedback from our sales team members as we started to implement components from the new design system. We frequently received glowing reports about the new designs — the UI was 10x better, greatly simplified and enhanced product demonstrations, and increased the pride sales representatives felt when selling the product.
Conclusion
This transformation of the Northpass app made possible by the creation of a comprehensive design system marked a significant step forward for the company, proving that thoughtful design is key to building trust and enhancing user experiences in the increasingly competitive SaaS landscape.
