Home

Playground

About

Resume

Contact

Home

Playground

About

Index

Scalable Systems Design

Internship project @ LingoCard

Strategic Design | Social Contact| Design System & Branding
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.

Internship project @ LingoCard

Strategic Design | Social Contact| Design System & Branding
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.

Timeline

2024.7-2024.9

Role

UX Designer

Team

Me- UX Designer (onboarding another one later)

1 Boss

3 Developers

Marketing Manager

Approach

Achievement

Impact

Establish Design system

Redesign

Ensured visual consistency

across iOS, Android, Web, and marketing materials through a unified design system.

Design-dev efficiency by 30%

by reusable tokens and components.

Users Navigation errors by 40%

through streamlined IA redesign.

Impact

🐣 First I designed a quick MVP based on the PRD.
💬 This version is only built for pitching and early testing.  
🌟 NDA applies — only partial designs shown.

Stakeholders

Boss

I want my product outstanding and competetive, with unique branding!

User

I want to learn a second language and make friends in a way that's both fun and professional!

Me in team!

Me!

Hey There!👋

Engineer

Want a single source of truth to ensure consistent, scalable UI and seamless collaboration within the design system.

Heuristic Evaluation

(Take contacts page for example)

Poor Information Architecture

"We offer key features like language learning, social elements, and a simple card-based system. I want these highlighted more clearly."

"The navigation is confusing. Why is the friend request option under 'Teaching'? Where can I track or cancel my sent requests?"

Poor Information Architecture

"We offer key features like language learning, social elements, and a simple card-based system. I want these highlighted more clearly."

"The navigation is confusing. Why is the friend request option under 'Teaching'? Where can I track or cancel my sent requests?"

Unclear Feature Differentiation

"What’s the difference between a top bar search and a dedicated search section?"

Unclear Feature Differentiation

"What’s the difference between a top bar search and a dedicated search section?"

Unclear Feature Differentiation

"What’s the difference between a top bar search and a dedicated search section?"

Accessibility

"It's hard for me to read the text."

Accessibility

"It's hard for me to read the text."

Accessibility

"It's hard for me to read the text."

Cognitive overload

"There’s an overwhelming amount of text on this page, making it hard to go through."

Cognitive overload

"There’s an overwhelming amount of text on this page, making it hard to go through."

Cognitive overload

"There’s an overwhelming amount of text on this page, making it hard to go through."

Overall problem

UI Inconsistency

-Icons, cards, and grid misalign with 🔗 Material Design 3 standards.
-Branding strategy is unclear

Navigation

Poor hierarchy between primary and secondary menus, causing navigation inefficiency.

Solution

-Align design system across iOS, Android, and Web

-Refine existing design for consistency
-Create information architecture for future product growth

Set Design System（ IOS, Android, Web）

Purpose: align with the latest industrial guide.

Atomic Design: Atoms > Molecules >Organisms > Templates > Pages

Figma Link: Modify Strategies

Web

Mobile Device (IOS & Android)

See detail in Figma Link: Design System Documentation

Auditing Principal

🪡 Consistency: Across all platform (IOS & Android)
𝌡 Adaptable: Try to make less modification
🔍 Readable: evaluated w/ actual size, making sure the font size is easy to read.