Migration & Design System - to deliver a unified and consistent digital experience in higher education
UX & UI Design
Automated QA Test Suite
We teamed up with Stanford Graduate School of Business, the world's top-ranked business school, to migrate their website and implement a design system.
Our collaboration involved migrating first to Drupal 8 and later upgrading it to Drupal 9. We implemented a user-friendly design system based on material design, ensuring mobile-friendliness and accessibility.
Our work included standardizing the UI for a consistent look and enhancing the content authoring experience, all aimed at delivering an exceptional web presence for Stanford GSB.
There were several challenges, starting with an outdated, hard-to-maintain website that was neither mobile-friendly nor compliant with the school's accessibility standards. Migrating from Drupal 7 to Drupal 8 presented a complex shift, requiring consistent user experience for both students and faculty.
The Course Research and Registration platform required a significant update due to outdated design and usability issues, which frustrated the students. Revamping vertical filters and navigation, enhancing component designs, and ensuring full-width page support were vital.
We decided to adopt a lean UX methodology, where we engaged in rapid prototyping to deliver designs promptly, incorporating real user feedback. Our vision prioritized scalability, achieved through a unified design system built on a foundation of reusable components and defined principles.
To ensure scalability, we employed the atomic design methodology consistently throughout the project. We also initiated an information architecture revamp to enhance the overall user experience.
We executed a comprehensive digital transformation project, involving the revamp of four significant digital experiences, highlighting the scale of our collaboration with GSB.
We began by migrating the school's website from Drupal 7 to Drupal 8, a more modern and scalable platform. Subsequently, we upgraded it to Drupal 9. To ensure design consistency, we employed Pattern Labs to create a component library that houses reusable UI components.
To streamline content management, we utilized Paragraphs to develop reusable content blocks, suitable for various pages and content types. Automation played a pivotal role in this project, with the creation of a testing framework that identified over 5,000 data issues on the old site within 10 seconds. We also automated the data migration process, successfully migrating over 50,000 entities.
We undertook a comprehensive redesign of GSB's website, focusing on enhancing user-friendliness and accessibility while providing customization options for site authors.
The redesign involved transforming the Page Index into a horizontal navigation system, offering an intuitive approach for a seamless and immersive user experience. We introduced flexible video hero options in a carousel format to boost user engagement and enable dynamic storytelling.
We implemented customized CTAs providing content authors with quick and accessible links, granting them complete control over visibility. A flexible design grid was integrated, allowing content authors to select components and create various layouts, enhancing usability and the overall user experience. The result is a new website with a visually engaging UI that's also mobile-friendly.
We developed a unified library of components, patterns, and guiding principles for the school's platforms and apps, creating a structured approach for their design. Our efforts extended to building unique, scalable components, incorporating atomic components for cohesive experiences.
These distinctive UI elements were crafted to be reused across GSB's applications, complete with auto-layout components that accommodate multiple states and variations. Throughout the process, we ensured the design system's responsiveness across multiple platforms.
We introduced a new, user-friendly platform for students, simplifying the process of researching and registering for courses. This platform offers comprehensive course details, allowing students to compare subjects, review course curricula, and access information about instructors, timings, future prospects, and ratings, empowering them to make well-informed decisions about their academic journey.
We established a common lobby where students can easily navigate between research and registration based on their preferences. All relevant course data, including overviews, timings, instructors, grading methods, ratings, links, and resources, is consolidated on a single landing page titled "Course Details."
We incorporated a study plan under Research to guide new students in understanding the required units and courses across multiple areas. We revamped the Course Listing design for study plans, electives, wishlists, and registration, creating a consistent user interface and restructured layout that enhances data accessibility from a student's perspective.
With a user-friendly, modern design that seamlessly aligns with its brand identity, GSB now offers an intuitive and consistent user experience across all its digital channels. The new website and all internal platforms meet WCAG 2.1 AA accessibility standards expanding the reach to a broader audience.
The school’s content teams can now create, edit, and manage content seamlessly without relying heavily on developer support. Stanford GSB is able to deliver enriched digital experiences equipped with advanced features for its students, educators, staff, alumni, and visitors.