Project type: White Label UI Design Adaptation and Localization Project
Role: UX/UI Designer + UX Writer
Industry: Sports
Tools: Figma, Zoom, Miro
Duration: 12 Months

Overview:
I collaborated with a small team of Rakuten designers to adapt TheGrint's UI for Rakuten's new golf app. I played a role in shaping essential features such as the home page, score tracker, statistic page, round setup, and map overview. I also handled the translation of the app from Japanese to English. This led me to travel to Tokyo, Japan, where I worked closely with Rakuten to finalize every design and feature in mid-fidelity, and continued to cooperate remotely to complete the high-fidelity designs from the USA.

Goal:
Our main goal was to ensure that the UI design of Rakuten-Gora effectively appealed to the Japanese market while maintaining continuity with the existing UX of TheGrint.

This project began with the immediate transition to Mid-Fi design, followed by a thorough refinement process to deliver high-quality Hi-Fi designs and the final product. In addition, we were in charge of ensuring the precise implementation of the final product during development - a trimmed-down iteration of TheGrint with fewer features.

Navigating Initial Challenges: Adapting Features

Aligning Different Objectives

The initial challenge revolved around adapting specific features from TheGrint, known for its strong social media emphasis, to Rakuten's application, which aimed to steer clear of social media aspects. This significantly impacted key features like round setup and the app's homepage. Additionally, cultural differences posed hurdles; in Japan, UI is expected to be maximized, with every inch of the screen filled, contrasting with the Western preference for minimalism. Lastly, Japanese golfers prioritize tracking only the score during rounds, often omitting putts, a practice uncommon in the West.

We decided to benchmark against other competitors in Japan to understand their approach to similar features and adapt accordingly. This involved replacing our existing features with those offered by competitors to better align with market expectations.

Key Take aways

Culture and user patterns play a pivotal role in shaping the design of interfaces for any application. A successful user experience is heavily influenced by the familiarity and expectations of the target market. By understanding and incorporating existing preferences, an interface can feel intuitive and natural to use. For an application to resonate with a specific group of users, it must align with their established habits and conventions. This involves identifying and embracing the familiar elements of user interaction while refining them to enhance usability and satisfaction. Introducing entirely new concepts or workflows could disrupt this familiarity and potentially lead to confusion or frustration among users.

Therefore, when faced with the challenge of designing features that couldn't be directly adapted from TheGrint's existing user experience, we prioritized maintaining continuity with the users' cultural established patterns.

Compiling All Parts: Integration Phase

Feature Selection: Crafting a Lean Version

After ironing out the main differences between Rakuten and TheGrint, and revamping the screens needing the most adjustment, we shifted focus to cherry-picking the features that would shape Rakuten-Gora. While TheGrint boasted over 30 features, many tied to its social media functions, our goal was to trim that down to less than ten, as Rakuten wasn't keen on the social media aspect. The end result? A sleeker version of TheGrint, with a strong emphasis on setting up rounds, logging scores, tracking score history, and personal statistics.

Score Tracker Evolution: Advancing Further

Finding the Right Interface

Given the significance of the score tracker in our project, our team was committed to crafting an interface that outperformed competitors, offering the ability to select between different preferences to input your score. We were informed by our stakeholders, including higher-ups in Rakuten's tech department, of the desire for a futuristic UI to position it as the flagship feature. However, this clashed with TheGrint's preference for a design resembling their own interface to minimize development time. To move forward, we sought input from an internal group of golfers for each idea presented, refining until we reached an interface that satisfied everyone.

Note: The following screens provide a condensed overview of our decision-making process for each iteration, highlighting the rationale behind attempting a new interface after receiving feedback.

UI Kit & Style Guide

Following Design Standards

A challenge in this project was ensuring the integration of the selected features into a UI framework that adhered to Rakuten's brand standards, which necessitated incorporating elements from other Rakuten applications. To maintain brand cohesion, we opted to reuse icons from other Rakuten applications and ensure consistency in icon styles for any new icons created. The Rakuten team had already established the colors and typography for the app prior to the project's commencement, so I followed their guidance accordingly.

High Fidelity Iterations

Homepage Design Journey and Notable Highlights

While finalizing the score tracker proved to be the most challenging aspect during the mid-fi design phase, the home page underwent numerous iterations in the hi-fi design process. The primary hurdles in designing the homepage interface centered around the buttons menu located directly below the user statistics hero image. Some buttons directed users outside of the app to a golf-related website hosted by Rakuten. To prevent users from getting lost or redirected outside the app upon initial use, we opted to streamline the menu by offering only options related to round information stored within the app. Additionally, a requirement mandated the main call to action on the homepage to be playing a round, with a secondary option provided in the bottom menu to initiate a round from other sections within the application. After eliminating unnecessary buttons from the menu, we focused on perfecting the hero image and graph design.

High Fidelity Prototype

Developer Handoff: Transitioning to Implementation

Preparing Designs for Development Team

Every company I have had the pleasure to work for adopts a unique approach to handing off designs. In this scenario, we opted to align with Rakuten's structure, as they would ultimately own and oversee the design files after the launch of Rakuten-Gora. Their design-to-development transition process involved dividing each segment of the application into distinct sections. Each section comprised four columns: two columns for mid-fidelity designs as reference and two columns for high-fidelity designs. Within these columns, one was designated for the English version, assigned to me for translations, while the other was assigned to a Rakuten designer for the Japanese version. Additionally, within the high-fidelity columns, we included notes detailing and listing the functionalities for each screen. Although this resulted in a system devoid of user flow from my perspective, the developers appreciated the well-structured nature of the entire app within this system.

Conclusion