Cengage Mobile App
Improvements to an existing product • Mobile app
Cengage makes courseware, books, and other educational materials for the Higher Ed (college and trade schools), K-12, English language, and continuing education markets.
Updating the IA and Navigation
The Cengage Mobile App had been neglected for a while. Designed piecemeal by multiple people and implemented over time, the experience was inconsistent and confusing. Some of the navigation was hidden behind an icon, making discovery challenging, while parts of the app were accessed through a slide-up bottom panel. Students struggled to move between courses and assignments, and things they most wanted to know—when assignments were due and if they could be done using the app, could only be seen by going into the details of each activity.
This was work I proactively initiated and proposed to the TPM.
Areas identified for improvement
Homescreen that doesn’t meet student’s needs
Multiple hidden navigation menus
Inconsistent presentation of information
Pertinent details are confusing or missing
My role on this project
IA & Navigation
Designed an architecture and navigation system that supports students enrolled in single or multiple Cengage courses, as well as students only using the reader.
Validation
Built prototypes, wrote scripts, and conducted several rounds of moderated and unmoderated user testing to validate the solutions.
Visual Design
Overhauled the visual design to be consistent across the entire app and a11y compliant. Adapted and expanded our design system to meet the specific needs of mobile.
The TPM and I decided that improving the homescreen would provide the highest immediate impact, so we started there. These are just a few of the variations I explored.
Homescreen designs evolved into these three options I tested with users to answer the key questions:
What is the right amount of information? What do students need to see first?
Next, I designed and tested many IA and navigation options to support known use cases:
Some students are enrolled in a single Cengage course
Some students are enrolled in multiple Cengage courses and need to switch between them
Some students don’t have any Cengage courses but are using Cengage books
Some courses have multiple books
Some instructors use the app during class to take attendance and launch polls
These are just some of the architectures I considered before settling on a final design.
Final Designs
With the new IA and navigation, students easily find everything they need to complete their schoolwork.
Homescreen
Activities due today
Books
Modernizing the Pronunciation Activity
The Pronunciation Activity helps students learn to pronounce terms by listening to a term, then recording themselves saying it. Mainly used in language and medical terminology courses, most instructors encourage students to keep practicing by allowing an unlimited number of attempts.
Although the Pronunciation Activity is one of the most used features of the Cengage Mobile App, it was clunky, visually outdated, and not engaging. We did not support the way students want to learn, for example, allowing them to skip terms or focus on terms they pronounced incorrectly. Students were confused by their scores and struggled to see how they were doing. They often unintentionally submitted incomplete work, leading to lower grades.
Areas identified for improvement
Confusion about how to listen to and record terms
Awkward navigation between terms using a scrolling list
Ugly and unprofessional visuals that were not accessibility compliant
Ambiguous scoring that caused students to submit incomplete work
My role on this project
Interaction
Created a modern, gamified activity that clearly indicates a student’s current score and encourages successful activity completion.
IA& Navigation
Improved the navigation to support individualized learning methods by allowing users to move as they wish within the activity.
Visual Design
Revamped the visual design to incorporate and expand our design standards and comply with a11y guidelines.
Copy
Collaborated with the content team to clarify messaging and eliminate confusion when submitting the activity.
Final Designs
I designed an interaction that allows users to confidently listen to terms, record themselves pronouncing the terms, and listen back to their recordings.
Unanswered
Correct
Incorrect
Students can keep trying
Empty states encourage students
Attempts have been submitted
Reader Improvements
In a regular digital book, users expect page content to fit the device screen and paginate appropriately. For digital textbooks, the page number is tied to a physical book with the assumption that content is consistent between them (Imagine an instructor saying “Look at the passage on page 257”). But, how does a 10” x 10” printed page translate to a phone? When content is reflowed to fit the phone, the endpoint of a printed page could occur in the middle of a sentence. Where does the page break go?
The previous solution was to remove all page numbers. Users hated it and complained…a lot!
My role on this project
Interaction
Designed and prototyped multiple approaches to paging through a textbook and quickly getting to a specific page.
Validation
Wrote and conducted several rounds of user testing to explore and validate solutions.
Visual Design
Simplified and refreshed the visual presentation of the reader and improved its accessibility.
Final Designs
It may not look like much, but the reading experience now matches the student’s mental model and has greatly improved the app’s most used feature.
Reader, with page numbers
Go to page
Reader display options