Creating better student outcomes is central to the mission of The Exchange. While providing educators with the functional tools they need to do their jobs more efficiently and effectively to aid in that mission lays the foundation for each of our products, there is one facet of our Human-Centered Design Process that builds up from that foundation to create layers of meaning and usability: UX/UI Design.
To some, it may seem like UX/UI Design elements like fonts, colors, spacing, etc., are merely decorative, but they hold many essential functions above and below the surface of each application in The Exchange. Read on to learn how The Exchange team has leveraged these elements to make products more intuitive, accessible, and effective for educators.
What is UX/UI Design?
UX/UI Design consists of two parts: “UX” stands for “User Experience,” and “UI” stands for “User Interface”. Both are essential in creating user-friendly and visually appealing products.
In the “User Experience” phase of a project, user research lays the foundation for an application. That research leads to user journeys, which then inform product requirements. From there, UX Strategists use those requirements to create wireframes or rough visual outlines of an application’s organization.
What comes next is “User Interface” design, where a designer builds upon the work done in the UX phase to add the visuals to a product while keeping the initial research in mind. Every layout, image, font, color, etc., is informed by what users have said they need to complete their work. The visuals must also be consistent with other product designs and must be on-brand.
From here, the Human-Centered Design Process continues in a cycle; our teams interview more people and make revisions to suit the user’s needs better.
One Set of Tools Across Many Teams
The UX/UI Design process for The Exchange included multiple partners, each with their own teams of UX Strategists and UI Designers. This meant there was a high potential for slightly different visual interpretations of the research as well as deviations from The Exchange’s visual identity. Even slight differences between interactive elements from app to app can make a user’s experience less seamless or confusing. The Exchange needed a common set of tools for the various teams to use when creating applications. The solution for this need was The Exchange Design System.
The Exchange Design System is a set of ready-to-use files containing pre-loaded fonts, colors, and components, guidance documents on using the visual elements, and developer resources connected to a central code base that gives all partners a running start to development.
The complete set of files in the design system includes:
A UX/UI Guidelines document outlining standards for Web Content Accessibility Guidelines (WCAG) Accessibility, typography, colors, and more.
A continuously updated library of components, color and type styles, and icon sets for each design team to use, making design and development processes faster and more efficient.
A Storybook site containing guidance with embedded code snippets for developers to copy and use in building products.
A central SDK (Software Development Kit) containing the building blocks for all applications in The Exchange.
How UX/UI Design Benefits Users
If you’ve ever had to use one platform to start a task and another one to finish it, you might have experienced the confusion or, at the very least, friction of having different user interfaces in each one. Any minor differences between applications (for example, a different navigation paradigm or menu for each) can make a user’s experience less seamless and might even require them to re-learn how to use an application each time they switch back to it.
The UX/UI work done for The Exchange Design System laid a foundation to allow that easy transition from one app to the next so educators can complete their tasks more effectively. Consistent patterns, like having the same header in each application to help users understand how to switch between apps or using the same sidebar design so they don’t have to look for a slightly different menu, all add up to a more integrated and clear experience.
Caption: Common navigation paradigms like top bars and sidebars are used across The Exchange to help users more quickly understand the product and how to get from one to another.
All layouts, language, components, colors, etc., in each application in The Exchange are considered through the lens of creating a better experience for the end-user, which means it’s not just about using a cool color palette or attractive font — it’s about using colors meaningfully and consistently and using fonts in a way that guide the user’s eye to the most critical information. It’s also about meeting accessibility standards so that the products are usable and useful for everyone.
An Iterative Process
Just like the functionality of applications within The Exchange will continue to grow to better meet the needs of educators, so will the design system. The cycle of the Human-Centered Design Process will lead to system additions and revisions, all with the goal of better user experiences for everyone who uses The Exchange.