San Diego, California
Johns Hopkins Center for Talented Youth
Students in online programs: 14,000+
Used integration between creative apps to quickly develop and use high-quality visuals
Collaborated with multiple stakeholders through a single creative document.
Streamlined development by providing clear design guidelines and specifications.
Delivered accessible virtual classroom to meet the needs of 14,000 gifted students.
Used integration between creative apps to quickly develop and use high-quality visuals.
Every so often, academically advanced children excel beyond the classes offered at a typical elementary or secondary school. Thousands of these talented students continue to push the limits of their academic abilities by challenging themselves through programs offered by Johns Hopkins Center for Talented Youth (CTY).
CTY is dedicated to identifying and developing the talents of academically advanced pre-college students from around the world. Every year about 9,000 students come together to participate in summer programs. During the school year many students work with CTY’s online learning programs to connect with instructors and build on their academic strengths while maintaining the flexibility to learn wherever and whenever works best for them.
“We’re a truly global organization, with students from over 100 countries,” says Tricia Schellenbach, Senior Director, Communications and Marketing for CTY. “Online learning is a key component of CTY programs. About 14,000 students enroll in our online learning programs every year. We want all of our students to have a really wonderful experience in their classrooms, whether they’re virtual or in-person.”
Vice President of Experience, FreshForm
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.
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.”
Experience Designer, FreshForm
FreshForm designers appreciated the integration with other Adobe Creative Cloud apps. Designers developed icons in Adobe Illustrator, while Adobe Photoshop was used to edit images for the login page. Designers could easily bring those finished assets into Adobe XD to create the style tiles.
Adobe XD also extended ease of collaboration to the FreshForm web development team. Sharing published design specs gave developers more than just visual references. They can click on colors and see the dimensions of images and buttons to quickly determine the style and specs for each element. This helped streamline and accelerate coding and quality assurance testing.
“We worked with our web developers to make changes to the LMS,” says Hollis. “We would make the changes on the Adobe XD prototype and then the developers could immediately take those changes and translate them to the production design.”
The new LMS is extremely flexible and the design is fully responsive for display on any device. While the students who tested the LMS disliked learning on the smaller screens of smartphones, tablets proved to be a very popular alternative to desktops.
FreshForm is contributing to future planning with a style guide that it created using Adobe XD. The document contains specifications and standards for dozens of design elements. Once the agency has trained course designers to understand the instructional and visual design rules, they will be empowered to update the system and develop new lessons for the LMS. The Adobe XD style guide will help course designers easily maintain consistent design over hundreds of courses by providing a single source to quickly find all icons, colors, fonts, and other design elements.
CTY is currently preparing to roll out the newly redesigned LMS. “I hope that students will be using this design system for years to come,” says Robert Arena, Senior Director of Online Programs at CTY. “Even as new technologies emerge, we have confidence that we can adapt the visual design easily as we grow.”