Monica Moore

Top Hat

Mobile Pages

A Top Hat Page is a content type used for textbook readings and assignments. They can hold text, images, videos, interactive questions, and more. Like an interactive PDF!

The mobile experience was not up to par with the web, making for an inadequate reading experience. Students want to read their textbooks on their phones, wherever they are.

Steps to building out a vision for mobile pages

  1. Comparison to web. What features are needed to reach parity with web?
  2. Competitive analyses. What features exist in other mobile reading apps? How could we delight mobile users with features that don’t exist in web?
  3. User Interviews. Hearing from students about how they use their textbooks and what they need.
  4. Data. What features are used most frequently on web? How are they used?
  5. In-app feedback. Surveying users about their experience to measure improvement over time and hear how we can improve.

Getting in-app feedback

I designed an in-app survey, which would occasionally pop-up while a student was reading. This served 2 purposes: to quantitately measure improvement over time, and to get qualitiative input from users.

What’s needed to meet parity with web?

The web app already had a pretty robust reading experience, and we wanted to at least achieve parity. To do that we needed:

What new features could be useful for mobile?

Some features that would be useful for mobile specifically are:

Improving Readability

The first step was to update the text styles and spacing to be easy and enjoyable to read. Previously the text was pretty raw, and tables were not formatted adequately. I came up with various font styles and spacing to make it suitable for mobile.

Inline Questions

One of the selling features of Top Hat's textbooks is that they include interactive questions. In the app, however, the questions were not inline and had to be opened in a modal. This made it more difficult to refer to the text when answering a question. We wanted to make them inline like on web to make for a smoother experience.

Bottom Navigation

To access the remaining features, I added a bottom navigation. This wouldn't be there while the student is reading, and would appear at the start and when the user scrolls up.


Students can view the table of contents and navigate to a different section via the half page index. This index can be expanded upward to be full screen. I tested out a version that was always full screen, but the half screen was preferred so the user can see the context of the text at the same time as the index.

Highlighting + Notes

On web, students can highlight the text and take notes. It's important that these show up on mobile as well.


Students want to be able to search the text, so I designed a search bar that shows the number of results with arrow to move through the results.

Offline Mode

Lastly, students wanted to be able to read textbooks when they don't have access to wifi, such as their commute to school.