👩🏻💻2022 MOD Video On Demand
MOD Video on Demand
Chunghwa Telecom Company (CHT) launched the subscription plan, MOD Video on Demand, in 2021, which integrated 5 products into 1 package that became the flagship product of MOD with more than 1 million subscribers (a total of 5 products).
🚩CHALLENGE
New and Old users find no difficulty in using Smooth viewing experience
Design team (3 members)UX/UI Designer：Ho Shiau. (Me)
Researcher： Chen Pei PM：William Pan. |
Delivery①Concepts、Mockup
②Prototype ③UI Guideline |
New Video On Demand
Before the MOD Video on Demand launched, all the MOD’s products were sold respectively; however, the demand for VOD has increased with the rise of streaming services and lifestyle changes during the epidemic. So MOD offers a brand new project- MOD Video on Demand that subscribers could watch all the videos at one price.
The task is to integrate 5 products (Movie199, Drama 199, Cartoon199, Music 199, Documentary 199) in one MOD Video on Demand.
Integrating Process
Get to know the existing users & new users.
First, we divided users into groups, and we learned what kind of difficulties users may encounter when using a new interface through Storyboard, then figured out the problem. In addition, the researchers get to know the user experience and what could be improved on through Surveycake.
Structural Adjustment
I provided the simple framework of the product while discussing with the related department that they could understand easily.
The first challenge of integration was the framework. There are two types of users who can watch all the videos and who can only watch one category; thus, for the initial framework, we thought that the product should keep a separate portal for each category.
We found that although separate portal for each category was intuitive for single- product users, inconvenient for users of MOD Video on Demand. That’s not our original intention, so we adjust the page hierarchy.
The first challenge of integration was the framework. There are two types of users who can watch all the videos and who can only watch one category; thus, for the initial framework, we thought that the product should keep a separate portal for each category.
We found that although separate portal for each category was intuitive for single- product users, inconvenient for users of MOD Video on Demand. That’s not our original intention, so we adjust the page hierarchy.
I started thinking about the operation of the homepage after the overall framework had been confirmed. There’re two different patterns of the menu shown below.
Pattern1 can offer the fast page switching, but it will cover 1/4 of the page; though
collapsed sidebar can make it easier to operate, it may not clear at a glance, as we want to make “the coexistence of the old and new, no difficulty in operation.” We expect our users could see their product on the first page.
Users can see all the menu on the first page in Pattern2, and users have to go back to the top after each category switching; hence, we added a function of Return to the menu so users can be back to the homepage easily.
Pattern1 can offer the fast page switching, but it will cover 1/4 of the page; though
collapsed sidebar can make it easier to operate, it may not clear at a glance, as we want to make “the coexistence of the old and new, no difficulty in operation.” We expect our users could see their product on the first page.
Users can see all the menu on the first page in Pattern2, and users have to go back to the top after each category switching; hence, we added a function of Return to the menu so users can be back to the homepage easily.
Develop Concepts
Communication With Prototype
After the sketch had been developed, I used Framer X for the preliminary model to make the operation realistic. Through this, we can communicate more effectively with engineers and PMs to ensure the picture in our mind's eye is consistent.
UI Design
This time, I integrated all the elements of UI into a Library that made it comprehensible to the designer who takes over afterward could modify quickly and maintain the consistency of the pattern.
The previous MOD team did not take the component library into account for the design files, so whenever a UI was created they had to search the file again or design without a clear direction. With the Library, the efficiency can be increased and reduced rework.
The previous MOD team did not take the component library into account for the design files, so whenever a UI was created they had to search the file again or design without a clear direction. With the Library, the efficiency can be increased and reduced rework.
Ⓒ HO SHIAU 2022
