lynsey.design – the portfolio of lynsey gwin
MasteryPrep
Helping students dream bigger
Every student deserves to graduate high school with a college-ready standardized test score.
The problem is that a lot of kids don’t have access to the same resources as others, and with the effects of the recent pandemic, that gap became larger than ever. MasteryPrep approaches that problem by partnering with schools and providing resources to prepare students for standardized tests.
For a while, the digital prep products were simply a supplement to the in-person programs MasteryPrep offered for students and teachers. It made sense to use third party products as supplements at first, but as MasteryPrep recognized the potential of digital products, they realized they would need a cohesive system built from the ground up. Their CTO brought me in to lead design over their full suite of digital products.
Discovery
Getting Closer to the Target
We took an in-depth approach to discovering the different needs of a diverse range of students, teachers and administrators. To design this system of products properly, I needed an understanding of the education process, the school and government systems, and the different priorities of the users.
Through research and personal interviews, I developed personas of students and teachers that best represent the MasteryPrep audience. Some teachers simply wanted to access tools quickly, while others wanted to dig deeper to pinpoint certain issues. Many students had unique needs, and required customized testing options and accessibility features.
I researched competitors and comparable products, exploring different features and solutions for the issues MasteryPrep needed to address. Armed with research and data, I performed a full audit of the current products, giving analysis and recommendations for feature improvements and a roadmap for the future.
Design
Creating a Successful Experience
After presenting my Discovery findings to the team, I created user flows, wireframes and full designs for the entire family of MasteryPrep Products. Collaboration was essential, and I worked directly with their team at all levels throughout the project.
Beyond specific features and program improvements, I found design needs that would be critical for this digital evolution to be successful. It was imperative for the developers to have a consistent framework across the full family of products.
For simplicity and consistency, I used the Material UI Framework, making development much easier and more cost effective. Our team went through multiple phases of iterations, carefully customizing this framework to fit the project’s needs.
I worked directly with the CTO, management, and the Development Team to help them overcome the roadblocks they were facing with the old system. They needed a cohesive in-house system under one code base, one that would reduce their technical debt and expand what was possible. We built a streamlined family of digital products that has positioned MasteryPrep to scale, reach more students, and tap into a valuable revenue stream.
Snap
Snap is MasteryPrep’s first product that is fully online and self guided. With a course builder and the ability for authors to customize user flows with conditional logic, it offers a personalized experience that emulates an in-person tutoring environment. I designed screens and led audits with the development team to ensure proper accessibility and accurate design implementation for mobile, tablet, and desktop screens.
TruScore
TruScore is a customizable platform, with practice tests made to mimic real standardized tests. Questions correspond to “knowledge nodes”, which breaks down into a map showing which specific areas different students need help with. TruScore also incorporates bubble sheets, breaks down scoring to provide reporting, and feeds into Study Hall to create recommendations for additional lessons.
With the potential to provide in-depth reporting with filters, breakdowns, and comparisons, it became critical to focus on the most useful features. We had to create an interface as clean and straightforward as possible.
Bubble Sheets
Bubble sheets virtually scores practice tests mapped from actual standardized test questions, and is formatted to give a realistic test experience. By giving this process a clean virtual interface, data entry and reporting for scores becomes much more streamlined, and teachers are able to feed results directly into Study Hall.
Elements
Elements is a great tool for teachers to help their students warm up for the day by facilitating a guided discussion. With Elements, quick lessons are displayed on a screen for the students, guided and timed, and can be tracked, allowing teachers to give immediate feedback, and prepare for upcoming lessons.
Mastery Resources
Mastery Resources is a digital product designed to use as a compliment to MasteryPrep’s physical workbooks. It was designed based on workbook content, for teachers in classrooms with supplemental materials such as virtual content and tests, and data and reporting to show where students need extra help.
Accessibility
Creating Opportunities for All
It became paramount that MasteryPrep’s product line was accessible to as many students and teachers as possible. When getting contracts with state run entities, accessibility is a requirement and we needed to complete a Voluntary Product Assessment Template (VPAT) for MasteryPrep’s product line to be compliant. I lead the accessibility initiative for MasteryPrep’s products, driving development towards compliance with the Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG) for the entire product line.
With accessibility training, I successfully created a VPAT for each of MasteryPrep’s virtual products. I also led the development team through other compliance steps, helping them stay consistent with my compliant designs. By using automated tools and manually testing code, we are able to continue compliance processes at every level for each MasteryPrep product.
The initial VPAT review results. This document is actively addressed and updated.
Design System
A Foundation for Evolution
For a project spanning almost two years, multiple products, and too many screens to count, having a detailed design system is simply critical. Delivering design files without guidelines or followup can create a lot of issues very quickly.
To create consistency and team adoption, I communicated regularly with the management and development team, and built a style guide to explain when and how to build new screens, states, and patterns. By building out a design system, the team is able save time when creating new, smaller screens and element states, giving developers a reference point and way to check their work.
This design system is constantly evolving as our understanding of product use grows, helping us to expand products and make them more useful. When additional comps are required, our full design system saves design time and ensures consistency.
I can't say enough good things about Lynsey. If you need an excellent UX/UI designer, then I highly recommend you contact Lynsey.
Christopher Jones, CTO, MasteryPrep