T ID Developers Center
An intuitive design system
for developers
As the only product designer, I was responsible for re-branding and constructing the T ID Developers site, managing everything from color selection to establishing design styles and creating a unified design system specifically for the site. T ID is an SSO Login system integral to the T family services. My role was focused on building a developers' site where software engineers could register their apps and websites on the system.

Initially, I was handed over a project that was half-designed in Adobe XD. While transitioning the design to Figma, I systematized redundant elements to craft a cohesive image. This design system significantly expedited the workflow and facilitated the modification of numerous symbols, essential as the project encompassed more than 500 web pages.
Timeline
Sep 2021 - Sep 2022
My Role
Design System 100%
Overall design 50%
Member
Yoojin Leem
Lian Design (Previous design)
Platform
Responsive Web
Timeline
T ID Eco System
T ID is a single sign on ID system for about 50 family services.
T ID Developers Centeraimed to provide a platform for family services to register their offerings. Although the Developers' Center was a component of T-ID that required new development, it had to integrate various existing services such as apps, web, and portals. Therefore, an integrated design was necessary to enhance the overall user experience across these services.
T ID Website ↗
T ID App download ↗
T ID Developers Center ↗
Challenges
With the diverse platforms and design styles made by different designers,
there were absense of design system and branding.
Confusing Visuals
When I commenced the design process, the T-ID service featured several platforms including a portal, app, old version portal, and web. However, the styles were inconsistent and lacked cohesive branding. Consequently, it was time to introduce new branding that would align with the design changes in the login system. Specifically, the developers' site, characterized by its primary black and turquoise colors, appeared heavy and did not harmonize with the designs and color schemes of the other services.
Absence of design system
When I received the design, which was midway to completion and covered the entire scope, I noted that the UI screens were constructed in Adobe XD and were not systematized. The elements were disparate, without any grouping; thus, modifying one component necessitated corrections across all pages. This was time-consuming, and occasionally some elements were overlooked.

Additionally, the font sizes and letter spacing were inconsistent. Given the diversity and abundance of pages needing to be responsive on various devices, such as PCs and tablets, the lack of uniform design assets made communication and development between the developer and the planner challenging.
Approach
Defining T ID's distinctive style, and creating key concept that can be applied to developers center’s different and divergent screens.
Project’s goal
1. Based on overall usability,
create consistent but light design with consistent visual style
2.  Flexible response to future version management and updates
Structure : Main
Info page
Info page shows T ID and T ID developers center’s advantages with an interaction and animation. The page is newly designed and planned with figma, rottie and after effects.
App page
Users(developers) can add application and set and change basic and difficult settings.
IA
By reviewing all pages, Information Architecture was modified
I reduced the flow stages during the rebranding process through consultation with the planner. I significantly modified the "My app" menu. In the past, users could set complex functions with a long scroll on the screen. However, by changing the functions to layered pop-ups, we simplified the area so that many parts could be modified without having to scroll down much.
Design
1. Based on overall usability,
create consistent but light design with consistent visual style
2.  Flexible response to future version management and updates
Color
Originally, the main colors of the T ID brand were black and red. In 2022, the brand was transitioning the main color to blue due to concerns of overlap with warning colors and for style coherence. So, when I was tasked with changing the branding of the 'T ID Developers Center,' the colors were mixed, primarily consisting of black, turquoise blue, and mustard. In particular, the blue color seemed somewhat heavy, as it was frequently applied to buttons or top bars. The main task with this rebranding was to unify into one primary color.

As the design progressed, the visual weight of the color was drastically reduced by designating blue as the primary color and setting the rest to white or translucent light gray, allowing users to focus on the contents of the Developers Center. The primary blue color was chosen to project a neutral style, and I also introduced a more subdued blue, ensuring visibility while being easy on the eyes across large areas. The mustard color was retained but limited to smaller areas for variety.
Typography
Firstly, I unified the English version font into the Roboto family. To match the Korean font to Roboto, I adjusted the spacing of Noto Sans KR, which was way farther than the English font. Due to the nature of a developer center, English and Korean were often mixed. I matched the Line height to not to look heterogeneous. Reduce the alienation of other pages by specifying the font and color set used in the compartment that shows the developer code for Android / iOS / Web.
Flexible pop-up
I changed the pop-up style to a lighter theme than before. The pop-ups have an Auto Layout function that allows designers to move flexibly in any content and is systemized to respond to multiple pop-ups.
Breadcrump, Tab styles
By changing the site plan(IA) from 3 depths to 2 depths, the design style of breadcrump and tab styles had to be changed. I got rid of dark colors from the old version, set lighter version of tab/breadcrump style that users can easily navigate their current page.
Layout
In order to maintain the responsive design, I designed the layout with three different sizes based on width. Due to the nature of the developer center,
I thought it would be less likely to work on mobile, so I set a standard suitable for web and tab sizes rather than mobile.
Copyright © 2023 Yoojin. Berkeley, CA.