top of page

Zigzag

Role: UX / UI  Designer

Many streaming platforms exist, some which specialize in popular series, and others which allow users to upload their own content, but there are no well-known streaming apps for independent animation as of right now. The mobile animation streaming sites which do exist have outdated and inconvenient interfaces that turn users off from interacting with that content. 

Read this case study start to finish, or click the headings below to explore different sections. 

Screen Shot 2022-12-18 at 9.33.10 PM.png

Problem, Goal, Project Duration, and Constraints

Comparative Analysis, User Interviews

Personas, Sitemap, User Flows, Task Flows

Logo, Wireframes, UI Kit, Component Library

Prototyping, User Tests, Affinity Map, Design Decisions

Key takeaways, Next steps

As you read through this case study, click on images to view them in more detail. If you would like to browse my figma file, you can do so by clicking here.  

test
research
intro

Introduction

img_107199.png

Problem

Many streaming apps exist, but none specialize in showcasing independent animation. The mobile sites which exist for this purpose are poorly designed. Users need an easy to use streaming platform for uploading and viewing independent animation. 

Duration

Working part time on this project at about 12 hours a week, this project took me approximately 8 weeks. 

Goals

  • Understand the needs and objectives of users when looking for content to watch.

  • Understand the needs and objectives of creators uploading their content.

  • Create a recognizable and differentiated brand identity. 

  • Create an intuitive and responsive interface. 

Constraints

I needed to design my product as an app, so I had to design for touch, and also integrate iPhone features into my design, such as Apple Pay. 

Research

Comparative Analysis

     I started my research by downloading various streaming apps and writing down my observations. I noted what each app did well, what they did poorly, and what unique features I would consider. Most of my inspiration came from Youtube, since it would be my most direct competitor. I especially appreciated how easy they made it for users to browse content from people they subscribed to, and how seamless the upload flow was. I also noted that it was relatively difficult to report content on Youtube, and this was a flow I wanted to make as easy as possible so that my app could self-moderate. 

     Apart from Youtube, I studied the strengths and weaknesses of Netflix, Hulu, and Crunchyroll. I observed that these apps had clear but varied methods of categorizing content, making it easy for users to find new content to watch. However, since I would have little control over what content was being uploaded, I would need to find a way for the creators themselves to sort content into categories. Later on, I realized that creators could use tags to do this, and users could use the same system when browsing. 

      The further I got into the design process, the more I realized that I would have to put off incorporating some of the "unique features" until I had a strong minimum viable product. I plan on incorporating some of these into my product during the next stage of development. 

 

Screen Shot 2022-11-21 at 12.05.46 PM.png

Research Interviews

I gathered 4 participants and asked each of them about their experiences browsing and uploading content. After analyzing their answers, I came up with a list of user needs which reads as follows: 

  • Users need the ability to save content for later by making watch playlists.

  • Users need a system of browsing and filtering content to find new things to watch

  • Users need to be able to review watch metrics for their uploaded content

  • Users need to see details such as creator and date of release.

  • Users need a way to follow creators and keep track of new releases.

  • Users need to be able to choose what quality in which to upload their content.

Define

Personas

     I developed two personas based on the two types of people I predicted would use my app. I wanted the app to serve the needs of Jessica and Anthony equally, since their participation had equal bearing on the app's success. 

Screen Shot 2022-11-19 at 11.14.25 PM.png

Sitemap

     I mapped out each page I would need for a MVP. This included a homepage, profile page, two versions of a creator channel (one for the user to view their own content, and one for the user to view the content of another creator), video viewing page, subscription page, search page, search result page, and a manage subscription page where the user could upgrade to a premium ad-free subscription. 

    Each page is accessible from the homepage via the main navigation. Features are listed under each page. 

Screen Shot 2022-11-19 at 11.55.50 PM.png

