Overview

Funimation is an American entertainment company that specializes in the dubbing and the distribution of foreign content, most notably anime.

My Role

UI Design

Team

Worked on the research and process with Allyson Florez

Tools

Figma | Photoshop | After Effects

Duration

April - May 2020
5 weeks

01 / The Problem

"Funimation is alright. "

There were many reviews on the app stating the the app is has a couple of bugs and software issues that make the anime episodes buffer for a long time, problems with the subscriptions, too many ads, no next button on the player, and overall just an annoying website to navigate through.

02 / The Solution

By updating the UI into a more personalized and mobile-optimized site.

To help the users easily navigate and look for content, I added a feature that allows the users to pick categories and genres they might want to watch. That way users can have curated content instead of searching forever to find something to watch.

03 / The Research

Task Flows and Mood Boards

We started out by researching the competitors then we identified the problem and target audience. After that we made mood boards for inspiration and task flows to make navigation solutions.

Task Flows

Since the app is hard to navigate, we created task flows where the steps navigating through the app is linear to get to a specific goal or end point.

1. Signing Up
2. Searching for a Show
‍

04 / UI design

Their app was difficult to navigate and in need of an interface update

Their logo is blurry, icons on top are very small, certain symbols are too small, and typefaces in the navigation tab are too large.

When a user clicks on a show there is too much information with not enough hierarchy. There is an awkward movement of the video sliding into the screen when the user clicks play. Furthermore, focus on dubs limits the overall library.

View Prototype

Pick Your Interests

After you picked your subscription option (optional), Funimation will ask you what kind of anime you like to watch and what kind of style you prefer. This allows the app to generate more anime that are curated for that user.

Home Page

Once the account is all set up and ready, users are now able to access the home page freely.
‍
I redesigned their hamburger menu. Added icons so its more easier to navigate and find what you need..

Episodes Page

Created a much more brighter and cleaner design. The previous design did not have much padding and space between each section, so I have sectioned each element so that there’s more breathing room.

05 / Design System

A more streamlined user experience.

Although their app and its content are great, as a designer, the user experience is poor.

Color

I liked their signature purple look so I made the primary color scheme with different purple tones. By adding bright colors for my secondary colors, it can make the content pop.

Typography

Since this a streaming service, we needed a typeface that can be used for different languages and is readable. Poppins, a geometric sans serif typeface is perfect.

Icons and Buttons

The icons in the app were inconsistent and their sizes was not optimal. So I created an icon system with set sizes. Buttons are rounded to match the UI design.

06 / Wireframes

The original skeleton...

In the development phase, my focuses were readability, personalization, and micro-interactions. A more streamlined approach allows users to find curated content personalized for them.

07 / Reflection

My key takeaways from Funimation.

I was able to learn how to make task flows to create a linear user navigation through the app. This helps me to design specific pages instead of creating an entire app in order to get my point across. Furthermore, I learned how to create a proper, professional level design system.

Funimation