app design refresh

Next Episode

Never miss an episode again.
An exploration on design opportunities to improve the user experience of a popular TV show tracking app.
Role
‍User research
User flow
Mockups
UX/UI design
Tools
‍Adobe XD
timeline
‍4 weeks
Design Over Fika logo that takes user to its homepage
RoleUser research
User flow
Mockups
UX/UI design
ToolsAdobe XD
timeline4 weeks

Introduction

Challenge

To create an iOS interactive prototype of the redesigned app within a 4-week timeline.

Goals

  • Optimize the paths that users take to perform major tasks
  • Uncover and solve user pain points
  • Discover and implement new features
  • Make the app more visually interesting

Scope

  • Conduct user interviews
  • Identify and map out key user flows
  • Conduct user testing
  • Refresh the user interface without drastic overhaul on branding
User Frustrations

Key Pain Points

  • What is the most frustrating part about using the app?
  • How often do you open the app?
  • How does that make you feel?
  • How do you think that would work?
After getting familiar with the app myself, I interviewed 5 active, experienced users individually via Zoom to learn about their experiences. Since there were many pain points, I grouped them into themes to identify commonalities and eliminate duplicates, and for easier management.

There were 4 themes for the pain points: user flow, features, color palette, and layout.

User flow Pain points

Show Details
Hide Details
See solutions
1.1 Could only add a show from the show profile.
Majority of users found this frustrating, especially when they want to add multiple shows at once.
1.2 Requires effort to think before searching.
All the users found it confusing that there were two, almost identical search bars. They expressed that they need to think which search bar to use before searching.
1.3
Need to switch between tabs to get all the details.
4 users found it tedious to switch between the What's Next tab and the Week's Schedule tab in order to get all the information they need e.g. air time, date, channel etc. They would like to see a weekly schedule format.
1.4 Lots of (re)swiping if a mistake was made.
All the users found it laborious that they need to remove the show, re-add it, then swipe on each watched season or episode to return to the state before the mistake was made.
1.5
Too many clicks and screen changes to view multiple episode summaries.
3 users found that it requires too many clicks and too many screen changes when they wanted to read a few episode summaries. They felt that the consecutive screen transition animation too dominant, and the screen change too fast that it was disorientating.
See solutions for
user flow pain points
↓

Features Pain Points

Show Details
Hide Details
See solutions ↓
2.1
'Recent' was not used much.
Most users stated that when they want to see whether an upcoming episode is available, they simply check 'Episodes', so 'Recent' was not much use to them.
2.2
Buttons were not obvious.
All users said that the blue buttons near the top of the Show Profile were too small. They thought the buttons were tags and not clickable.
2.3
No alerts on their favorite shows.
Most users wished to have an option to receive alert when a new episode of their show is showing later that day.
2.4
IMDB button was unnecessary.
4 users said that they never used the IMDB icon.
2.5
'More' did not serve the purpose intended.
Majority of users did not bother exploring this area of the app, mainly because they felt that other areas of the app have most of their basic needs to help keep track of their shows. Some users admitted that they would prefer to see a settings options on the bottom app bar.
2.6
Include more details on the status of a show, season, or episode.
Some users expressed that it would be helpful to know whether an upcoming episode is a season finale, or whether the show will be returning.
See solutions for
features pain points
↓

Color palette pain points

Show Details
Hide Details
See solutions ↓
3.1
Some text were inaccessible.
More than half the users felt that the white text, orange background combination very difficult to read.
3.2
Bright colors need adjustment.
Some users found the use of both bright blue and bright orange too overwhelming.
See solutions for
color palette pain points
↓

Layout pain points

Show Details
Hide Details
See solution ↓
4.1
Cramped design layouts.
All the users felt that the row layout for the TV shows and the content in the Show Profile too crowded.
See solution for
layout pain point
↓
mapping

Current User Flows
and Common Tasks

