RANDY YIP
UK Panda TV
Prolog:
UK Panda TV was using a third-party website as the video distribution platform for 3 years. Since their active user had reached 300,000 members, they decided to build their own website. The main audience was Chinese students who is studying in England. These students often built a relationship with the brand, even though when they are back in China, they are still watching Panda TV's videos. And therefore these Chinese viewers become their second target audience. The company wanted to set up the website server in London but with the purpose of serving the same content to 2 different regions at the same time. They wanted to have a system that allows them to upload video and input 2 languages content easily.
Sector:
Cultural, Video Platform
Project Timeline:
12 Weeks
Responsible Position:
Concepting, User Research, Interaction, Visual Design, Prototyping & User Testing
Team:
UX/UI Designer, React Front-end programmer, Node.JS backend developer, Full-Stack Programmer.
Goal:
Create an independent video platform for a video broadcasting Channel
Overview:
A London based Chinese Video Broadcast Company wanted to create their own video platform from ground-up. The team decided to go forward with Node.JS and React.JS to build a website at a fast loading speed. The website includes 2 languages where the client request to have an area to edit English and Chinese content simultaneously.
I am the only UX/UI Designer and Project Manager
I gathered the team as a Project Manager when the project started. At the same time, I am also a UX Designer. As a combination of both titles, I got to implement my UX and design thinking in the project. And I could allow the User Testing to come earlier in the project which improved the quality of the end-project and has been proved in the final User Acceptance Testing. I led the product design, marketing, UX, and UI strategy for the team. I've been extremely fortunate to be both PM and UX Designer of this journey. I have learned tremendously during the project. The key challenges are listed below:
Build from scratch The project involves a much bigger scale than a framework using websites. It got a lot more factors to consider. I had to work closely with the team to select what server is the best, which language do we choose to build the back-end and database. We had to encounter different issues every day across different disciplines.
Finding the MVP Since we have a lot of questions. We ran a very comprehensive Discover Workshop with different expertise and stakeholders to prioritize the needs. With 2 regional users, we find the task is very challenging. Making an amazing product after all barriers definitely improve a lot of my existing UX and project management skills.
Balancing Stakeholders’ needs As I was the project manager, making sure the progress meets the milestones is my top priority. Balancing different stakeholders and prioritize their requests could be clingy. However, this usually incurred because of insufficient communication. As a PM, I am responsible for creating a platform for them to exchange their mind so they came out with a consensus of the project. And when that happened, it added a lot of catalysts to productivity. Thus, we could finish the project in the requested timeline.
User Personas
Based on our discussion with clients, according to the provided data, we drafted 3 key user types that the website is served for. We decided to focus on Overseas students and Migrate in the UK market since they are the main traffic in the local area, they would have the priority to be considered firstly.
Personas Analysis
Based on our discussion with clients, according to the provided data, we drafted 3 key user types that the website is served for. We decided to focus on Overseas students and Migrate in the UK market since they are the main traffic in the local area, they would have the priority to be considered firstly.
Design Methods & Model:
Double Diamond
The project was driven by the Double Diamond model. This method helped us emphasise on the problem statement and actual user needs. Since the project has its own existing traffic, we are improving the service rather than creating a new product. Therefore, user understanding and positioning is very crucial in the project.
We hosted a Discovery Workshop with the stakeholders and clients to explore the needs statement and prioritise their needs. It was the client’s first time experiencing a UX workshop. They thought it was not necessary, but they changed their mind very shortly after the workshop started.
We invited 2 Chinese students to join our workshop where they can express themselves freely regarding the existing service. We then skype interviewed another 2 Chinese users from China, they graduated in the UK and returned to China, for their opinions. We identified the following pain points from the interview:
Identify the Needs
Too Much Notification All interviewed users reflected the notification time form the existing platform is random. Some of them were caused by geolocation, some of them forgot to subscribe to the channels. These issues resulted in dropping the view rates and provided inaccurate data.
Inaccurate Information Due to 2 different locations, the existing server cannot provide proper push notification to users. Since there are an 8 hours time difference between the UK and China, they set the new video notification at GMT+0 at 8:00 pm, where most of the UK users view the channel, but Chinese users would receive it at 4:00 AM. The current platform does not differentiate user location which resulted in wrong data. This made the marketing team very hard to prepare a future marketing plan
Ambiguous Playlist The client usually posted a series of videos. The current platform provided only a playlist to the client. All audiences complained that the layout is discouraging them to keep watching since they cannot jump or look for a specific episode.
Overcrowded Advertisements This is a necessary evil when you use existing service providers. Nonetheless, the existing platform has decided to place ads in between the video. This damaged the audience's experience greatly and became a solid reason for the client to build their own platform.
Getting the MVP
By collecting the major pain points, we hosted an affinity mapping session with the client to sort out the MVP solutions amid the workshop. We gathered different solutions that could solve the issues, however, some of the functions were exclusive features that hardly coexist with others. Therefore, We came to a consensus by focusing on the video listing, and viewing experience first.
Sculpting the Product Vision
We had collected the necessary material to start sculpting the website.
Video Listing Page The interface has to display different series and episodes in a clear way. Users should be able to navigate easily within the same series to any desired destination.
Geolocation Diversity Since the website serves 2 different countries’ users, finding a way that could transform the website to fit those regional user needs would be an essential topic during the project.
Recategorsing Data Structure The inaccurate data had become a rising concern to the clients. We believe a GPS system would help alleviate the situation. All users' locations would be scanned and determined before they interact with the site where different location users' data will be stored in their location folder respectively.
In addition to being a Project Manager, I was also responsible for monitoring the process where I created a kanban board and weekly progress chart. The team could get the essential information from the board including, who is doing what, when would be the deadline, who seems to need some help. As a UX/UI designer, I created the designs, produced the style guides, put together the prototypes/wireframes, uploaded the interactive mock-up for investors and stakeholders to comment. I was also responsible for monitoring and observing user testing alongside the moderator.
From Date-Driven to Feature-Driven
When discussing the product vision, we had also advised the client to change the project timeline from Date-driven to Feature-driven.
The project had set a 3 months timeline before the start. After the workshop, the user story and backlog have been changed. I proposed changing the project timeline until the pain points were taken care of due to the user's feedback. There was a bit of debate with the clients and stakeholders, however, they respected the team’s opinion and reevaluated different possibilities. Fortunately, the expected release date for the feature-driven approach was only a week extension. The team agreed to provide an extra feature in exchange for the extension where the consensus is made.
After adapting to the Feature-driven approach, we had more review meetings regarding different functions. We ensured the functions meet the customer’s pain points before moving to the next function. With this approach, we produced a highly satisfactory product to the users and the client.
Preparing the Mockup
We came out with a linear video structure with connected Node.JS CMS
The sitemap shows the function across different pages so the team would know which part they are working on. We print this sitemap and put it on the whiteboard, when one event is done, we cross it out.
Preparing the Mockup
After the mockup was produced, the team started building the function. At the same time, we launched a focus group to see how the users navigate with the mockup.
We invited 4 Chinese students to the focus group and interviewed another 4 Chinese graduated users via Zoom with our supporting agency. We ran some tested in the focus group, the results are listed below
Preference Test
87.5% of users pick the MVP design
Since we skipped the wireframe section, we provided 3 homepage and individual pages design to users. We applied the winner design into the mockup to finalise it.
Reaction Test (5-second test)
87.5% Remember the main function of the tested pages
We asked the applicants to check the video listing page, individual video pages, and series pages. We told them that it's a video website. During the series pages and individual page, users understand where to go and spot the highlighted content. Only 1 user gets confused during the task in the Video listing page. He was told to look for a specific Video Series and failed to do it among 8 persons.
First Click Test
100% of users fulfill the goal
After the Preference Test, before the Reaction Test, we asked the applicants to fulfill a certain target on a single page. All users know where to click in the designed scenario. Some of the scenarios are: Find the 4th episode in the series page, Find the TV Series in the video listing page.
Verified Mockup with explained functions
The team agreed to blend the style into the wireframe, so we could start from a styled mockup rather than a wireframe.
User Acceptance Testing
Defect Analysis
This chart shows the number of resolved or closed bugs at each severity level, and how they were resolved. Severity level started from 1 to 5, from the least to the most.
Test Case Analysis
This report shows the number of test cases that have passed, failed, and untested
Usabilities Testing
Moderated In-Person
83% of users finish all 3 tasks in first attempts
100% of users think the journey is simple
We held a moderated testing with 6 different target users. They were instructed to achieve 3 tasks. 5 applicants finished the task in the first attempts. One user struggled to find the scripted series.
Eyes Tracking Test
83% of users eyesights are in the primary information area
We used xLabs - Head to track testors eyesights. The users, who finish the tasks in the first attempt, stared at the middle area and menu most of the time. The result fits the design team's expectations of the test.
Asynchronous remote testing
85% of users finish the task in their first attempts
We invited a third-party company in China to conduct remote testing for Chinese viewers. We tested 20 users through an online platform - Loop11.
Project Summary:
After the website's official launch, we received a lot of good comments from the existing customers. One Chinese viewer commented that they don’t need to worry about the language difference and could use it right away. The listing order is changed when the language is switched which is wonderful user experience to them
Key Takeaways:
Transforming User Behaviour from Existing Platform
I learnt a lot about how to smoothly transfer the user's knowledge from their existing behaviour from the project. During the project, the target audience had been using the existing platform for 3 years, they had built their own habit when designing the websites, it was hard to impose something new. To produce a top-quality end-product would require distinctive teamwork and precise intuition.
Adapting Early User Testing
The project composed a few early user testing where the design and concept could be validated in the early stage. As a Project Manager and UX Designer, I borough competitive UX insight into the project to maximize product quality.
Comprehensive Usabilities Testing
We ran different sorts of usability testing at the end of projects ensuring the quality requirements were met. Eyesight tracking provides a unique angle to observe decision-making behaviour. When they are in doubt, their eyesight wanders mostly on the top right because of the preexisting pattern. We have to take that into consideration while structuring the website. Finalising in a scientific way incurred a lot of challenges to the team, fortunately, we conquer it with our professional attitude.
Imposing UX Design to Client
The client had never done any UX design in their previous project. They assumed the UX design would take a long time and do not provide any good outcome. We inspired them by launching a discovery workshop along with their actual users. During the workshop, we helped them to understand what User Experience is, and listened directly to the target users’ pain points. By discovering the pain points, the client had a new vision about UX design, and this was one of my unforgettable achievements in my career.
OTHER PORTFOLIO
UK PANDA TV
Broadcast Video Platform
Develop a website optimises different video sources and regions
Ethical Fashion House
Marketplace
Platform
Building a customised
wholesaler to retailer
marketplace platform