Design System
Management

A design system is not a static document, but a collaborative living workspace that is constantly adapting to the current needs of your application and user-base. Most of our UX/UI team came from strong user-research driven backgrounds but little to no UI design software experience, so it was difficult conveying inefficiencies in our current Figma design system:
> Control - components were created by a separate department, who we would need to officially request/petition for new or updated components
> Redundancy - Default/Active/Hover states were often created as separate design assets, multiplying the overall size of our library
> Unresponsiveness - Components were not made screen responsive, so components would be immediately disconnected from the library in order to make manual size changes

While the new design system I advocate for is a work in progress, we're happy with the improvements in the following areas:

> Unified - By organizing component libraries, styles, and "master files" under a single project, we added a layer ofintention to our design process. When we updated designs in one area, we make the conscious decision whether or not that needs to be applied to the other areas as well (ex. Is this change OS specific? And if so, does it need to be? ) This was my strategy for preventing a diverging design system for Android and iOS. I am a big proponent of OS-agnostic design systems and a design system more tightly consolidated across OS is more agile and scalable.

> Compact - Through Figma's Variant feature, we were able to consolidate dozens of separate design assets into single components

> Responsive - A component system will only last as long as it's useful to the designer, so it was important for us to create components that could adapt to any number of ongoing projects across LINK. Our components were upgraded with both auto-layout and constraints to fit any mobile screen size, (which also helped communicate responsive behavior to our developers)

> Maintainable - By creating components from the smallest possible assets (text, icons, buttons), and gradually nesting them in more and more complex components (forms, lists, menus), we were able to create a modular system that would only require updating a single component to cascade that change to every related design asset.

Of course, a design system is never perfect, and we are constantly brainstorming new ways to optimize our design system so we can spend less time on maintenance and more time on the user experience.

Mini-App Workshop

Our strategy for integrating Rakuten’s growing service ecosystem into Link is through Mini-Apps, which are HTML/JS/CSS web-apps displayed in a rich webview interface within LINK.

These mini-apps can be found on the Link Wallet tab (Rakuten Banking, R-Edy, R-Points, and R-Pay), and the Discovery tab (online shopping, news, TV-streaming, horse-racing, etc.).

This gives LINK users one space to access all of their accounts across the Rakuten ecosystem, and while the benefits are easy to outline in a case-study, LINK had difficulty defining and promoting mini-apps to the end-user.

Our goal in conducting a workshop was to identify problems and solutions for current mini-app implementation.

Through our workshop, which involved 9 project managers and engineers across the Mini-App team, we identified the following issues:
> Identity - In both the Wallet and Discovery tabs, MiniApps are mixed together with other Rakuten media, without a clear visual indicator for what was and wasn't an in-app experience (ex. a user would press a link expecting an in-app experience, only to be redirected to the app store, or an external URL)
> Ease of Use - Users are not presented with miniapp experiences based on need, and have no way to immediately access frequent apps
> Direction - MiniApp as a whole had not set strong driving guidelines for creating new mini-apps, which meant their current library had trouble presenting an overarching functionality and categorization to users
‍

Our workshop involved a 4-step series of activities:
‍
1) Postup: an activity in which participants individually generate content on sticky notes, then post them to our team's Miro board.
‍
2) Affinity Diagramming: where we cluster our notes from the previous exercise into groups based on similarities or themes.
‍
3) Round Robin: With everyone's ideas organized, we run a modified game of round robin where members write down any possible reasons why the written solution would fail, then the next round we provide solutions for those same concerns.

