top of page
TFC work.png
KKBOX Group
KKStream
Video Streaming
End-to-end UI/UX Design
TFC 東北新社
Video Streaming App

TFC 東北新社 is a famous channel agent in Japan. They want to design their 4 current video streaming Apps. The 4 Apps are for 4 channel content providers, and each of them has different features and branding.

The Apps should have smooth user experience across devices (Android / iOS / Amazon Fire TV) and have to be developed within 3 months.

Collaborate with
  • UX researcher

  • Project manager

  • Front-end / Back-end engineer

  • QA engineer

My responsibilities
  • UI / UX design

  • Style guide definition 

  • UX spec writing and maintaining

Sitemap

We communicated with our customers back and forth about their request, and defined the structure of 4 Apps:

TFCSitemap.jpg
Wireframe

Our UX researcher made the preliminary wireframe first, referring to competitors in Japan and analyzed their design. Then I joined to discuss with UX researcher, arranging components in each page to revise the wireframe and make it more user-friendly.

TFC Wireframe.jpg
Main User Flow

There are 3 main user flows in the Apps:

TFC User Flow.jpg
Style Guide
Style Guide.jpg
Devices

We not only designed mobile App but also designed Amazon Fire TV App, and keep the same user experience as much as possible across different devices.

Classica_Home_sidebar.png
Classica_Home_previewSingle.png
Classica_Genre_sidebar.png
Classica_Detail_Episode_add to my list_f
Classica_EPG2.png
Classica_Search_Result_Linear.png
UX Spec

Project managers, front/back-end engineers and QA testing engineers all have to check UX Spec to keep in sync, so it is important to clearly define the interaction rules and functions in it. Since many pages shared the same components, we wrote a section of all reusable components for explaining unified interaction.

截圖 2020-10-10 下午2.50.24.png
截圖 2020-10-10 下午2.50.50.png
UX spec.png
Bug Bash Testing

As the team almost finished the App development, we did 2 stages of bug bash testing to ensure the details. We found 24 people of different departments to be our subjects, divided them into different App groups, and let them test using mobile and Amazon Fire TV.

During the testing, our subjects recorded what they found, and I was responsible for group assistant and observation. After that, we summarized the feedback and prioritized them for fixing the bug.

TFC Background.jpg
bottom of page