LiTV App
Optimisation
2016
Revamp the app with simplicity and intuitiveness to enhance contents and product experience.
BACKGROUND
LiTV is a video streaming service offering live TV and on demand video. It also offers seamlessness of watch experience across platforms, including PC, m-Web, mobile app and TV app. Users could either subscribe for all contents or watch them partially with ads for free.
OBJECTIVE
Revamp the existing android app and build a new app for iOS aligning latest features to provide seamless watch experience for both OS platforms' users.
• Optimise navigation and use flows, especially sign-up and log-in
• Optimise UI layouts, elements and visuals
• Enhance various contents to users
ROLE & RESPONSIBILITY
Led UX & UI designs, from uncovering problems to producing deliverables, and worked closely with PMs and developers.
• Research & analysis
• Wireframing & prototyping & User testing
• UI mock-ups
PROBLEM & SOLUTION
Navigation
There were 2 navigations co-existing in app which was a repeat and making confusion to users. According to research, a tab bar is more efficient for users to navigate between tabs and also more effective to demonstrate contents to users. Hence, we came up with alternatives to solve the limitation of tab numbers.
The "more" tab resuming to 3-stripe icon once inactive is more comprehensible for users according to the testing results.
Sign-up Flow
The process used to confuse users that how they change their passwords after passcode verification. Moreover, users needed to log in manually after completing sign-up process. Hence, we modified these flows to improve the fluency.
DELIVERABLE
New Interaction & UI
We applied lighter colours to UI with a few main VI colours for important information and clickable items to reduce the feeling of thickness and to enhance the contents. We also applied more interactions effects to smooth screen transitions.
Sign-up
• Remove the T&C checkbox and the captcha to shorten the steps and automatically log in after their successful sign-up.
• Strengthen the contrast among buttons.
• Implement platform suggested components to not only assure using experience but also speed up the development.
Walkthrough
Demonstrate featured contents and services when users first launch the app after they download or update the app.
Tooltip & Coachmark
Show instructions contextually when users first encounter the scenarios.
Display More Contents
Hide the navigation bar and the tab bar and stick the scrollable tabs at the top of the screenful when vertically scrolling to offer a larger area for contents.
Appealing Information Display
• Display only the title, ratings, episodes and the play button at the top of the page with its poster to attract user's attention and place the rest information below.
• Introduce tabs for categorising information and further expandability, also support swipe gestures to switch between tabs.
• Stick the play button and the tabs at the top of the screenful when the page is scrolled down.
TAKEAWAY
It is my first time to work in an in-house product team and I am very grateful to have nice teammates sharing their experience and domain knowledge. Although we have revamped the app with new interactions and UI, there are still many parts not being able to revise due to some concerns from other departments, even though we had provided solid testing conclusions to support the implementation. Therefore, we need to take the whole product into consideration when producing deliverables to not only satisfy users but also meet the needs of other internal stakeholders.
