Starstream — Maximilliannavarro

End-to-End Project

In this case study, I will explore how a user experience (UX) and user interface (UI) design can create engaging and immersive experiences that foster strong connections between streamers and their communities.

Role

UX Designer

Team

1 Designer (me)

Skills

User research

Usability testing

Interface design

Timeline

12 weeks

Tools

Miro

Figma

Crazy Egg

Problem

As video games have expanded in popularity the past decade, so has the community. Platforms like Twitch and YouTube have enabled people to create public personas that audiences around the world can gather and collectively enjoy entertaining experiences together. These experiences build strong communities that love to support their favorite streamer.

As a new streamer on platforms such as Twitch and Youtube, it is much harder to promote your content to audiences.

Research Plan

Empathize

How do we start designing?

Observe

To start, I made observations by comparing two of the most popular streaming platforms and their features; Twitch and YouTube.

What Is The Difference Between Twitch And YouTube?

Level of Engagement

YouTube has fewer streamers but significantly higher user numbers. The potential for your growth as a new streamer is much higher. Compared to Twitch, the competition on YouTube is lower and the user base is 20 times larger. New content creators will have a much easier time establishing a foothold on the platform and grow viewers as the platform provides more prominent exposure.

Discoverability

Discoverability on Twitch for newer creators is extremely difficult. The platform doesn’t feature any algorithm to show your content to new viewers. Instead, channels are sorted highest to lowest based on viewer count, this means that new creators are subject to being at the very bottom of the directory they are streaming under. Getting your Twitch channel seen will definitely require some creativity and use of other mediums to build interest.

Methodology

I conducted user interviews as the primary way to gain insight about this problem space. To reach out to my target audience, I used my social media accounts to promote my User Survey which filtered out prospective users. After about a week I was able to gather participants for the interviews.

Findings

After conducting interviews with the users I screened, I was able to gather a lot of insights as to how different platforms played a part in the user’s lives as both viewers and streamers. I gathered the data and created a list I like to call “Streamer Struggles.” The key points reflect the most prominent information from the interviews.

Define

User Persona

Based on the previous interviews, I created two user personas from the previous interviews I conducted. The first persona is the “Viewer.” They are a group of users who participate in viewing streamer’s content. The second persona is the “Streamer.” They are a group of users who play games to provide entertainment to others. Creating two different personas for Starstream was important to me because both types of users must mutually benefit from using the application if I am to compete with Twitch and YouTube.

Ideate

User Stories

User stories are a great way to articulate the needs of the users and consciously think about how they will use the product. My first step was to write out the user stories based on the user’s needs. I prioritized certain stories in order to create my MVP (Minimum Viable Product).

Sitemap

I structured the sitemap in a way that simplifies the user experience down to the basic functions I envisioned.

“Creators” serve as a section that users can navigate to find streamers that would fit their entertainment needs.

“Live Streams” is a section that gives users a different feature that allows the app to promote newer streamers based on a certain topic such as games or types of games.

For the viewer, “Reward Redemptions” serve as a rewards section that provides rewards to users who interact with new streamers.

And lastly “Log In” and “Popular Categories” are more basic tools for the app that competes with Twitch and YouTube.

User Flows

Once the sitemap was complete, I moved on to start mapping out my user flows. As a designer, I needed to consider all the ways a user could navigate through a site or app to identify the essential path. I decided to focus on a red route for my two personas. Red routes are the user flows that are critical to the design, while other routes are not as essential to the product’s success.

Sketches

Guerrilla Usability Testing

With my MVP and red routes defined, I moved on to usability testing. I conducted a guerrilla usability test with my sketches in order to help me learn about the usability of my designs to get quick feedback from users. I set up the test by using POP by Marvel to streamline the testing experience for my users.

Full report can be found here

One of the most important things I discovered about my design was that my directions were too vague for some users. Users were confused if there was a specific action they needed to take before moving on, or not. I needed to reevaluate my approach and edit the design to add descriptions to explain each feature in a concise and cohesive way.

Wireframes

To create the wireframes, I used the data gathered from the previous guerrilla testing to further expand and improve my original designs.

Design System

Style Guide

To create the style guide, I made sure to have five different elements in place; Color Palettes, Fonts, Imagery, Icons, and UI Elements.

