􀄪 More projects

About

Résumé

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 Project | Design System, System Thinking, Visual Design

Overview

Overview

I led the development of a design system for a social donation platform, introducing a clean, modern UI that highlighted user-generated content and strengthened brand identity. I also resolved UX issues to enhance usability, and created a Figma design library to support scalability.

I led the development of a design system for a social donation platform, introducing a clean, modern UI that highlighted user-generated content and strengthened brand identity. I also resolved UX issues to enhance usability, and created a Figma design library to support scalability.

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

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

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

Before starting

What is Company x?

What is Company x?

Company X is a social giving app, aiming to change the donation culture

It makes the donation experience more inviting and enjoyable by introducing features such as challenges and real-time impact updates.

What was their needs?

What was their needs?

Mobile App Revamp before Q2 2024 launch

While unsure of their exact needs, the two founders knew the existing design wasn't visually appealing or user-friendly. They wanted a significant improvement before launch. The legacy design, created by previous freelance designers, was available as an iOS demo via TestFlight.


At the founders' request, the logo has been blurred and the name has been changed to "Company X."

Defining Goals

Due to ambiguity in the founders' needs, the first step was to identify problem spaces and define goals.

Due to ambiguity in the founders' needs, the first step was to identify problem spaces and define goals.

UX Audits

In order to identifying problem spaces in the existing product, I screenshotted every screen on 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

After defining clear goals, I created a project roadmap to align expectations and schedules with the founders and the engineering through multiple meetings.

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. Some screens required dynamic copy.

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

IMpact

Scalability &
Efficiency

Scalability & Efficiency

43 complex high fidelity screens delivered in 1 week
1 Designer / 20 hours

The design system not only streamlined the design process and optimized workflows with the engineering but also received very positive feedback from stakeholders.

User interview

User interview

Application example &
Label system

Application example & Label system

Thorough file documentation to support the expanding team

I included application examples of each component in the design library for the future team members and introduced a labeling system on Figma to manage multiple versions.

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.

AI Powered Recruitment Platform 􀄫

ⓒ 2024 Junhyung Cho

Email

Linkedin