Modernizing the online learning experience
CTY operates its own learning management system (LMS). Based on user feedback, the organization decided to upgrade its LMS to improve the look and feel, while making the system more accessible and flexible for all types of learners.
For the project, CTY engaged leaders and instructors at CTY, colleagues from the Johns Hopkins University School of Education, an instructional design agency, and an agency focused on user experience/user interface (UX/UI) design. FreshForm, an experience design and innovation agency that creates end-to-end experiences across any platform, served as both the UX/UI design agency and lead project management agency. Rather than just designing to specifications, FreshForm prides itself on using a people-centered design approach to observe and listen and then build an ideal experience based on what people truly need.
The agency knew that it would need a highly collaborative platform to help all parties feel equally involved and heard during the design process. FreshForm decided to work with Adobe XD, the user experience design and prototyping tool within Adobe Creative Cloud.
FreshForm uses Adobe Creative Cloud apps every day to create beautiful iconography, interfaces, applications, prototypes, and design systems. The CTY project was the agency’s first opportunity to use Adobe XD from start to finish in a project. “Adobe XD worked really well for us, allowing us to greatly improve how we collaborated with multiple remote teams on a single design system,” says Michelle Peck, Vice President of Experience at FreshForm.
Working together toward LMS redesign
After a series of workshops and expert interviews with course designers, instructors, and other stakeholders at CTY in Baltimore, Maryland, the FreshForm team returned to their office in San Diego, California. FreshForm’s team continued to work on designing an LMS that met accessibility standards, such as high contrast colors and large font sizes, while remaining visually appealing and providing an excellent student experience.
FreshForm used an atomic design approach. Rather than outlining big picture elements such as page layouts and filling in the details later, FreshForm started the design from elements such as color palettes, typography, iconography, and navigational style. After stakeholders agreed on the direction of these detailed elements, FreshForm started building out larger components.
“One of the advantages of the atomic design approach is that stakeholders can focus first on core elements rather than being overwhelmed with a complete, visual design system all at once,” says Randal Hollis, Experience Designer at FreshForm. “This allowed us to consider details, such as how the color red would affect students’ experiences, in more depth.”
FreshForm worked closely with stakeholder teams, first to iron out the details on these core elements, and then combine core elements into buttons, lists, layouts, and other elements of design. Working in Adobe XD made it much easier to share designs for the weekly meetings.
Rather than exporting progress to individual files, FreshForm used the share feature in Adobe XD to email stakeholders a link to the project. In addition to giving stakeholders a better understanding of the actual user experience, using the share feature meant FreshForm never had to worry about files getting lost or spending hours trying to consolidate separate feedback files from multiple stakeholders. This reduced confusion and helped to keep the project on schedule, under a tight timeline.
“Stakeholders added feedback to the same prototype document, allowing everyone to see all comments in one place,” says Hollis. “We could then make adjustments and share changes right away. Working with Adobe XD helped all of our stakeholders feel like they were right there working beside us for a fluid collaboration that elevated the project to achieve a student-centered result.”
After fleshing out the look and feel of the LMS design, FreshForm dropped the Adobe XD design elements into a live LMS prototype and sought feedback from the most important stakeholders: the students. Real CTY students tested the prototype and delivered detailed feedback about navigation, visuals, and overall usability.
“Having the students’ feedback really validated and reinforced the decisions we had made along the way,” says Hollis. “We demonstrated to stakeholders that we created a cohesive experience with visuals that quickly orient students and make them feel at home in this virtual schoolhouse.”