From user interviews, I found 3 key areas ('What's Next', 'My Shows', and 'Episodes') that they frequently explored to track their TV shows. These key areas confirmed the main and current user flows, which I then mapped out to identify areas where the navigational flow could be improved.
‍
Here are the main and current user flows of the app.
Next Episode's current user flows
Expand
Open in a new window
Current user flows
I also identified 4 crucial tasks that users frequently perform on the app:
  • Search for a show
  • Add a show
  • Mark an episode (or season) as 'watched' (via left swipe)
  • Re-add an episode that was accidentally deleted
These will be some of the tasks that I ask users to complete later on in the mockups and prototype in order to evaluate the designs.

With a clear understanding of the app, user needs, and the steps they took to accomplish their various goals, the next step was to start solving the pain points.
Solving pain points

Solutions

User flow solutions

1.1
Include an 'Add' button in the search results.
This will reduce the amount of taps, allow users to add a show(s) more quickly without opening the Show Profile.
Before After
Current flow to add a show
New flow to add a show
1.2
Use a single, prominent floating search button, and include search filters.
Search is a primary function of the app. Having a prominent button will provide one clear way for users to search, while eliminating the confusion caused by the 2 almost identical search bars currently in the app.
1.3
Combine show details from 'What's Next' tab and 'Weekly Schedule' tab into 1 screen, and include a pull-down calendar.
This will save time and will be more helpful to the user.
1.4
Have an 'Undo' option.
Triggered when a user swipes left on an episode, season, or a show in 'Episodes'. So users can easily reverse their mistake without having to re-add the show.
‍
Scenario: Let's imagine our user, Kate, who watches a show called 'Brooklyn Nine-Nine' that recently aired episode 12 of season 1. Kate has not watched this episode. But she has just mistakenly swiped it as 'watched'.
Kate now tries to reverse this mistake in the current design.
Current design
1. Kate has just swiped on Brooklyn Nine-Nine’s latest episode by mistake.
2. So she heads over to ‘My Shows’ section…
3. … And navigates her way to Brooklyn Nine-Nine’s show profile.Then she taps on the star icon to remove the show, and taps on it again to re-add the show.
4. She then returns to the ‘Episodes’ section to find the show…
5. …And open the show’s list of episodes.
6. Then she swipes on each watched episode (episodes 1  to 11)…
7. … Till she is left with episode 12 on the screen.
That was quite a handful of steps, right?
Let's take a look at how Kate would reverse the same mistake in my redesign.
Redesign
1. Kate has just swiped on Brooklyn Nine-Nine’s latest episode by mistake.
2. Luckily with the redesign, there is an undo button for her to tap on.
3. Brooklyn Nine-Nine’s latest episode is now back on her Episodes list.
1.5
Use an accordion layout with a 'Collapse all' icon.
This will merge the content from the Seasons subpage, Episodes subpage, and Episode Summary subpages into one screen. Doing so will lesson the amount of clicks and screen changes when reading summaries between episodes and seasons.
Scenario: Let's go back to our user, Kate. Her favorite show, The Block, is returning. But she cannot recall what happened in some of the episodes in the previous seasons. She now wants to read up on some of the summaries to jog her memory, in particular season 1, episodes 3 and 7, and season 2, episode 8.
Here's how Kate navigates her way to read these episode summaries in the current design and in the redesign.
Click to play
Current
Click to play
New
[draft redesign]

Features Solutions

2.1
Remove 'Recent' from the bottom app bar.
So the bottom of the screen is less cluttered.
2.2
Include icons for buttons in the Show Profile.
So it would be obvious to users that they are clickable.
2.3
Include an alert button in the Show Profile.
So users can stay updated on their shows.
Current buttons in a show profile on Next Episode with text labels only.
Current
New buttons in a show profile on Next Episode with labels and icon.
Proposed redesign
2.4
Remove the IMDB button.
Real estate is limited on small mobile screens, so it is important that elements on the screen serve a purpose and offer value to users. Since the IMDB button was an unnecessary element, removing it will create a cleaner, more focused visual environment, and allow more breathing space for elements that are necessary and of value to users.
2.5
 Replace 'More' with 'Settings'.
2.6
 Include details such as 'season finale', 'returning', 'season premiere'.

Color palette Solutions

Part of the scope was about refreshing the look of the app without the need to come up with an entirely different visual branding. So, to respect the current blue-orange complementary color scheme, I explored various tints, shades, and tone with consideration for color contrast standard to ensure digital accessibility.
3.1
Earthy shade orange
Bright orange with white causes accessibility issues. A darker, more earthy shade of orange was chosen to resolve this.
Current
New
3.2
Softer blue.
Since users found the current blue too bright, and bearing in the mind the screen will have a lot of colors because of the show images, a softer blue was selected to avoid overstimulating users.
Current
New

Layout Solution

4.1
Use larger images.
This will increase the row height, creating more empty space to display the show details for easier readability, while giving the interface more visual impact.
quick designs

Mockups v.1

With this case study, I decided to skip the wireframing phase, because of time constraint and because there were already solid UI references in the current app to jumpstart the first mockups.

I used screenshots of the current app as the base, then edited them to include the solutions.
Examples of mockups version 1
Some designs from mockups v.1
At this stage, I wanted to quickly test out and evaluate whether the solutions for user flow 1.1 - 1.5 and features 2.1 - 2.6 make sense (e.g. placement, flow) to users.

So, instead of static mockups, I made certain elements interactive. This allowed a more realistic testing and  less reliance on imagination by the users.
Show interactive elements
Show content arrow
insights

User Feedback

Since the users were based internationally, I did user testing remotely via video call with screen share, where I asked them to complete a list of tasks, interviewed them, and observed their behaviour to uncover more valuable insights.

Here are some of the user feedback.

Positive Feedback

The floating search button is brilliant. I don’t like using a search bar, only to realise that it came back with no results because I was using the wrong search bar.
I only add shows to the app after I know the plot and want to watch them. Being able to skip the extra step of going into the show's page makes things simpler for me.
It’s a relief that I don’t have to worry about swiping a season by mistake.
  • All the users found that 'What's Next' was more useful, as they could see all the details in one glance.
  • Users also liked the accordion layout style in the Seasons subpage, as they can scroll up/down to view other episode summaries without full screen changes.
See Negative Feedback
Forward arrow

Negative Feedback

  • The new buttons in the show profile were too large.
  • Some users thought that since the same icon was used for the Episodes button in the show profile and on the bottom app bar, tapping on the Episodes button will lead them to 'Episodes'.
  • 'Show Details' button was redundant.
  • Pull up/down arrow for the calendar in 'What's Next' did not fit with the rest of the aesthetic on the screen.
  • Details provided for each show in 'What's Next' needed more differentiation.
  • Pause function in the show profile was a "nice to have" in theory, but was not used by the users.
Back arrow
See Positive Feedback
insights from user observation

Recommendations

Observing how users interacted with the first mockup also generated a few recommendations for the next iteration.
Current position of the 'add' icon in a show profile is at the top right corner of the screen
Before
[draft redesign]
New position of the 'add' icon in a show profile is near the centre of the screen
After
[revised draft redesign]
R1
 Update the star icon with an 'Add' icon.
For consistency with the use of the 'Add' button in the search results, and to avoid ambiguity as a star icon may be interpreted as 'Favorite'.
R2
 Relocate the 'Add' icon.
To be part of the buttons in the middle of the screen, since most people tend to look at the center of the screen first.
R3
 Set the pressed state for 'Add' button as 'Remove' button and vice versa.
To avoid cluttering the screen.
Proposed Seasons subpage
R4
 Indicate whether an episode is 'watched' or 'not watched' in the Seasons subpage.
So users do not need to check 'Episodes' to compare the episodes they had watched.
R5
 Allow right swipe as 'not watched' in the Seasons subpage.
This provides users an alternative path to undo a watched episode or season, especially if users had missed the opportunity to tap on 'undo' in 'Episodes'.
R6
 Adopt the accordion layout in 'Episodes'.
For visual and user experience consistencies with the layout used for the Seasons subpage.
R7
 Indicate added shows in the search results.
So users will not need to open the Show Profile to discover that a show is already added.
Design from mockup version 1 on how the search engine and search results are displayed. Filter options are available underneath the search bar. Search results are displayed in rows. Each row contains a show or movie image on the left, the movie or show name, and a 'plus' button (to add the show or movie) is available on the right.
Before
[from mockup v.1]
Redesign from mockup version 1 on how the search engine and search results are displayed. Filter options are still available underneath the search bar. Search results still are displayed in rows. Each row still contain a show or movie image on the left, the movie or show name, and a 'plus' button (to add the show or movie) is available on the right. If the show or movie has been added, the 'plus' button becomes an 'added' button.
After
[draft redesign]
R8
 Sort 'My Shows' list alphabetically, and include sticky filter buttons and alert buttons.
Sorting the list alphabetically is more logical to users, since they are less likely to first think whether the show is active or inactive, then browse through the corresponding section.
Sticky filter buttons allow users to filter the list, and create a more seamless visual design without the use of the orange section headings.
The alert button next to each show provides a shortcut approach to easily turn on/off alerts when users want to quickly customize alerts for multiple shows.
Design from mockup version 1 on the 'My Shows' section.Shows are displayed in rows, and divided into 2 groups: active shows and inactive shows. Each group has a heading with orange background
Before
[from mockup v.1]
Further revision from the redesign of 'My Shows' section. Shows are still displayed in rows, with filter buttons 'all', 'active', and 'inactive' underneath the screen heading. On the right of each show row is a bell icon should user wish to receive notifications about a show.
After
[proposed redesign]
more redesigns

Mockup v.2

Taking into account user feedback, the recommendations, and the solutions for color palette 3.1 - 3.2 and layout 4.1, I then created a second version of mockups.

Since majority of the feedback and recommendations were related to the visual design of the app, I kept mockup v.2  static, so user will focus on providing feedback on the visual elements.
Examples of screens from mockups version 2
Some designs from mockups v.2
This time, users were happy with how the mockups look and feel (yay!). So it was time to convert the mockups into an interactive prototype.

Outcome

A New Interface

Better ways to stay updated and track TV shows.
Testing with an interactive prototype help users imagine how the changes, discovered from this case study, would work in the real app.
Experience the changes
→

After the prototype was completed, I conducted a validation test with the userusers, who generally loved the prototype.
Here are a few highlights of what they said:
I really like how much easier it is to search and add a new show. It's brainless effort now (besides typing the show name).
The design looks a lot more friendly and appealing. It's fresh, clean, without feeling like I have to re-learn the app.

Lessons & Reflections

I'm not the user.
It can be so easy to get lost in thoughts about the different ways to improve the app's usability, and assuming that they will be helpful to the user. Pushing my own assumptions and personal bias aside, and reminding myself that I was not the user were important to remember in the process.

Rate the pain points to help prioritize the solutions.
Some of the user pain points may be less of a pain than others. Though I felt that the amount of pain points identified from user interviews were solvable within the project timeline, sometimes projects may have too many pain points and issues with too little time to know which ones to solve first. Asking users to rate their pain points will help prioritize what really needs solving.

More research, more insights.
While some meaningful insights were extracted from the user interviews, the collective list of problems was far from complete. A thorough research was not possible given the time constraint. With more time, doing more research (e.g. market research, and researching on app store reviews) would have been helpful to gain further insights to inform the design.
    A Thank You to the Users.
    Doing user interviews and being able to get 3 rounds of invaluable user feedback within a short timeline require users to be very cooperative. The 5 users not only took the time to contribute, but also contributed in a timely manner for the case study to complete on time. Thanks for making this happen!
    future

    Next Steps

    Run extensive usability testing on the prototype.
    The prototype could only be tested on a desktop browser due to software limitation and users being based globally. Testing on a desktop browser can feel very different from the real thing due to differences such as screen size, touch vs. click etc. So further testing is needed to validate the prototype design.
    ‍
    Explore and implement micro-interactions, transitions, and in-app animations.
    This case study did not really dive into these animations, and while the current design does not use much animations, some functional animations could enhance the overall user experience if they are incorporated at the right time and at the right place.
    Next Project  |  
    Lifestyle
    Branding
    UX/UI

    Postscent

    Take card-sending to a new level.
    A UI case study on a scent-infused, create-your-own-postcard app.
    Check it out
    →
    Previous Project  |  
    Music
    UI

    Dubplate

    Get the best beats.
    Transformation of a client's concept into high-fidelity mockups, from creating structure and design blueprint, to refining and improving mockups.
    Check it out
    →
    Disclaimer: Next Episode case study was done out of curiosity and interest, to learn about user pain points and to explore solutions based on my own user research. There was no affiliation with Next Episode.
    close
    home
    Projects
    Dubplate
    Sitemap
    Wireflows
    ▷
    Preview
    Next Episode
    Current User Flows
    ▷
    Preview
    Postscent
    Resume
    ↓
    about
    contact