SAVVAS LEARNING
Teacher Guide | Platform
THE COMPANY
Savvas Learning Company is a next-generation learning company that combines new ideas, new ways of thinking, and new ways of interacting to create innovative learning solutions.
THE STORY
The objective was to develop an ePub version of the Teacher's Guide for the latest Science program, emphasizing the attainment of WCAG 2.1 AA compliance. This also involved revamping a previously static layout with limited responsiveness. The primary goal was to streamline the content from the printed edition while retaining the product's visual identity, ultimately enhancing the digital experience for educators. A notable challenge entailed devising an accessible solution for a table found in the print version, ensuring its usability on both desktop and mobile viewports
.
THE ROLE
UI/UX designer collaborating with senior management and instructional design to provide a strategic solution. This involved working closely with stakeholders to understand their needs and goals and then developing a design that would meet those needs.
THE PROCESS
After working with the Design Director and Design Manager, we chose a minor/major column layout and grid. The reference imagery would go in the minor column, and the content would flow in the major column. This helped to reduce visual clutter and make the content easier to read.
We also decided to tuck the majority of the guide content into accordions. This allowed teachers to expand all or by section, depending on their needs. For the smaller viewport, everything became a single column. This ensured that the content was still readable on smaller screens.
The planner was designed to look like a table, but it was actually set in CSS for accessibility. Each experience had a tab. One of the challenges was to make the planner work in a smaller viewport. I did personal research on best practices and accessibility and designed an alternate tab solution that would work for smaller viewports. I simplified the tab system to achieve this. I enjoyed the visual research and design of translating the planner to the smaller viewport.
Due to time constraints, we went straight into prototyping. I collaborated with Instructional Design to create a prototype that simplified the experience, starting with a few key pages. After several iterations, I fleshed out the remaining pages. This was followed by the smaller viewport reflow for a zoomed layout.
The prototype was presented and approved by the stakeholders. The Sketch file was output in Zeplin and sent to the vendor developer.
Digital Product Solution
Below, is the first spread of the print version of the Teachers Guide translated for our digital platform Savvas Realize. A simplified minor/major column layout reduced visual clutter and improved the user experience
Original Print Layout
Lesson Landing Page Closed
Lesson Landing Page Open
Topic Planner
Two print spreads were translated into one ePub page. Tabs were used for the teachers to access the different experiences
For the Zoom view, I designed a simplified layout so we could maintain a consistent experience
Original Print Layout
1
2
1
3
Digital Solution: Pages Translated to Tab System
3
2
1
Zoomed Responsive View
2
2
1
3
First Tab Selected
THE OUTCOMES
As a result of simplifying the design, we only needed to prototype one lesson. This also allowed for a less complicated review. The simplified design included:
-
A minor/major column layout with images in the minor column. This reduced visual clutter and improved the user experience
-
Two versions of a tab system replaced a table in the print at two different viewports. This ensured that the design was accessible to all users
-
The interface was simplified to mirror the look of the platform redesign, rather than keeping fidelity with the print book
THE REFLECTION
I faced several challenges during this project. Shortly after beginning, my manager left, leaving me to work directly with the design director, who, due to her many responsibilities, provided clear guidance but had limited availability for in-depth collaboration. Despite this, I gained valuable insights into strengthening relationships with cross-functional team members by actively seeking their input, asking relevant questions, and tapping into their knowledge of user needs and past successes or failures.
Additionally, learned the critical importance of effective communication with vendors by experiencing the complexity of vendor interactions and their impact on project outcomes.
Building upon my newfound skills and product understanding, I developed a comprehensive checklist of UI elements that were often overlooked in the prototype phase but proved essential in the final product. This approach resulted in fewer iterations and a more streamlined delivery process, ultimately saving time and resources.