Project Overview
Challenge
My task was to create a new feature within an existing product. I knew I wanted to improve a product that I saw had potential for a better user experience which I found to be Funimation. But first I wanted to see what issues users were actually having with Funimation and list those priorities.
hypothetical project and is not affiliated with the company.
Objective
-
Add multiple profiles so others can build their own anime watchlist
-
See what devices are using the account and be able to remove and report devices to Funimation.
Scope
- Design and add separate profiles
- See and control devices on account
Tools
- Figma
- FigJam
- Notion
Role
- UX Designer
- UI Designer
Team
- Self directed with feedback from a mentor and peers
Duration
- 80 hours
Let's Start with Research
EMPATHIZE
To better understand Funimation's background, market space, and who Funimation users are, I started by conducting research with the following goals in mind.
Research Goals
-
Understand the market trends of the anime show and movie streaming industries
-
Identify Funimation target market
-
Identify Funimation competitors and evaluate their strengths and weaknesses
-
Discover goals, needs, motivations, and frustrations of anime streaming users
Methodologies
-
Secondary Research - Market Research and Competitive Analysis
-
Primary Research - Interview Users
Market Research
During market research and seeing what others were saying about Funimation, I found that a lot of users were running into the issue of inability to add separate profiles and needing a deeper filter option to find specific anime they want watch.
Competitive Analysis
What I found during competitive analysis was that most competitors give a wide variety of anime selection, but streaming companies that primarily focus on streaming anime did not have separate profiles for users to share accounts. Most streaming services struggle with lack of search filter selection while also running issues of needing better control when someone hacks a user's account.
Participant Interviews
Using an interview guide, I spoke with my 8 participants over zoom and in-person interviews. I also had them share their own experience on their Funimation account and other sources they would normally use when streaming anime.
-
3 women and 5 men
-
Age range from 28 to 36
-
Interview time from 20 min to 1 hr
Whose been talking?
"If there was some way I would change the color of the bar below the video so that I could actually see where I left off"
“At times I wish I could see who is using my account or at least what devices"
Clarifying User Goals & Needs
Grouping similar insights by using empathy mapping, I synthesized common categories users shared. From these categories, I narrowed it down to the three most common insights and corresponding needs.
User's Goal
Variety Option
8/8 participants
look for a variety of anime and filter search options
Security Control
5/8 participants
like being able to see which devices are using their account
Clean & Simple are Key
5/8 participants
like when designs are clean and easy to understand
User's Frustrations
Add a Profile
5/8 of the participants
are annoyed that there are no separate profile options
Narrow Search Selection
5/8 participants
would like to be able to search by complete, dubbed, and subbed anime in their language preference
Download and Watch Later
3/8 participants would like to be able to download content and watch later
UPDATE ALERT
During the low-fidelity wireframing Funimation did an update to their streaming platform, updating the feature that I was working on, which was for users to be able to filter and narrow their search by subbed and dubbed anime. Due to the update, it was time to go back to the drawing board and look to see what other struggles the users were having and update what our user persona needs and wants.
Journey Mapping
I used a journey map to help understand users struggles, mainly focusing on what devices are using our user's account without their permission and how they would go about solving this mystery.
Empathy Map
I created an empathy map made from all the observations and statements that were given during the user interviews and other research. The below findings show what Al, our user, will need to have a better experience with anime streaming.
Introducing Our Perona: Al
With all the information gathered so far, I was able to create Funimation target customer persona, Al.
"
When I share my the account with others they end up getting their own account, to make it easier to keep track of our own shows.
"
Needs & Wants
-
To watch anime anywhere
-
To have a wide variety of anime to watch
-
Have his own profile, but share account with his fiancée
-
Download content to watch later
-
Be able to watch previews or read about content
Pains
-
Lagging issues when trying to watch something
-
Not finding the show he is looking for
-
Not being able to see the color bar showing where he left off on a show or movie
-
Others using his account with out permission
DEFINE
How Might We . . .
1. . . . help Al and his fiancée keep track of their own anime interests without messing up the other's anime algorithm?
2. . . . help Al have more control and see who is using his account?
Through competitor analysis, I already found a couple companies that offered ways of creating separate profiles under one account, while only one company offered a way to see what devices are using those accounts. With these features being added to Funimation, it gives users more confidence and control over their account.
Task/User Flow
Knowing that these new features would fit into Funimation's existing product, I wanted to explore how Al would interact with these new features to complete key tasks. I created key tasks and user flows so that Al can have a clear layout of the specific requirements for each screen in order for him to successfully complete his tasks.
-
Task: Find and remove devices
-
Task: Add and create new profile
A challenge I had was to determine how Al would go about removing any suspicious devices within the flow of the solution in Funimation's existing website and app. As for the challenge of adding another profile, knowing that Al has a hard time seeing certain colors, I had to come up with a solution and how color would apply when creating a new profile.
Task: Find and removed device
Task: create and add a new profile by adding a name, color, picture, can save
Low-Fidility Wireframing
DESIGN
Having an idea of how Al will navigate, I created low - fidelity wireframes to make more informed decisions on how to design these features to help Al to complete his overall goals. Knowing Al is color blind, I decided to play with designs that used different colors and icons for the app and desktop.
Desktop low-fid
App low-fid
Responsive UI Design
Sticking with Funimation's aesthetic and fully testing the color for Al to add a profile and locate what devices are using his account, I wanted to create a prototype to test real users.
My Account Page
Create/Edit new Profile Page
My Account: My Devices Page
2FA Page to Access
PROTOTYPE & TEST
Time to Test the Site
6 participants close to the same age as Al were given the task of creating a new profile and checking devices using their account and removing any suspicious devices.
Participants were given the option to use a desktop or mobile device or could test out both.
Test Funimation Prototype
Add more profiles your account.
Have more control over you account.
The Results are in!
Usability Testing
Using the mid - fidelity and testing to measure its usability and identify any areas of improvement
Overview
-
Participants: 6
-
Age: 26-34
-
Time per Interview: 25 min - 1 hr
-
Method: 1-on-1 remote or in-person
-
Tasks Completion: 100%
Affinity Map
I was able to group all the information from testing using an affinity map. I drew connections to uncover patterns that participants said and did that helped me identify design recommendations to improve the usability of my design.
Test findings
5 out of the 6 participants decided they wanted to test both app and desktop because they use both devices when watching anime.
Motivations
-
4/6 participants like having control of using 2FA or not
-
4/6 participants found device icons and information easy to use and helped solve their issue faster
-
4/6 participants found overall experience easy to navigate through account
-
4/6 participants liked that they could report devices if someone hacked their account
Recommendations
-
6/6 participants prefer to have a save button when creating a profile instead of auto save
-
6/6 participants like having 2FA but would prefer to have it be available when trying to access personal info and not when entering account
-
3/6 participants would like to keep the "Remove" button, but discard the slide delete function on the app
-
3/6 participants think it would be more helpful to add the city next to the state in "My Devices"
Special Finds
2 of my participants mentioned having color blindness when asked their thoughts on the color selection when making an new profile. Both said they liked the color selection and what the colors effect (videos, selections, color ring around account).
Final Thoughts
With This project had a lot of firsts for me. First time needing to carefully deciding on colors choices that can work well with type of users who maybe colorblind and where those colors may take place throughout the website and app.
It was also my first time playing with 2FA and finding the best one that would fit well with Funimation and its users. With this I found that users like having full control over their account from color selection, devices using their account, and event deciding if they want to use 2FA.
If I could continue working on this I would like to work on.
-
Account animation - I would like to play more with animation of the icons when making an account or changing ones account image. Instead of having a basic still image, but having a 3d moving image that users can have access to if they have a selected package deal.
-
More color factors - showing more of what color selection effects, with buttons and videos just to name a few and re-test these new features to see what colors are saying.