I chose a color palette that complemented the brand’s personality. The hues of blue provide a comforting and calming environment for users who might be uncomfortable at first putting their personality out there for others to see. The hue of blue green acts as a pop of color to attract the user’s attention in a more calming way.

For the font I chose San Francisco Pro as I felt it wasn’t necessary to deviate away from Apple’s native font. By keeping it San Francisco Pro it also helps users feel more comfortable as well since it’s one that Apple users are used to.

High Fidelity

With the design system finalized, I was able to move forward with creating the high fidelity version of Startream.

Prototype

Test & Solutions

Usability Testing

Next, I conducted two rounds of usability testing with both rounds consisting of five participants. I recruited five participants from my previous usability tests in addition to another five participants who were brand new to my designs. This test was conducted in person with the Figma app while running the prototype on their device. I asked them a few questions regarding their impressions of the app while following up with the tasks I felt would benefit the test.

Test 1 Results:

After completing five interviews, I realized that the questions I asked did not provide me with much constructive criticism to move forward with. Most, if not all, users completed the tasks with ease. In some sense, this is a good thing because that reflects how easy it is to use Starstream when comparing it to other platforms. However I was not content with the results as I felt I could get better information if I restructured my questions with more challenging tasks. The questions I asked were very surface level. Tasks such as, “Open up a video” and “comment on a streamer’s stream” proved to not be very helpful as they were a bit too straightforward..

Test 2 Results:

I restructured the task and added a whole new section of post testing questions to pry the users for more valuable information. I made tasks a bit more vague and tried to steer away from language that was too straightforward. The post-task questions were based on comparing Starstream to other competitors like Twitch.

I gained much more valuable feedback this time around compared to the first test. I took note of many constructive criticisms that the testers had with Starstream relating to UI issues and features that didn’t make too much sense.

Overall Feedback What Worked well:

Easy to use, there is little to no learning curve when using the app
Ideas such as the Starstreamer and Rewards page provide great “win-win” tools for both the streamers and viewers as both parties benefit greatly from them.

What Needs Improvement:

Artistic vision. The app itself looks fine but there are some UI elements that needs improvement. Some testers mentioned that the icons look very basic and pretty much ripped off the internet and pasted on to the app. The space theme also doesn’t translate as well to certain users.
Rewards page. The rewards page in theory would be a very good incentive for users to stay on new streamers pages, however the page itself is a bit confusing. How do user’s redeem points? How do users choose what they want? Are there other options for points to roll over to the next set of prizes? Many questions still need to be answered.

Conclusion

Overall, the users had a pleasant time testing Starstream. The current design of Starstream is fluid for most users and the functioning aspects of the interface pose no challenge to the users who tested it. I can say with confidence that Starstream is a platform that takes steps in the right direction to better benefit both the streamer and viewer. Some things that didn’t go too well were ideas relating to benefits that a viewer would gain from using Starstream such as the rewards offered. With more time I feel I can expand the idea to be a bit more comprehensive and give viewers a more enticing reason to watch new streamers.

Closing

With the time and resources provided to me, I am very proud of what I was able to accomplish with this first capstone project with Springboard.

What I’ve learned

New streamers need a platform that supports their ambition to be entertainers.
Viewers need a platform that incentivises interactions with new streamers as it would give them more of a reason to invest their time with them rather than more established streamers.

Personal Growth

Schedule set times to work. The entirety of this assignment took longer than I anticipated. Looking back, I believe it is because of my lack of hard deadlines for myself. Although there were minor deadlines for experiments, I never really wrote down in writing (or even on a calendar) the time frames I would work on the project. Moving forward I’ll be more strict on myself when it comes to time management.
Keep learning. As a UX/UI novice, I know I must keep learning if I want to be a professional in this field. I tried to do a lot of the project through my own mental vision, but that always left me feeling burnt out and lost. When I started to watch and read projects from more experienced individuals, I gained my inspiration back and found new ways to move forward with my designs.
Always look at things through multiple lenses. Feedback is essential to my growth. By gaining the constructive criticism I got throughout this process I felt my designs improved twice as much, compared to the feedback that was solely praise.

Thank you for your time and attention.