5D EdTech Project: A Real-World Example

by | 5D, Case Study, EdTech

A gradient blue background image with a light to dark transition. On the left side of the image, the text "5D Case Study" is written in large, bold white font. Below this, in a smaller white font, is the text "New ways to learn in the classroom."

Take a look to see how we executed a real EdTech project using our 5D production process, delivering outstanding results for the client and users!

Based on the positive feedback to the 5D User Guide, we have created a series of real life examples of how SparxWorks used 5D to support great results for clients.

More case studies to follow!

See more here

White background with Sparxworks logo at the top left. The title "IMPLEMENTING 5D" is in bold, dark blue letters. Below it, in slightly smaller dark blue letters, is "INSIDE REAL WORLD CASE STUDIES."
Sparxworks logo at the top left of a white background. The headline reads "DID YOU KNOW?". Below, a simple line drawing of a child's head in profile, facing right, contains a blue speech bubble. The speech bubble states, "students retain up to 75% more information when learning through interactive content instead of traditional methods?" Below the head image is text prompting the user to read a case study on how Sparxworks used 5D to help a global education publisher transform its STEM learning materials. At the very bottom, the text reads "PROJECT: NEW WAYS TO LEARN IN THE CLASSROOM" followed by a a blue circle containing a blue arrow pointing right.
White background with Sparxworks logo at top left. Headline "THE PROJECT" and text "The client approached us with a specific request:" A speech bubble contains the quote "update the existing interactive content on our educational platform". Below, a cartoon figure of a child with blue hair gestures from inside a computer monitor. At the bottom, "PROJECT: NEW WAYS TO LEARN IN THE CLASSROOM" with a a blue circle containing a blue arrow pointing right.
White background with Sparxworks logo at the top left. The title "METHODOLOGY 5D'S" is in bold, dark blue letters. Below it is text: "As we will illustrate in this case, we were able to bypass the Discovery phase and proceeded directly to the Define and Design phases." A diagram with a lightbulb icon for Discover, a target icon for Define, a pen icon for Design, a computer screen icon for Develop, and a box with a gear icon for Deploy. Dashed lines connect the icons in a winding path. The phases are numbered 1 through 5 below their respective icons. At the bottom is "PROJECT: NEW WAYS TO LEARN IN THE CLASSROOM" with a a blue circle containing a blue arrow pointing right.
"Sparxworks logo in the top left corner. The main section of the image is titled ""THE CHALLENGES"" in bold, large font. Below the title, three challenges are listed in separate boxes, each with a blue header and a more detailed explanation beneath. Box 1: THE CONTENT WAS OUTDATED: As visual trends evolve and interactive content development tools advance, modern audiences expect fresh, engaging visuals that align with their daily digital experiences and instantly capture their attention. Box 2: THE CONTENT LACKED SUFFICIENT ACCESSIBILITY AND DID NOT COMPLY WITH WCAG GUIDELINES: Because it was developed several years ago, accessibility was not a consideration at the time. However, today, ensuring accessible content is not just a smart business decision—it is a mandatory requirement for any content sold in the education market. Box 3: THE CONTENT WAS NOT DESIGNED TO BE USED ON A VARIETY OF DEVICES OR SCREENS: The content was designed for a fixed screen size and lacked adaptability. With today's diverse range of screen formats and resolutions, this became a drawback, as it often appeared too small on larger monitors. This limitation negatively impacted usability, reducing engagement and ultimately affecting sales. In the top right corner, above the challenge boxes, there is a simple line-art illustration of a trophy cup. At the bottom of the image, aligned with the left edge, is the text ""PROJECT: NEW WAYS TO LEARN IN THE CLASSROOM"" in a smaller font. To the right of this text, a blue circle contains a blue arrow pointing right."
Sparxworks logo in the top left corner. The main section is titled "THE SOLUTIONS" in bold, large font, with a sub-heading "THE 5D PROCESS IN ACTION" below. Three solutions are listed in separate sections, each with a blue icon of a life preserver and a descriptive title and explanation. Section 1 reads: "UPDATE THE CONTENT WITH A FRESH UX/UI: Since this was an existing application with clear user personas, defined goals, and strong supporting data, we were able to skip a formal Discovery phase. We proposed starting with a combined Define and Design phase which allowed us to focus time and resources on refreshing the interface and improving the visual components." Section 2 reads: "MADE THE CONTENT ACCESSIBLE AND LOCALIZABLE: During the combined Define and Design phase, we assessed impacts of WCAG guidelines (2.1 AA at that time) to all new interactive content. Additionally, both the design and development were strategically planned to streamline and accelerate the localization process." Section 3 reads: "A SOLUTION THAT ADAPTS TO ANY SCREEN SIZE: During the Development Phase, a "responsive development" approach was implemented. Based on the outputs of the Define and Design phase, we knew that we needed to contemplate a variety of screen options and thus created the asset designs as vector graphics preventing quality loss when scaled for future devices." At the bottom of the image, aligned with the left edge, is the text "PROJECT: NEW WAYS TO LEARN IN THE CLASSROOM" in a smaller font. To the right of this text, a blue circle contains a blue arrow pointing right.
Sparxworks logo in the top left corner. The main section is titled "THE RESULTS" in bold, large font. Three key results are listed in separate sections, each with a descriptive title, an accompanying icon, and a detailed explanation. Section 1: VISUALLY APPEALING AND USER-FRIENDLY CONTENT. Icon: A blue outlined hand giving a thumbs-up gesture. Explanation: By applying modern visual styles and design principles, the content was more appealing to new generations of students, sparking their interest in interacting with the platform and increasing overall engagement. Section 2: REACH MORE STUDENTS AROUND THE WORLD CREATING NEW GROWTH OPPORTUNITIES. Icon: A blue outlined globe with stylized representations of people around it. Explanation: With a more efficient localization process, content can now be seamlessly adapted for different regions. Additionally, improved accessibility ensures that students with disabilities can fully engage with the material, broadening the audience and increasing impact. Section 3: SEAMLESS ACCESSIBILITY ACROSS DEVICES AND SCREEN SIZES. Icon: An outlined computer monitor. Explanation: The content can now be accessed from any computer and displayed on screens of any size, enhancing compatibility with current and future formats. At the bottom of the image, aligned with the left edge, is the text "PROJECT: NEW WAYS TO LEARN IN THE CLASSROOM" in a smaller font. To the right of this text, a blue circle contains a blue arrow pointing right.
Sparxworks logo in the top left corner. A quote text occupies the majority of the image, containing the following: "This was a high impact project that combined UI/UX, illustration, and animation to refresh an existing STEM curriculum, bringing it to life with the level of precision and realism today's students expect from the high-quality multimedia they engage with every day. The 5D production process gave us a structured framework that not only maximized ROI for the client but also ensured the curriculum's long-term value." Below the quote bubble, aligned to the left, is the following text: Satomi Asuy ART DIRECTOR. At the bottom of the image, aligned with the left edge, is the text "PROJECT: NEW WAYS TO LEARN IN THE CLASSROOM" in a smaller font. To the right of this text, a blue circle contains a blue arrow pointing right.
White background with centered text that reads "LEARN MORE AT www.sparxworks.com" in a dark blue, bold font. At the bottom, "© 2025 SPARXWORKS INC. ALL RIGHTS RESERVED." in a smaller, lighter font.
Download PDF

Recent Posts

Figma vs Adobe XD

Figma vs Adobe XD

Dec 15, 2023 |

Figma transforms EdTech design with seamless collaboration, powering innovation across all devices and revolutionizing your design work with Figma’s clients.

read more

WANT TO READ MORE? VISIT OUR BLOGS

SparxWorks blog
Billy's blog
Sarina's blog