top of page

CampusStream

UX RESEARCH

USER PERSONA

UI DESIGN

PROTOTYPING

TEAM COLLABORATION

•CS_Main_Banner_HR.png

Overview

CampusStream is a tailored video streaming service committed to offering live broadcasts and access to archived college sports events across different teams and universities. Their objective is to ensure a smooth and engaging viewing journey for live matches, highlights, and unique content, aiming to foster a shared sense of belonging and pride among students, alumni, and supporters.

Challenge

Designing a digital interface which would allow multiple type of viewers to stream College Sports, find the content they need, and/or manage an online channel.

Role / Team

Collaborated effort of 6 UX/UI Designers, including myself, to research and develop the new app.

Toolkit

Figma
Figjam
G Suite
Notion

UX Research

Competitive Analysis

During our competitor analysis, we reviewed both direct and indirect competitors. 

Some direct competitors (sports streaming): ESPN, Fubo, DAZN, CollegeSportsLive, Fox Sports

Some indirect competitors (general streaming): YouTube, DirecTV, Twitch, Hulu, Peacock

​

Here are some of the overall strengths and weaknesses we found during our research:

CS_Competitors-01.png
CS_Competitors-02.png
CS_Competitors-03.png
CS_Competitors-04.png
CS_Competitors-05.png

User Surveys

The user survey questions was tailored to cater general information about streaming services and specific information related to sports. The survey has been conducted using Google Forms. We received about 100 answers from various participants.

CS_Survey_Answers-04.png
CS_Survey_Answers-05.png

Affinity Map

Following the surveys, data was collected and arranged to uncover patterns and themes, helping to understand what customers need and how they behave. Five main categories were identified:

General features   |   Pain points   |   Content type   |   Viewer type   |   Community/Engagement

CS_AffinityMap.png

Defining the Problem

Personas

A persona is a fictional character which represents the target users of our product. In the search for personas, the aim was to identify distinct personalities with varying problems and needs, all of which could be solved on a single app.

Empathy Maps

The empathy map is a tool in design thinking that helps create an emotional picture of a user or customer. Making Empathy Maps let me discover the pain points and opportunities for each persona.

Journey Maps

The user journey map visually displays the steps a user takes to accomplish a goal and outlines their experience with the product. A visual representation was created illustrating the process the persona undergoes to achieve their objective.

How might we...

CS_HowMightWe-07.png
CS_HowMightWe-09.png
CS_HowMightWe-08.png
CS_HowMightWe-10.png

User Flow

The user flow lays out the user's journey through the product, detailing every step from entry to final interaction.

I identified different paths users could take to achieve the question/problem described above.

CS_UserFlow.png

UI Design

Concept Sketches and Wireframes

After defining the problem and the possible user flows, we developed wireframes through paper sketches. Once the basic outline was established, we moved on to low fidelity wireframes, which depict UI elements as boxes and lines without detailed annotations. It is like the skeleton of the digital screen, web page, or application. It allowed us to organize our overall structure and navigation.

PAPER SKETCHES (Based on the user flow "uploading/sharing a new post")

Sketch_UserFlow.png

Click to enlarge.

LOW FIDELITY WIREFRAMES (Based on the user flow "uploading/sharing a new post")

Lofi_UserFlow.png

Click to enlarge.

Branding and UI Kit

Before moving on to the full prototype, we had to visualize our brand. We developed the brand identity through color palette, typography, logo, and the creation of various components and design elements.

BRAND LOGO

We aimed for the logo to represent the essence of campus life and the collegiate experience, while incorporating vibrant colors to stand out against our navy blue backdrop.

CS_Logo-01.png
CS_Logo-02.png

USER INTERFACE (UI) COMPONENTS

Before moving on to our high fidelity prototype, we established some brand guidelines such as colors and typography. We also started setting up the main user interface components for our app.

CS_Kit.png

Hi-Fi and Final Prototypes

Final Prototype

The next step for us was to develop the app into a near completion stage with a theme, working links and active features. Right below are the 5 high fidelity screens based on the sketches and low fidelity images from earlier.

Presented next are the working prototypes showcasing various user flows.

HIGH FIDELITY WIREFRAMES (Based on the user flow "uploading/sharing a new post")

HiFi_UserFlow.png

Click to enlarge.

Register as a content creator

Thumb_01-Register.png

Log in and follow a team's page

Thumb_02-LoginFollow.png

Upload new content on my Channel

Thumb_03-Upload.png

Explore the app

Thumb_04-Explore.png

Usability Testing

User Testing

We conducted a usability test to gather user feedback and opinions, aiming to improve our streaming platform. We separated the testing into different flows, guiding users on the initial and final pages for each. Following the completion of each flow, we questioned the user on various aspects, including information accessibility, text comprehension, and button recognition. Below are a selection of positive and unfavorable comments collected during the usability test:

Usability Results_BAD.png
Usability Results_GOOD.png

Here are some pieces of information we learned, along with our suggested solutions:

Suggestions2.png

Post-test, we'll continue refining our design to address navigation challenges, validate the product concept with our target audience, and tackle any identified pain points across the app.

Reflection

As a brand new product, the CampusStream app was a great opportunity for our UX team. We were able to have a hand on all phases of the design process, from initial research through to prototyping. 

​

CHALLENGES

  • Creating an app serving different type of users was a real challenge. Ensuring clarity among potential chaos will definitely be something to focus on in the future, preventing any misunderstanding and vagueness regarding the user profile, and therefore the functionality

  • Collaborating as a group of UX/UI designers. All of us having the same role presented its own set of challenges. Despite this, we effectively divided tasks while maintaining involvement in each stage and valuing everyone's opinions. Our team effort resulted in the successful completion of the project

​

KEY TAKEAWAYS

  • Meticulous organization coupled with good strategy is crucial for efficient work and defined objectives

  • Understanding the project thoroughly prevents the design of unnecessary or complex flows and interfaces, in order to deliver what the user truly needs 

  • "Less is more". Not getting lost in the temptation to overcomplicate with excessive "cool" interactions. If a feature functions effectively, additional embellishment is unnecessary

bottom of page