Henry Tzeng's profile

Golface TV - UI/UX



Golface TV

Golface TV is a new feature built on the Golface app. Users can get access to tutorial videos through subscriptions. One of the unique features is slo-mo swing videos performed by Yani Tseng, the world champion golfer. Users can observe the professional player's swing in every particular. Another feature is the weekly updated instructional video. Golface team adjusts the theme of the following videos by the data including CTR of "useful", numbers of collection, the number of views and the questionnaires.

In this project, I would like to share about:

・Background story
・Framework before/ after
・Design guideline
・UI design
・UX strategy


Golface TV是建置在Golface app的全新功能,球友可以透過訂閱的方式獲取教學影片的服務。其中最大的特色就是世界球后——曾雅妮所拍攝的慢速揮桿動作,球友可以觀看職業選手揮桿時的每一個細節。另一個特色是每週更新的教學影片,Golface團隊會透過觀察球友點擊「實用」、收藏、觀看次數及回答問卷等行為調整未來影片的內容,提供球友真正需要的教學內容。

在本篇中我想分享:

・開發背景
・改版前後架構
・設計規範
・介面設計
・UX策略​​​​​​​
 
 
Golface app
 
Golface is an app developed for golfers. It was first launched in 2014 and iterated once in a while. When golfers go to the course with Golface service, caddies record their scores with Golface iPad app and sync to Golface mobile app. In that case, golfers no longer need to collect their paper scorecards cautiously. With the mobile app, they can also record scores in any other course by themselves. 
 
As time evolved, there were several new features developed in Golface app such as "team management", "GPS fairway strategy ( also available on Apple watch and android watch)"  and "swing analysis"  by 2016.  At that time, Golface app was not only popular in Taiwan golf circles but recommended by Appstore several times.
 
However, the original framework and design style is no longer sufficient. For instance, many UX designers mentioned that navigation drawer ( side menu) is disturbing users while operating app. To emphasize the new service, tutorial videos, I decided to iterate it into a thoroughly new version.
 
 
 
背景
 
Golface app是專為球友開發的手機app,自2014年推出第一版以來不斷地迭代,當球友前往Golface的合作球場擊球時,桿弟會將成績用ipad紀錄的成績同步至球友的手機,球友們不再需要小心翼翼地保存過去傳統的紙卡成績。此外,球友到非合作的球場擊球時,也能夠自行將成績紀錄到app中。
 
隨著時間演進,到2016年時已經擁有球隊管理、GPS球道攻略(同時支援Apple watch及android watch)、揮桿分析等多項功能,當時候的Golface app不僅受到台灣廣大球友的支持,也數次登上appstore推薦的版面。
 
然而當初設計的架構已經不符合現代的做法,許多UX設計師提出了漢堡選單(Hamburger menu)對使用者不夠友善的論述,同時也為了強調Golface下一階段要推出的新服務——影音媒體,團隊經過審慎考量與多次的激辯後,終於取得共識要將舊版本Golface徹底翻新。
 
 
 



Because of the new tab-bar design, users can concentrate on 4 features: personal score, team management, GPS, and tutorial videos. The other functions are stored in the hamburger menu. In the following paragraphs, I will focus on the tutorial video feature, Golface TV.



新版本的Golface app採用混合式的Tab bar設計,將最重要的四大功能:「個人成績」、「球隊管理」、「Golface TV」、「GPS 球道攻略」單獨拉出,並將剩餘的功能收至以漢堡為icon的「更多」裡面。本專案將會著重在「Golface TV的部分」。







UX strategy

To look for early adopters and target users, I made an online questionnaire to find different types of golfers and then invited them to watch trial videos and to do usability tests and interviews.

我設計了網路問卷,找了不同類型的球友訪談學習高爾夫的經驗訪談,試看影片及易用性測試。
 







Usability test

The biggest difference between Golface TV and other media apps is the slow-motion swing videos performed by Yani Tseng. In addition to switching three perspectives on the app, I designed a picker for users to slow down and watch the tiny details. To ensure this feature works, I used high-fidelity prototypes to test this part, and other functions were tested by paper cards and low-fidelity prototypes. As we expected, the slow-motion swing videos became the most watched and pined videos by golfers after launched.



易用性測試

Golface TV和一般影音媒體app最大的差異是提供球后曾雅妮的慢速揮桿示範,介面上除了可切換三個影片視角也可用滾輪放慢觀看細部動作,為了確保使用者能順利操作,我針對這部份用高擬真的原型做了易用性測試,其他部分則是以紙卡及prototype的方式進行測試。果然在上架後,透過後台數據我發現慢速揮桿系列是最多球友觀看及收藏的影片。







Back-end database observation

I observe the retention through Mixpanel from time to time and use heatmaps to see users' behavior. What's more, I set KPI for Golface TV which is inspired by Google heart and track them persistently. I regularly hold meetings with the marketing team and RD team to discuss the data and situations. We adjusted the frequency and content of notifications, the theme of videos and some details of social media ads. All of these works become my best reference for the next iteration.



後台數據觀察

我透過Mixpanel觀看使用者的留存率及黏著度,並參考Google heart的關鍵指標訂定方式,為Golface TV設計幾項關鍵指標,並持續追蹤這些指標。我也固定與行銷團隊及工程團隊開會,調整推播的頻率、影片的內容及在社群平台投注廣告等細節,隨時注意使用者的觀看行為,這些資料將是下次改版時極為重要的依據。








Special thanks to Migo Yang, Vat Hsieh, Grace, Yi-Hsiu, TodayToday and Golface team.


Golface TV - UI/UX
Published:

Golface TV - UI/UX

Golface TV is a new feature developed on the Golface app. Users can get access to tutorial videos through subscriptions. One of the unique featur Read More

Published: