Streaming Service iOS App— UX Case Study

Kiki Wellenhofer
8 min readAug 10, 2019

--

2 weeks | Group Concept Project

Challenge

Design a custom application for Amazon Prime Video.

Overview

Within a team of 3, I worked on a 2-week long concept project at General Assembly LON, as part of the UXD Immersive course.

Jovita Veckyte, Charlie Adsett and myself — with our WIP Project Canvas

My Role

Although all team members were fully involved throughout the whole project. I personally contributed heavily on the user research and interviews, synthesizing of research findings, feature prioritization, information architecture, usability testing and design iteration processes.

UX tools used: Project canvas | Screener survey | User interviews | Contextual inquiry | Affinity mapping | User flow | Competitive analysis | Personas & JTBD | Feature prioritization | Design studio | Prototyping | Usability testing | Iterative design |Wireframing | Style Guide | Retrospective

The Client

Since 2013, Amazon Original Series distributes original content through their online platform Amazon Videos. Creating multiple award-winning series and films.

The Brief

The client is looking to significantly increase their social activity, through targeting both existing and potential customers. Focusing on engagement in a unique and compelling way. The target device is mobile or tablet.

Expected features

  • Browse content, view trailers and description
  • Interactive element
  • Social share function

Competitive Analysis

After reading the brief and re-reading it again twice, 🤓we started our process by carrying out a competitor analysis. Looking at both direct and indirect competitors.

We found out that content browsing, viewing of trailers and description, with Amazon’s current app works great compared to competitors. However, with most other categories we compared it to, it needed a lot of work.

The app wasn’t that interactive, compared to Spotify and Netflix, where trailers would autoplay or certain songs would appear with a full-screen video. The social share functions weren’t prominent or inviting and there were only a few to choose from. The profile/account page was confusing in its function, wherewith Spotify you can create playlists and like songs or follow artists in an intuitive way. Customisation wasn’t clear and didn’t work well, with Netflix you can add content to your list and distinctly find different categories on your dashboard related to your tastes.

Competitor Analysis (data taken in May 2019) — 5: great, 1: poor

User Research

Survey

Starting our user research process with recruiting participants through a screener survey, we received 42 responses in total. Finding out that the majority of our participants watch content through their phones and TV, confirmed our decision to design a mobile app to use with or without a TV rather than a responsive website for desktop. In addition, it was important to note other activities they spend their free time doing, socializing came second after watching content which later informs our design direction.

Screener survey results

Affinity Map

With the participants who best fit our criteria, we carried out the contextual inquiry, observation and user interviews based on the current Amazon Prime Video service. Then collated our findings into an affinity map, separating them into common themes to better understand the data.

Insights

Quotes from users

Viewing habits

  • Check reviews and watch trailers before committing to the content
  • Most watches content with someone else, few watches alone

Features appreciated

  • New and featured content
  • Ability to cast to another device

User needs

  • An intuitive home page, tailored to their tastes
  • Being able to see recommendations from their friends
  • To save content to watch later

Pain points —

  • Most found it hard to find something they’d like to watch, the amount of content available was described as ‘overwhelming’
  • The difference between rent and buy was confusing to most users
  • Categories aren’t clear
Affinity map

The BIG Problem

Our users are finding it hard to discover content that they would like to watch on the service.

The Opportunity

Finding a way to help them discover meaningful content to watch. Through the use of their own community. Making it easier for them to connect to their friends and family for suggestions, through the app.

Persona

With all the research we carried out, we created a persona who would best describe our target user. Her name is Rachel, a little bit about her below.

User Journey

Rachel’s current journey when viewing the service is shown here, it is clear the main problem she encounters is that she struggles to settle on what to watch, it becomes an annoyance, she gets stuck in a loop of watching trailers and then she eventually exits the app as a result.

We need to find ways to better her experience and get her out of this loop.

Rachel’s current user journey

The Problem & Solving The Problem

To be clear with the problem we are trying to solve we created a problem statement, accompanied by How Might We statements to allow us to be a bit more creative during the ideation process.

Problem Statement

Rachel needs a better way to find something new to watch because there is so much to look through and it makes her feel overwhelmed and want to give up

HMW Statements

  • How might we inspire her to watch new content?
  • How might we enable her to find related content to watch?
  • How might we allow her to engage with like-minded people?

Ideation

As a team, we did the crazy-8s exercise to come up with ideas to solve the problems Rachel was experiencing. We discussed our outcomes and listed all the features we would like to have on the app, focusing on solutions that will solve the problem by balancing user needs and business goals. Then carried out a feature prioritization exercise to decide what to focus on our MVP.

Crazy 8’s and Feature Prioritisation MoSCoW

Prototyping

Paper Prototype

Usability Testing

We tested our paper prototype with 8 participants and found some very valuable insights before moving on to wireframing.

  • Most users did not use the tab bar as navigation as it wasn’t prominent on the paper prototype
  • A lot of the users did not understand the difference between saved and published within collections
  • Users found the layout on the library screen confusing

Wireframes — Usability Testing

Test scenario 1

Rachel is at home with her partner after a long day at work, they would like to watch something new, but are not sure what to watch.

Test scenario 2

It’s the weekend, Rachel wants to watch a movie that her friend has previously told her about. However, she struggles to remember what it is called.

Insights

Myself and a participant during a usability testing session
  • Users appreciated and can see themselves using the friends' recommendation feature
  • They enjoyed the profile feature, as it is personalised to the individual. They can create lists, follow friends, manage their preferences
  • The home screen is interactive and interesting, a lot going on but they can see how it may benefit them

Iterations

Below are the iterations made on each screen throughout the project, from paper prototype to mid-fidelity and hi-fidelity wireframes.

Home

  • The hamburger menu was removed as most users were able to navigate through the app easily using the tab bar alone
  • We added settings to the tab bar for clear access for help, account and payment settings.
  • genres are very crucial” was a popular opinion so we decided to have that on the home screen
Home

Content

  • We played around with the layout and spacing to create a cinematic vibe
  • A number of users clicked on the content itself to play, it was slightly confusing so we moved the play button from below to sit on the content instead
Content

Profile

  • We moved the collections button around to test how users would find it and ended up placing it in one line with follows, as it is easier to find and also based on popular design patterns, where collections are now split into private and public within its own screen
Profile

Collections

  • We did a lot of work on the layout here, starting off with paper prototype where users were very confused about what collections meant and what was going on in the screen
  • We chose to place collections within library where all other content was also saved, one simple place where they can find all their viewing goods
  • Using iconography to differentiate between public and private with the eye icon
Library: Collections

Style Guide

Based on the design guidelines on Amazon’s website, we created our own style guide with all the components (colour, type, icons, buttons and navbar) included in the hi-fidelity design of our app.

Style guide

Onboarding

We’ve also created 3 onboarding screens that the user will see when they update the app so that we can introduce them to the new features added on and its location in the new layout.

Onboarding screens

Conclusion

Problem solved?

We created a solution which allowed Rachel to interact with her friends and family through the service, enabling her to offer and receive suggestions on content from like-minded people she follows on the app. By creating a sense of community around the product itself, this may encourage her to use the platform more often and feel more engaged whilst doing so.

Prototype

View our interactive prototype → here

Next Steps

  • To work on iterations on our latest prototype based on insights from the test shuffle.
  • Now that we’ve designed for mobile, I’d like to explore responsive design to see how the product would work on a tablet, where a lot of users claim they access the app through.

Learnings

  • I really enjoyed working in a team, setting our goals early on and being fully involved throughout the whole process allowed me to learn so much. I particularly enjoyed our design studio together, it was very creative and constructive at the same time. We all worked well together and pushed through for the best results!
  • The Discover part of the Double Diamond design process is the most meaningful to me. I believe it is such a crucial part of the process as it truly informs which direction the project goes.

Thanks for getting this far! Any questions feel free to get in touch or check out my website. ✨Kiki

--

--