top of page
AlphaMe:
NDA Design Project
Note: Due to an NDA, I cannot disclose the specifics regarding the project . A mock version of the design system and asset management is presented to illustrate the process.
Overview
I worked with a globally distributed team (Indonesia, Japan, Dubai, Korea, etc.) on Alphame, a Singapore-based platform connecting investors with startup founders. The app features two portals—one for investors and one for founders—streamlining the funding process. ​ Developed in collaboration with The Edgeof (founded by Taizo Son), the project required optimizing design workflows and building a scalable, consistent design system as the platform evolved.
Project Name:
Alphame (Adgorthimics, Inc.)
Scope:
Design Asset Management, Design System Creation
Tools:
Role:
Junior UI/UX Designer
Duration:
1.5 Months
Process Flow
Research
Organize
Create & Integrate
Collaborate & Outcome
Research
Initial Research and Audit
I audited the existing design assets, pinpointing inconsistencies, missing components, and inefficiencies in asset sharing. Many icons were unlabeled, and identical buttons used different color shades. I created a chart to outline the elements needing improvement.
Components
Color Consistency
​Icon Documentation
Typography Hierarchy
Button Design
Modal Template Usability
Issue
Colors were undocumented and lacked clear categorization.
Icons were inconsistent and not reusable, with unclear padding.
Inconsistent font styles, sizes, and lack of usage guidelines.
Buttons lacked organization, and styles were inconsistent.
Few modal templates, lacking standardization and auto-layout.
Strategy
Consolidate shades and create reusable color tokens.
Standardize icon padding and make icons reusable.
Standardize fonts and create typography tokens.
Simplify buttons, track styles, and organize variants.
Apply auto-layout and standardize templates.
Organize
Design Asset Management
Based on my research, I noted three main problems specifically related to asset management:
Problem
1
Unorganized Folder(Page) Structure
Figma pages were cluttered with mixed screens. I restructured them into three categories: Main Page, In Progress, and Implemented for better organization.
Before
After
Final Look
2
Inconsistent or Lacking Layer Labels
Layers had default names, making it difficult to identify specific sections, especially in complex screens. I labeled and organized elements hierarchically to improve navigation and clarity.
Before
After
3
Unclear Flow Layout of Screens
Screens lacked grouping, making flows unclear. I reorganized them by categories and labeled them by flow steps for improved usability.
Step 1: Page Category
Step 2: Specific design flows title
Step 3: Frames in the next step in the flow process.
Before
Founder Experience Flow - My Company
Logout and Profile Flow Screens
Total Screened Companies Screens
Founder Experience Flow - My Company
1/3
After
Founder Experience Flow
Notification Flow
Reiterated Screened Company Page Screens
Founder Experience Flow
1/5
Create & Integrate
Design System Creation
The initial UI Kit lacked consistency in buttons, popups, typography, color scheme, and icon documentation, which led to design inconsistencies and slow production.
Problems
1
Inconsistent padding and placement
Buttons and icons had varying padding and fonts, and similar functions were not standardized.
2
Lack of Flexbility
Some UI components were reused, but the design lacked flexibility for adding icons and resizing elements (e.g., menu bars, popups) due to the absence of auto layout.
3
Absence of Variants for Buttons and Components
Many components (like buttons) lacked documented variants and a clear hierarchical structure.
Updated Design System
I refined the design system by consolidating over 20 colors into a cohesive palette, streamlining typography, and organizing key components for consistency:
Color Chart
I audited the colors, removed repetition, and restructured them as color tokens for easy application.
Color Tokens
Typography
Fonts were updated with clear distinctions between headers, body text, and components like buttons. I established font tokens to clarify their usage.
Font Tokens
Buttons, Tags, and Badges
I standardized buttons, form fields, tags, and icons, providing specific guidelines for usage (e.g., padding and icon placement).
Guidelines
Small/Big Buttons
Horizontal paddings from text (and icon): 12 px
Vertical paddings: 6 px
Padding between icon and text: 6 px
Icon Buttons
Horizontal paddings: 6 px
Vertical paddings: 6 px
What Changed?
Before
Inconsistent colors, fonts, and paddings.
After
Clean, well-organized menu bars, uniform fonts, and standardized components across the app.
Nested Component Integration Sample
The design system was then integrated to ensure a smooth handoff to developers, maintaining flexibility for future updates.
Collaborate & Outcome
Cross-Team Design & Task Approval Workflow
The collaboration process between designers and developers within the team follows this structure. Typically, 2-3 renditions and approvals are required for the assigned task to reach completion.
-
Check Task & Work in Figma
-
​Task tickets are posted on ClickUp, and the task is moved to Figma for design adjustments based on ticket details.
-
-
Add Comments & Rename File
-
​​Comments are added to clarify design intent, and the Figma file is renamed using the ClickUp ticket number for easy reference.
-
-
Embed Link, Screenshots & Repost for Approval
-
​​The Figma link and screenshots are embedded in the ClickUp ticket, which is reposted for approval by key stakeholders.
-
This workflow resulted in:
-
Improved Efficiency
-
​The reorganized asset management system saved 20-30% of time on repetitive tasks.
-
-
Consistency across products
-
A unified visual language ensured consistency across the AlphaMe product suite.
-
-
Scalability
-
​The flexible system allows easy addition of new components as the product expands and
-
ensures long-term usability.
Challenges and Takeaways
Key challenges in the project included:
Auto Layout for Consistency
Many components lacked auto layout, causing realignment issues with every change. I ensured all future screens used auto layout for better consistency.
Handling Design Updates
Approved designs often changed during production. For example, the top bar menu mockup underwent multiple revisions. I ensured all changes were reflected in the final design.
Menu Bar June 2024
Menu Bar November 2024
Takeaways:
-
Effective documentation is crucial for the longevity of a design system.
-
Strong collaboration between design and development ensures successful integration into product development.
-
Components evolve during the development phase, so the design should be adaptable to future changes
This project was an invaluable learning experience. As a junior designer, managing design assets for over 100 screens in a small team presented challenges that promoted growth. It required trial and error, adapting to feedback, and refining my organizational skills, all while ensuring design consistency. Working independently in a fast-paced environment taught me how to problem-solve and create scalable solutions.
Ultimately, this experience boosted my confidence and prepared me for future design challenges.
bottom of page