2U Coursework Downloads: Coursework On the Go

  • UX
  • UI
  • Mobile
  • Research
2U Coursework Downloads

iPhone Prototype iPad Prototype

2U's core users, the students, are often busy professionals and parents. They pursue advanced degrees in the hopes of securing better opportunities, increased salaries, improved job performance and, and greater life satisfaction. While they're constantly on the go, the Mobile Campus apps on iOS and Android allow students to complete coursework and move toward their goals, wherever they may go.

About 2U

2U is an educational tech firm that helps top universities bring advanced education to students worldwide. The company offers a wide range of services covering the student lifecycle, including marketing, matriculation, retention, online course development, student placement, and learning management software.

My Role

As a Product Designer at 2U, I was the lead designer on the Mobile Campus team. Under my guidance as lead designer, the apps became more stable and user friendly as I adopted native design patterns for each platform, as well as more efficient as I prioritized features most aligned with students' needs, and the strengths of mobile devices.

My Team

Working closely with a Product Manager, an Engineering Director and a team of remote developers, I designed solutions to improve the mobile experience for iPhone, iPad, and Android devices. Prior to a Business Analyst joining the team, I assumed part of her responsibilities in understanding business goals. One of the company's strengths is its alignment of business goals with user goals. The company's dedication to student outcomes ensured that my work as a designer who champions users were supported by the business.

In addition to collaborating with the Mobile Campus team, I consulted my peers on the User Experience team in design critiques and with cross-platform meetings to create consensus across product teams. I also worked with dedicated User Researchers to better understand how students use Mobile Campus and its desktop counterpart at scale.

Understanding the Problem

User Research

Due in part to the legacy of feature parity across the desktop and mobile experiences, the mobile apps were not streamlined for iOS and Android. Reviewing Net Promoter Score (NPS) **surveys** and conducting user interviews and contextual inquiries I discovered 2 key frustrations from users:

  1. Coursework, the content students most engage with, is hidden several taps into the app.
  2. Downloading content takes a long time, and it's unclear when they're complete.
Additional pain points users shared that were out of the scope of the project.

Additional pain points users shared that were out of the scope of the project.

One student explained:

As a busy professional, I want to complete my coursework as quickly as possible. Downloads seem to take a long time, and I have no way of knowing when they'll be finished!

Speaking with users across different degree programs and with different technical abilities further validated these concerns.

Empathy Building and User Journey Mapping

In an effort to understand and communicate students' perspectives more clearly, I decided to download the apps for myself and document the experience.

Android vs. iOS

As an avid Android user, I am no stranger to the bias designers and developers have toward the platform, showing a clear preference for iOS. Using the Android app, I saw pretty quickly that there were several opportunities to update the app to use new and improved design patterns introduced in the Google Material Design Guidelines.

For example, one way I was able to improve the experience immediately was by moving the navigation bar from the top of the app to the bottom, bringing the controls squarely within reach of user's thumbs. Overtime, implementing native patterns had the added benefit of reducing its complexity on both the backend and frontend, resulting in a refined user experience, increased stability, and improved load times.

The legacy Android app used the older Android top navigation pattern.

The legacy Android app used the older Android top navigation pattern. Active icons were not displayed, creating a "musical chairs" effect with the icons on the navigation.

The updated Android app moved the icons to the bottom within reach of thumbs with a larger tap target.

The updated Android app moved the icons to the bottom within reach of thumbs with a larger tap target. The active icon is also clearly displayed.

To ensure I didn't impart my own bias as an Android user on designing for iOS, I acquired an iPhone and an iPad to immerse myself in iOS and Apple's Human Interface Guidelines. Dual wielding both an iOS and Android device for no less than 6 months enabled me to identify discrepancies across the apps, and increased my fluency in both iOS and Material guidelines.

User Journey Mapping

As I familiarized myself with the app on both platforms, it became painstakingly clear that getting to the core functionality of the app required far too many taps. From launching the app to viewing the content was no less than 5 taps, even if the content was already downloaded.

Users had to tap through at least 5 screens to reach coursework content.

Users had to tap through at least 5 screens to reach coursework content.

To make matters worse, the app didn't recall users' locations, so a crash or timeout of the app meant students had to perform the ritual of traversing the navigation several times each day, even once the download had already completed. It became very clear why this would be a frustrating experience!

Opportunities to improve the downloads experience.

Opportunities to improve the downloads experience.

Presenting my research and diagramming the user's journey empowered me to convince my Product Manager, colleagues on adjacent product teams, and other stakeholders, to break from the paradigm of feature parity across desktop and mobile, and begin the work of prioritizing the key features of the apps.

Defining the Problem

With legacy applications, there's no shortage of problems to solve. To help us hone in on which features to prioritize in the app, the Mobile Campus team and I looked at some of the key problems that surfaced from research and the user journey map.

With our combined knowledge of the apps' analytics, business priorities, development challenges, and other projects underway on adjacent product teams, we conducted a SWOT Analysis (Strengths, Weaknesses, Opportunities, Threats) to determine the features with the the most impact.

A whiteboarding session demonstrating why downloads were a key opportunity to improve the app.

A whiteboarding session demonstrating why downloads were a key opportunity to improve the app.

Ultimately we landed on improving the Downloads experience. With the fewest dependencies on other teams, and being a core feature differentiating the app from its desktop counterpart, it made for a prime candidate to improve the overall app experience.

Goals

My primary goals in improving the app were to:

  1. Make downloads more easily accessible.
  2. Display download status and errors more clearly.
  3. Manage downloads more easily.
Caveats

Since downloads were designed as a dependency of coursework, which in turn has many more dependencies, my work was very tightly scoped to downloads. This meant I had to make a lot of concessions along the way.

Exploring Solutions

Competitive Analysis

Looking at other education mobile apps like Udacity, Skillshare, LinkedIn Learning, and Udemy, I observed several paradigms for managing downloads. Most of these solutions did not have a dedicated queue, requiring users to remain on the same screen to observe download progress. The legacy app used more of a segmented approach, allowing users to see active downloads in a separate tab on the same screen.

Skillshare's downloads display on the course screen.

Skillshare's downloads display on the course screen.

Items already downloaded in the legacy app display on a separate screen.

Items already downloaded in the legacy app display on a separate screen.

Udemy's downloads also happen on the coursework screen, and are animated even more subtly.

Udemy's downloads also happen on the coursework screen, and are animated even more subtly.

Sketches and Wireframes

Comparing different approaches to downloads in high level sketches.

Comparing different approaches to downloads in high level sketches.

After reviewing these approaches with internal users, we determined relatively quickly that a queue would be helpful due to the space and time required for downloads of coursework at a university level.

Many users also reported having trouble managing space on their device, so I included an internal storage diagram in my early wireframes. Unfortunately, this feature was deemed out of scope in the long run.

Early exploration with internal storage diagram.

Early exploration with internal storage diagram. Deemed out of scope due to complexity and dependencies on other systems and teams.

Early exploration with illustration.

Early exploration with illustration. Eliminated due to scope.

Results

After successful tests with users, Downloads were shipped to students in June 2018. Feedback was very positive, and set the stage for improvements to the overall Coursework experience. View the results on InVision

Announcement Brochure

Page 1 of the release brochure. Page 2 of the release brochure. Page 3 of the release brochure. Page 4 of the release brochure.

An explanation of new features for support personnel and other stakeholders that I created in InDesign upon launch.