OVERVIEW
BACKGROUND INFORMATION
• As a designer on the web and mobile team, I designed the video downloading experience for the PSVideo iOS app.
• I worked with UX researchers, engineers, and product manager across 6 x 2 week sprints
• This feature allows users to download and stream their videos without internet connection. 
• This project was shipped on March 16 and was met with positive user reviews – download it here
PROBLEMS
• This feature had an Android counterpart that was tested a few quarters back – there were a few problems identified, outlined below.
• I worked with the UX research team and product manager to determine the main user flows participants had trouble with.
UX Impact was based on the consolidated user test  findings and feedback from various participants.

A few quotes from the previous user test.

CHALLENGES
• Adapt the video download feature from Android to iOS UI conventions.
• Improve how we handled edge cases regarding corrupted downloads, invalid licenses, Wi-Fi connection, etc.
• Resolve all the UX problems identified in previous user testing sessions within the scope of 6 sprints.
• The app was built using web and native tech, which led to some interesting UI constraints and misalignment.
Some of the platform specific design changes we identified. 
Process
Personas and previous UX studies done for this feature's Android counterpart were used during the "research" phase. The competitors we looked at included: Vimeo, iTunes Store, Crackle, HBO GO.
Larger the circle = more time spent. Total design process = 12 weeks. 
DESIGN ITERATION
1.0 FEATURE ACCESS
1.1 CARD SORTING
We ended up going with Option C since option A required a new icon design that wasn't in scope.
• During the user tests I conducted, 50 percent of the participants did not find the “download” list on their first attempt. 
• I used closed card sorting to evaluate the existing information architecture.
• I created several variations based on the results, and had participants run through the “Accessing Downloads” task.
2.0 Download Button

A rough interaction spec for the download video user flow.

Two of the most popular concepts out of about eight different directions we explored.
• About 38 percent of the participants did not discover the download button within the first 10 seconds for option A. 
• Participants did not have trouble finding the button after "learning" the location of the download button once for option B.
• Stakeholders believed it would too "disruptive" to change the location of the "wish list" button users were familiar with.

The various download button states.

• We had some concerns about the "in progress – downloading state" being confused with a loading or queueing state. 
• However after implementing the download status bar, this confusion was resolved.
3.0 Download Flow
The general user flow – selecting "VIEW STATUS" brings the user to the download list (more in next section). 
3.1 Download Status Bar
• The "download status bar" is persistent on across all screens.
• This allows the user to monitor the state of their downloads, and provides a quick link to their download list.
4.0 Download List
• We debated between grid vs. list for the download list.
• Grids were more familiar for our users, however lists had more real estate for longer strings (i.e. status messages).
• I also considered having tabs to filter complete vs. in progress downloads.
• We decided against tabs once we considered that the average number of downloads per user at a time was <5.
4.1 Download Tile States
A few of the numerous permutations of tile structure we came up with.
• The different download states for the Android feature wasn’t fleshed out in detail.
• I took an audit of the edge cases that can occur during the download process to create a download state to handle each scenario.
• Above are some of the tile structure edge case concepts I worked through with various stakeholders.
5.0 Download Tile Options
• We spent a lot of time perfecting the strings used in the action sheets.
• There was some concerns with using the word "remove" instead of "cancel" or "delete".
• We ended up using "remove download" since having two cancels was confusing for users, and delete was too "negative". 

Remove download user flow.

Download pause and download resume user flow.

Download failed user flow.

VALIDATION
• Throughout the design process I ran numerous informal user tests with co-workers and usertesting.com participants.
• In the low-fi testing phases I used POP and a script.
• After we user test I consolidated the qualitative data and reviewed them with stakeholders to drive new design decisions.
• As we moved towards the final iterations we used usertesting.com + Invision and Flinto to test. 

The UT.com script + task walkthrough I worked on with the UX researchers.

We tested earlier variations using Flinto and a iOS test device, moving onto UT.com when we had a live build.
• UT.com and participant feedback for this feature was much more positive compared to the initial Android UT tests. 
• Positive reviews (4+ star ratings) from our users in the app store after the feature was launched

Other Case Studies

PS™Vue Web
Beatcamp Marketplace
PS™Video Feature (NDA)
Orbit.Co Advertising
Back to Top