User Flows and Task Flows

    I mapped out the two flows I thought it most necessary to incorporate into my first round of testing—creating an account and browsing for content.  I created four task flows for browsing content, one for reporting content, one for uploading content, and one for managing the app subscription. Later on, I would test my app by seeing how easily the users followed each flow. 

task flows
task flows
task flows
task flows
Screen Shot 2022-12-25 at 4.16.41 PM.png
Screen Shot 2022-12-25 at 4.17.07 PM.png

Design

Logo

I went through several iterations of this logo, looking to Netflix and Hulu for inspiration. I noticed that most streaming apps simply used the company name as the logo, and played with the background, typeface, and color to create something recognizable. I did my best to copy this method. After many iterations, I came up with something that felt sleek, unique, and modern. 

Screen Shot 2022-11-21 at 1.48.56 PM.png

UI Kit

I chose to keep the UI simple, clean, and modern so that users would not be overwhelmed. Since each video would have a cover image, I knew that the page would have plenty of color and variety, so I wanted to keep the rest of the layout simple. 

Low-fidelity Wireframes

I referred back to my sitemap and flows before I began creating my wireframes. I wanted my app to look unique to users, but I didn't want to veer too much outside of what they would expect from a content streaming app. At this stage, I decided to use tags as the primary way for users and creators to sort content. This would do the job of categorizing for me, since I would not be able to moderate and sort everything that would be uploaded. 

lofi wireframes

Click here to browse in Figma

High-fidelity Wireframes

During this stage, I used my low-fidelity wireframes as a blueprint, filling in the details, creating components, and deciding on the aesthetic that the app would adopt. I liked the look of a dark background that would be easy on the eyes for users who choose to binge content at night. As I built out the UI, I added each decision to my UI kit, and each component to a component library, so that adding features or pages in the future would be as easy as possible. 

hifi wireframes

Click here to browse in Figma

Testing

Prototypes

Prototyping was a relatively simple process, as I only had to look to my user flows and task flows, then connect my high fidelity screens from there. I made several interactive components during this stage, which I added to my component library.  

Screen Shot 2022-11-20 at 12.15.51 AM.png

Click here to browse the prototype

User Tests

I gathered 4 participants to test my prototype. I had them navigate through the user flows and task flows I had created during my defining stage, then asked them to complete an SUS test via a google form I made. Overall, there was an error rate of 4/24, and an overall SUS score of 95.63. 

    The two points of frustration I observed were when I asked a user to report content, he had some difficulty finding the report feature, but ultimately he did this successfully. Secondly, two users had some difficulty finding the subscriptions page because they did not recognize the icon. 

    This affinity map shows the likes, frustrations and suggestions I noted during my user tests. 

Affinity map

Revisions

     My first round of testing was extremely successful, and the only revisions I made were to change the subscription icon, and put labels under the icons in the main navigation. I did not feel it was necessary to change the reporting flow, since this was a relatively minor issue for one of the users I tested. 

Before

After

Screen Shot 2022-12-11 at 6.16.08 PM.png
Screen Shot 2022-12-11 at 6.16.15 PM.png

Conclusion

What I Learned

     At the beginning of this project, there were many directions I knew I could go with this app. I had originally intended to vet and curate all the content myself, but I soon realized that this would require a lot of financial investment, and I may not be able to source enough content myself. I realized that making the app user-run and sourcing the content from the users themselves could create an even more unique experience, and could provide an outlet for creators who wanted to showcase their art.

     I learned that being flexible during the developmental stages will save you a lot of hurt in the long run. I expect that users will interact with the product in ways that I can't predict in this moment, but maintaining that flexibility going forward will always pay off, because as designers, our ultimate goal is to design something that people will use, no matter how they decide to use it. 

Next Steps

     Going forward, there are several features I would like to incorporate and test, and several flows I would like to add. I plan on taking this app to a Hackathon in the Spring of 2023, where I will work with a developer to create a usable app. Once the app is up and running, I will have a clearer picture of the type of content I'll be working with, and I'm sure this will present new problems for me to solve and learn from.

define
conclusion
bottom of page