Streamlined Video Downloads

UX & UI Design

This project aimed to streamline how customers of a video downloads mobile app goes through the process of replenishing their films and series. Before anything else though, allow me to give some additional context about the app.

 

What, Why & How

The consumer promise of the app is to allow its customers to watch films and TV series on their devices without using up their precious (and expensive!) mobile data or Internet bandwidths.

The app targeted mass market SEC C & D consumers in the Philippines, where robust Internet connectivity remains to be a huge problem. According to the Speedtest Global Index, as of November 2020, the Philippines' ranking for Mobile and Broadband download speeds is only 119 and 106, respectively, out of 139 countries and is way below the global average for download speeds.

To elaborate, this is how the app works:

  1. Install the app
  2. Connect to any of the app's Wi-Fi hotspots, conveniently located at mom-and-pop stores in their target markets' neighborhoods
  3. Download films and series for free
  4. To watch downloaded videos, top up with the app's Watching Credits
  5. Watch freely anywhere, even offline—mobile data or Internet bandwidth won't be used up
  • Project DetailsFrom previous employment
    Done between 2018 - 2019
  • ParticipationUX Audit triggering redesign

    End-to-end UX & UI Design process, including user interviews for multi-round Usability and Schema Testing

    Splitting into, writing, and prioritizing User Stories

    Defining and naming Analytics Events

    Crafting Product Requirements Document, including Test Cases

    Manual System Testing
  • ToolboxCamunda Modeler, Microsoft Excel, Miro
    Adobe XD, paper prototypes
 
The Trigger

As part of my responsibilities as a UX & UI Designer and Product Owner of the Customer Ecosystem, a comprehensive UX Audit was done as input to improving the end-to-end experience. This also included several rounds of Usability Tests with participants that fit the target market profile. The result was an immediate action plan (plus items that were plotted on the Product Roadmap first) that was meant to make immediate improvements to the app, where streamlining how videos are downloaded played a big part.

 

The Problem

From insights gathered, the experience for downloading videos was apparently very unintuitive. Initially, when selecting content from the app’s library of films and series, each selected content goes through a Wishlist first and it is only from that Wishlist where you can trigger the actual download—this goes against most, if not all, of users’ expectations.

There was also a lot of room to improve when it came to managing downloaded videos, as users could delete videos only one by one.

Separately, the app wanted to expand its Wi-Fi hotspot locations and also go into high-traffic areas like transportation terminals. So aside from upgrading hardware-based capabilities, the app should ideally also be able to aid in managing traffic during peak hours.

The Objective

All that said, the primary purpose of this project was to optimize for the health of the customer lifecycle above.

While there were parallel efforts to improve the entire UX, this piece focuses on the parts and Epics highlighted in green above.

Old High-Level UX Flow (View Hi-Res)
Note: Details unrelated to the listed Epics are omitted to maintain other projects' confidentiality.

Keeping in mind insights and action items from the audit, as well as shining a light on the main frictions above, I kickstarted the design process by first revisiting the Information Architecture (IA).

Below were the two primary schemas I quickly tested through Paper Prototyping:

IA Schema A

This schema aimed to have very clear distinctions between what type of content is on each page, as described by the annotations above.

Additionally, the premise of having ongoing downloads inside a Facebook Messenger-esque bubble was to further emphasize that downloads can actually be done even while performing other actions in the app.

IA Schema B ⭐

Based on the testing done, however, the strongest Mental Model apparent from the participants was that, "What I've chosen to download" should be on the same location as, "What's already on my device". Prioritizing ease of use, I went with this schema.

It's important to note as well that Filipinos' primary source for videos and anything remotely close to a video downloads app is YouTube. That said, the schema above is similar to what they would find when they use YouTube.

New High-Level UX Flow (View Hi-Res)
Note: Details unrelated to the listed Epics are omitted to maintain other projects' confidentiality.

After a couple of iterations, aligning with key stakeholders, and using inputs from the schema testing for the IA, the above is the redesigned high-level UX flow for new customers.

As noted above, a digital queue management mechanism was also designed to better manage the Quality of Experience (QoE) during high-traffic situations. Designing this part was a result of careful alignment of the software and hardware capabilities with what the desirable UX is for customers.

The premise of the Digital Queueing is as follows:

  1. To ensure download Quality of Service (QoS) is maintained during high-traffic situations, a max. no. of download slots (hereafter dubbed as the Service Station) will be enforced.
  2. Once the Service Station is full, users are first queued inside a digital Waiting Room until such time a slot is freed up for them.
  3. While they are waiting, the UI shall display useful information to keep users at peace that things are moving and they will be served soon.
  4. In parallel, a set of Download Limits shall also be enforced during these instances so that all users have an equal chance to download something for themselves.
See the detailed UX flow below:

Digital Queueing UX Flow (View PDF)

Finally, snippets of the UI of the redesigned app may be seen below:

New High-Fidelity UI Flow (View Hi-Res)

Since the scope of this project was quite big, it took a couple of months to finish and involved a lot of alignments with various stakeholders. Our team works under an Agile approach though so once certain User Stories were done, they were cascaded for implementation and release.

Below is a view of the various stakeholders I engaged with and of which I had to synthesize different inputs from for the project:

Design Inputs & Stakeholder Map (View Hi-Res)