VRV: Where your favorite anime channels reside
Helping anime watchers discover their next favorite show.
Timeline: 2 months
Process: Double Diamond, Design Thinking Process
My Role: UX Design Co-Lead
Teammates: 9 UX Designers & 1 Project Manager
Tools: Figma, Zeplin & Zoom
Once I'm convinced that I'm the best person for the job, I'm going to step up to the plate.
Satoru Iwata
Path to Professional Growth
Leading has been an interest of mine since being a teaching assistant at George Mason & James Madison University. Although, I wasn't certain how I was going to co-lead this project, I knew I wanted to dedicate my efforts to becoming both an effective designer & leader.
I wanted to be able to figure out where I ranged as a leader, learning about myself and where my strengths & weaknesses lie. I wanted to be someone who listens to my teammates' thoughts, while communicating with them in good faith. It was important for me to support them in their professional growth as well, creating opportunities to practice their skills.
As long as I practiced these skills, I knew I would be able to become the designer & leader I wanted to be, one step at a time.
User Pain Points & Interviews
We conducted 16 interviews and gathered over 50 survey results to understand competitor platforms our interviewees used, observe browsing behavior and empathize with general streaming platform concerns. Through our research, the team was able to note recurring pain points for both web & mobile experiences.
Major findings included:
1. Little visual distinction between watched & unwatched episodes
2. No option to go directly to next episode
3. Generic categories on home page
4. Little information about channel bundles benefits
5. No notifications for upcoming episodes
Researching Competitors
Competitive analysis method was used to analyze other streaming platforms that our interviewed users were using, giving us visual examples as to how VRV's competitors may have already solved similar pain points. Using the red routes method, the team ranked each pain point by its priority on what would prove to be useful to the majority of users, giving us an idea of our scope while looking at our technical business constraints.
Through analysis, the team concluded that it wasn't the lack of features that made VRV harder to use but rather the absence of information organization. Users wanted clearer navigation, UI consistency & billing transparency.
Through analysis, the team concluded that it wasn't the lack of features that made VRV harder to use but rather the absence of information organization. Users wanted clearer navigation, UI consistency & billing transparency.
Scope Prioritization
By reviewing our research insights, competitive analysis and red routes, we determined our target audience were users between the ages 18 - 34. Looking at our time constraint, the team narrowed down the scope to focus on 4 problems.
A Flexible & New Design System
When creating our design system from scratch, we used other public design system as our guide to creating ours. We took inspiration from professional examples, IBM & Google.
It was within out scope to create atomic design, using auto-layout to create the components while documenting each component for ease of use. Variants were announced by Figma during the later part of the project. And although we knew this would be more work, we integrated variants in the design system to allow future designers to have an easier time developing variations of the components.
Below are components I created & made variants for their expected states.
First Iteration Process
I led the design team to improve the overall user experience for VRV on both web and mobile. The team enhanced the core experience by improving the search organization, watchlist experience, onboarding process and payment process.
I worked with one of the 3 groups to improve the payment process. To integrate transparency & readability on the premium memberships, I created channel cards for a quick glance summary & benefit cards to provide further information.
First Iteration Test Results
Through testing, we were pleased to hear from users that the prototype was a great improvement from the original VRV. There were a few insights we learned while observing:
1. Some users had minimal issues finding the "correct" show for the prototype amongst all the shows on the watchlist page.
2. Most users expected Naruto to be under the "Top Picks" category on the home page.
3. Most users did not know they received a free month trial when purchasing a channel bundle and ignored the benefits card.
4. Some users felt restricted by the prototype since their way of going to their "continue watching"/resuming a tv show, was different from what the prototyped offered.
Updates After Testing
Realistic search results: To improve upon the last iteration, redundant & inaccurate search results were removed. Certain users, from the last testing, were familiar with Naruto & were confused when some search results were in categories that did not make sense. No comments were made about the issue during this testing.
Reworked watchlist: Users, during the last testing, performed the worst on the watchlist task. This time, users had an easier time resuming the test show & successfully displayed numbers of ways to get to it. Older users preferred using the Continue Watching category on the home page while younger users felt more comfortable using the profile menu.
Channel benefits makeover: Users wanted a clearer way of understanding what benefits they were going to receive & a reminder that they had a free month membership bundled with the purchase. The new benefits page was more welcoming and users reacted positively to seeing the shows included. The majority of users were pleasantly surprised when they received a free month subscription at the end when the popup appeared but most importantly they understood they received it without moderators reiterating.
Final Design
The following videos focus on the web version.
Searching for an anime
Resuming a show through watchlist
Paying for premium membership
Reflecting: What I got out of this project?
"I was impressed with Katherine’s ability to get people on board with ideas and keeping everyone on the same page. And her ability to understand her team's strongest and weakest points. She was very aware of where someone needs help and was always up spending more hours helping them out. And of course, her fun nature and big smile made the whole working experience memorable and delightful."
UX design doesn't come without its bumps on the road and this project was no exception. As co-leader, figuring out when to finalize decisions during team decision conflicts was unfamiliar to me. This was pressured by the limited time & efforts we had to complete the project.
One philosophy I knew I stood by was that the team had to be held by one common goal in what we were trying to make, reinforced by our research. This idea was more eloquently put by UX Planet,
"All members of the product design team should have a shared understanding of the idea & the major decisions in the execution process. The team members should understand the rationale for each decision and how it moves the project forward in all."
This idea became the criteria for how and when we would come to a consensus to the team's decision making. When a team member did not back down from their differing opinion, I made sure to pull them aside and listen to their response. I did this for two reasons:
1. I wanted to be a leader who was understanding and acknowledge their team members.
2. "The more frustrated someone is, the more important it becomes to listen to them." - Satoru Iwata
And right, Iwata was. I often learned that conflict sprung up ideas, which brought up concerns we discussed in up-coming meetings, making our decisions more thought through.