Developing talents of gifted students

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 programmes offered by Johns Hopkins Centre 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 programmes. During the school year many students work with CTY’s online learning programmes 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 organisation, with students from over 100 countries,” says Tricia Schellenbach, Senior Director, Communications and Marketing for CTY. “Online learning is a key component of CTY programmes. About 14,000 students enrol in our online learning programmes every year. We want all of our students to have a really wonderful experience in their classrooms, whether they’re virtual or in-person.”

Modernising the online learning experience

CTY operates its own learning management system (LMS). Based on user feedback, the organisation 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-centred 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 colours 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 colour 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 colour 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 straightaway. 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-centred 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.”

Design spec tools streamline development

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 log in 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 colours 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.”

Preparing the LMS for future developments

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, colours, fonts and other design elements.

CTY is currently preparing to roll out the newly re-designed LMS. “I hope that students will be using this design system for years to come,” says Robert Arena, Senior Director of Online Programmes at CTY. “Even as new technologies emerge, we have confidence that we can adapt the visual design easily as we grow.”

See all customer stories

/gr_en/fragments/customer-success-stories/contact-footer-number