Introduction

The Reel is an entertainment platform showcasing the latest and greatest curated sports highlights from around the world.

This was one of the first projects I really used the entirety of a UX process. From strategy to research and then analysis and evaluation, followed by design and launch.

Note: This was a Senior Capstone Assignment

Brief

An intelligent platform showcasing the latest and greatest curated sports highlights from around the world. Through an engaged community and personalized clip discovery experience, users are immersed in hours of premium sports content.

What seems to be the problem?

The client aimed to develop a mobile app focused on efficiently managing a large volume of highlight clips. Presently, there's no solution that effectively handles the task of smartly sorting through extensive daily content for users, all while enhancing the experience and empowering users to control the content they wish to view.

Solutions

1.CURATED FROM THOUSANDS SOLUTION

A Discovery page offers trending videos based on today’s top videos from all sports and the user’s watching habits.

2.PERSONALISED CLIP DISCOVERY

Aside from intelligently curated content, users can select sports they’re interested in and add videos to their Reel via the watch queue and favourites, in order to personalise the content.

Final Compositions (but please, scroll down for the whole process)

Reel Animation

The splash animation is quick and dynamic, a perfect entrance to the app

Login Screen + Flow

  1. Shy Logo

    The app’s logo appears only on login, and only on the Discovery page. As the user scrolls, it slides up and “hides”.

  2. Quick Access to My Reel When the user logs in, they will see a quick overview of their queued videos, and any updates from the sports they previously followed.

  3. Add to Watch Queue
    It’s a one-step process to add a video clip to the user’s watch queue.

  4. Slide to Unwatch
    The user can slide to unwatch a video. The app will automatically curate videos based on what the user wants or doesn’t want to see.

Filter View

  1. Peeking Filter

    The filter is a fixed element at the bottom of the Discovery screen, and peeks up when it’s tapped

  2. Calendar

    The user can pick their range of dates through the use of a calendar. Any expansions of the Filter screen is reflected on the height of the overlay

My Reel Dashboard

  1. Horizontal Scrolling

    The watch queue and favorites sections have videos that can be seen to some extent by horizontal scrolling

  2. Overview Grid View

    This view has an overview of all the sports followed by the user in grid form.

  3. Detailed Grid View

    This view shows the top few highlight clips for each sport, where the user can scroll through the entire list of clips.

Media Player

  1. Video Controls

    The video controls are subtle, and include rewind, fast forward, slowmotion, and full-screen.

  2. Sport Tag

    The sport tags indicate whether or not the user has followed that sport. Users can follow sports through this as well

  3. Video Options
    Users can add the video to their watch queue, favourites, or share the clip.

  4. Video Tags
    Tags related to the video that can be tapped into to see other related clips

  5. Video Pause
    The pause screen of the clip features a circular scrub feature.

App Settings

  1. Simple Settings

    The settings options are simple, and include options for content, updates, and account settings.

Search Function

  1. Quick Major League Search

    The major leagues are popular go-to choices for searches, and as such are given a top spot on the search page.

  2. Autocomplete

    There is autocompletion in real time as the user enters their search query into the search field.

  3. Search Results
    Search results are separated into two categories - tags and sports. These two can be navigated to via tabs.

Navigation

  1. Screen Preview

    The navigation flow imitates native app switching, showing the screen the user came from, transitioning to the screen the user selects.

  1. Tabbed Login and Signup
    The login and signup flows are similar, so they can be easily accessed via tabs above the input fields.

  2. Social Media Login

    Users also have the ability to login with their social media accounts, speeding up the process.

Discovery Screen

Splash Screen

Research

Exploring existing solutions and patterns to better address the needs of the project, client, and users.

STRONG GRIDS
All of the applications had strong grid structures, whether they were in the form of straight grids, masonry grids, or lists. There is a lot of allowance in terms of repetitive elements, in anticipation of the content.

SCORES
Scores are very important across the board, taking up a central spot on most content screens.


PERSONALITY The more appealing applications had styles that were simple, but held personality - for example, in choice of typeface, and in choice of hierarchical styling. Colours and imagery also played a big role with apps like FOX’s.

NEWS-CENTRIC While the Reel specialises in recent as well as past highlight clips, a large majority of competitor apps focus on only the latest news.

DISCOVERY

MY SPORTS

FILTER

SETTINGS

GLOBAL SEARCH

STATS

MY REEL

VIDEO

Flow

The chosen flow follows the user’s journey through the application, with various options to access personalized highlight clips (use case, patterns, wireframes)

Use Case

Patterns

Sketches

Wireframes

splash screen

highlights page

log in screen

discovery page

app landing page

search page - autosuggest

filtering

settings page

Inspiration

Moodboard

Style Guide

Skills, Tools, and Team Collaboration

Figma, Photoshop, Illustrator.

Team Collaboration: Solo Graduation Capstone Project