􀄪 More projects

Résumé

Résumé

About

About

Establishing a Social Giving App’s Trust with a Robust Design System

Establishing a Social Giving App’s Trust with a Robust Design System

Shipped | Design System, System Thinking, Visual Design

Overview

I established the first design system for a social donation platform. I designed a clean UI that highlights user-generated content while maintaining visual and brand consistency to establish the new platform's credibility. Additionally, I addressed key UX issues to enhance usability and created a Figma design library to support scalability and engineering.

I established the first design system for a social donation platform. I designed a clean UI that highlights user-generated content while maintaining visual and brand consistency to establish the new platform's credibility. Additionally, I addressed key UX issues to enhance usability and created a Figma design library to support scalability and engineering.

Overview

Time
6 weeks
Jan - Feb 2024
(20 hours/ per week)

Time
6 weeks – Jan - Feb 2024
(20 hours/ per week)

My role
Sole designer:
end-to-end design,
project management

My role
Sole Designer: End-to-end design,
Project management

Tool
Figma,
Jira

Tool
Figma, Jira

Team
2 founders, 4 engineers,
1 UX copywriter

Team
 2 Founders, 4 Engineers, 1 Copywriter

Problem

Clunky UI and UX flaws raise questions about the platform's credibility

Clunky UI and UX flaws raise questions about the platform's credibility

Earning user trust is crucial for a donation platform. However, the legacy product's poor user experience hinders it.

Solution

Establish trust by introducing a robust design system to enhance the user experience

Establish trust by introducing a robust design system to enhance the user experience

This will also streamline the design process and accelerate engineering.

Personal Session is a new TikTok feature that provide purpose and end point to passive users with niche themed viewing sessions. The sessions end with engaging activities to help users to lea smoothly.

Jump to Design Solution

Jump to Design Solution

Jump to Design Solution

Defining Goals

The founders wanted a major revamp before launch, but their needs were unclear, so the first step was to identify problem spaces and set clear goals.

The founders wanted a major revamp before launch, but their needs were unclear, so the first step was to identify problem spaces and set clear goals.

UX Audits

I screenshotted every screen of the existing demo and audited them top to bottom.

I conducted a survey with 38 responses from 16-25 y/o TikTok users via Google survey and categorized the collected responses

Suggestion
Proposal

Suggestion Proposal

I grouped recurring problems and presented high-impact suggestions in two phases. The founders agreed to move forward with Phase 1 first.

I conducted a survey with 38 responses from 16-25 y/o TikTok users via Google survey and categorized the collected responses

Suggestion
Presentations

PHASE 1: Immediate Changes

1. Tackle UX Flaws
2. Establish Design System

PHASE 1: Immediate Changes

1. Tackle UX Flaws
2. Establish Design System

PHASE 2: Next Steps

1. Redesign Create Fundraiser Flow
2. Redesign Homefeed UX Pattern
3. Redesign My Profile UX Pattern

PHASE 2: Next Steps

1. Redesign Create Fundraiser Flow
2. Redesign Homefeed UX Pattern
3. Redesign My Profile UX Pattern

Phase 1 – Identified Problem Space

Poor user experience from a lack of information hierarchy and inconsistent UI raises questions about the platform's credibility

Poor user experience from a lack of information hierarchy and inconsistent UI raises questions about the platform's credibility

Problem examples

Phase 1 – Goal

Establish trust by introducing a robust design system and tackle UX flaws to enhance the user experience

Establish trust by introducing a robust design system and tackle UX flaws to enhance the user experience

Project Roadmap

With clear goals, I created a project roadmap to align expectations and schedules with the founders and the engineering.

Design

To accommodate the tight timeline and engineering requests, the design was delivered in three parts, and the process followed the same sequence.

1. Foundation for global implementation (Colors, typography, nav bar … )
2. Common components (CTA buttons, textfields … )
3. Screen specific components and application

Foundation

I began by designing the foundational elements for further components based on three key considerations.

Components

Building on the foundation, I created both universal and screen-specific components with three key considerations.

Application e.G. 1:
Fundraiser Detials

While applying the design system, I also optimized the placement of primary CTAs for easy and fast user access.

While applying the design system, I also optimized the placement of primary CTAs for easy and fast user access.

Application e.G. 2:
Make a Donation

I also addressed UX flaws; for this particular screen, I regrouped information and features and introduced new design elements to differentiate each group for intuitive navigation.

I also addressed UX flaws; for this particular screen, I regrouped information and features and introduced new design elements to differentiate each group for intuitive navigation.

Application e.G. 3:
Launch a Fundraiser

Lastly, I collaborated with copy and legal to revamp copy throughout the platform and some screens required dynamic copy.

Lastly, I collaborated with copy and legal to revamp copy throughout the platform and some screens required dynamic copy.

IMpact

Scalability &
Efficiency

Scalability & Efficiency

43 complex high fidelity screens delivered in 1 week

The design system streamlined the design process and optimized workflows with the engineering.

User interview

User interview

Application example &
Label system

Application example & Label system

Thorough file documentation to support the expanding team

I included application examples for each component in the design library and a design file guide to support both current and future team members. Additionally, I introduced a labeling system in Figma to manage multiple versions efficiently.

User interview

User interview

Reflection

System thinking
Experiencing how a single component can shape not only one screen design but also the overall product experience, and importantly, influence the platform's credibility was a significant lesson for me.

Project management
Defining the project scope with the founders and aligning tasks and feasibility with the engineering team to successfully ship a project within set timelines gave me a good insight on product strategy.

Next Project􀄫

Next Project 􀄫

ⓒ 2025 Junhyung Cho

Email

Linkedin

Email