4) Forced Ranking: After everyone has a clear idea of strengths and weaknesses of each solution, we directly face-off ideas against each other in order to create a strict order.
‍
We took the ranked solutions and our personal notes from the workshop and began working on UI designs.
‍
One of those ideas was the App tab, which was a solution to many of the problems outlined in our workshop:
> Distinct - By separating Mini-apps from other content (which would now be delegated to the "News" tab, in-app and external Link content was now clearly separated for the user
> Convenient - Users were given an area for their favorited apps, as well as a widget board to pin frequent tools/games (ex. Rakuten TV subscribers would have their live schedule immediately visible in their widget tray)
> Engaging - Much like the iOS app-store, 'Featured' tab highlights new or recommended apps, while "sponsored partner recommendations" provides a more organic form of app-monetization (compared to the current use of banners).
> Organized - the 'All' tab gave users a tidy way of browsing the full Link lineup. (Before this, users had no way of browsing or searching all apps at once)

Call & Contact Redesign

In previous versions of Link, calls groups and contacts were all listed under a single tab.

With the amount of information clutter, the UX/UI team made a push to separate Contacts and Groups into their own tab. This was a political challenge just as much as a UX challenge, as the bottom-navigation bar was a hotly-contested area for various departments (Wallet, Missions, Shopping, Apps).

The UX/UI team emphasized that Link, at its core, is a communications app, and we couldn't expect to draw in users for those supporting features if the main functionality was lacking.
‍
We raised the following issues with the current UI:
‍
> 'View More' - as only a small amount of content for each 'Recent Calls', 'Favorites', 'Groups', and 'Contacts' sections could be shown, users were forced to travel to 'View All' pages often
> Horizontal scrolling - Horizontal scrolling for Favorites and Groups was not ideal for longer lists. This also created an issue of shorter character limits (and unintended text-wrapping)
> Group Pictures - users were not able to assign custom pictures for their groups, which made the current default group pictures useless for distinguishing from each other
> Missed Calls - Missed calls were only distinguished by red text, which was not ideal for colorblind users
> Page Search - search bar could only search  individual contacts, but not call history or groups

Our UX enhancement proposal involved a new Contacts tab, where a user's contacts, favorites, and groups could all be found neatly under separate tabs in the header. Users could now view all call history without a need for 'View More', with the added benefit of sorting All and Missed calls. The shift from a horizontal to vertical list for groups also allowed for longer character limits.

> All/Missed Call Tabs
> All/Favorites/Groups Tabs
> 'View More' pages no longer necessary
> Nav search functionality specific to your current tab
> Listing Groups vertically meant longer name character limits
‍

Contact Group Management
A large part of this project was redesigning the current UX of editing and creating new groups. Below are some of the previous stress-points, competitor comparisons, and our proposed UX designs.

We looked to competitor messenger apps in both the US and SE Asia for common group-management UX patterns, and how we can improve upon them.

And finally applying these best practices to Link, while making sure our work fits into not just the current Link UI, but can also be flexible enough to fit future designs.

Boon
Social Marketplace



Our client has been a cornerstone of Japanese youth culture since the 80’s, selling everything from pop merchandise to manga, with our team being brought on to help develop their first social e-commerce platform for customizable goods (think RedBubble in the US).
”Boon” is a social e-commerce platform in which users can create their own merchandise, gather followers, and buy items from their friends and favorite illustrators.
The idea was very much in the conceptual stages when I joined, and I got to take part in the creative back-and-forth with their New Product Development team. Naturally they brought a lot of their own ideas to the table, and being my first project at this scale, I was eager to be a yes-man for the team, and did my best to accommodate every feature. However, the project quickly began to suffer feature-bloat. We decided to reel back and focus on the MVP, which were the functionalities laid out below:
‍

We are several months from release, but the project is now largely out of my hands. After we go public, I will dive more into the details of the design process and our plans for future iterations going forward.
‍
Overall I think this project went amazingly well for my first professional UI work, especially with no senior designers to turn to. I'm also glad I got to be a part of this company's first dive into digital e-commerce, and especially appreciated the hands-off creative freedom they gave our team in designing their platform.

Portfolio Graveyard

Portfolio sites are the perfect playground for trying unconventional design styles, learning painful lessons in frontend implementation, and motivating myself to learn new design skills to add interesting elements to my sites. While many of these sites didn't quite make it due to issues in performance and responsiveness, I had a ton of fun building them, and wanted to share a couple of my favorites.