Work
Playground
About
Resume

Contact

Strategic Design for StartUp

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.

Figma Link

Timeline

2024.7-2024.9

Role

UX Designer

End-to-End Delivery

-Create a Design System to align with company branding

-Design the overall flow of "Contact & Chat" part
-Redesign the Navigation System

Tools

Figma

Zoho

Slack

Challenges

  1. Company do not have a consistent design system within IOS, Android and Web

  2. Current navigation system lacks logic and hieracy

Design System

IOS
Android
Web

See Details

Redesign

Information Architecture
Social & Contact Part redesign

See Details

🐣 As an early UX designer, I developed the design system and navigation structure.
💬 After additional designers joined, I took responsibility for redesigning the social content section of the web app.
🌟 Due to NDA Agreement, I could only show part of the design :)

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!

Designer

Stay open to all feedback, create a great user experience, but maintain a balance with business requirements!

Engineer

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

Analyze original design

(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?"

Unclear Feature Differentiation

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

Cognitive overload

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

Accessibility

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

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?"

Cognitive overload

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

Accessibility

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

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

Let's do it!

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.

Original Layout

Content-driven Layout

New Problem

Text heavy & less information per screen

System-driven
Layout

System-driven Layout

See detail in Figma Link: Modify Strategies

Redesign Social Communication Section

Figma Link: contact and chat Redesign


Auditing Principle:

- Align with design systems

- Refine user flow

- Leverage A/B testing

RefineInformation Architecture for more intuitive user flow

What we change：

Refined the information architecture and added a "Track or Withdraw My Request" feature.
Benefits:

Enhances cognitive load efficiency, speeding up task completion
Trade-offs: NA

Original

Refined

Enhance Readability


What we change：
-Organized "Contacts" information into categorized tags ;
-Reduce text density and increased whitespace/icon prominence.

More intuitive user flow


What we change：

Refined the information architecture and added a "Track or Withdraw My Request" feature.

Benefits:

Enhances cognitive load efficiency, speeding up task completion

Reducing Disruption


What we change：
Replaced page redirection with a modal overlay interaction.

Benefits: Enhances focus, simplifies navigation

What we change：

Refined the information architecture and added a "Track or Withdraw My Request" feature.

Why :

more intuitive user flow

Benefits:

Enhances cognitive load efficiency, speeding up task completion

Trade-offs: NA

Enhance Readability


What we change：
-Organized "Contacts" information into categorized tags ;
-Reduce text density and increased whitespace/icon prominence.


Benefits: enabling users to locate desired actions more quickly

Trade-offs: Decreased information per page.

Enhance Readability


What we change：
-Organized "Contacts" information into categorized tags ;
-Reduce text density and increased whitespace/icon prominence.

More intuitive user flow


What we change：

Refined the information architecture and added a "Track or Withdraw My Request" feature.

Benefits:

Enhances cognitive load efficiency, speeding up task completion

Enhance Readability


What we change：
-Organized "Contacts" information into categorized tags ;
-Reduce text density and increased whitespace/icon prominence.

Reducing Disruption


What we change：
Replaced page redirection with a modal overlay interaction.

Benefits: Enhances focus, simplifies navigation

Enhance Readability


What we change：
-Organized "Contacts" information into categorized tags ;
-Reduce text density and increased whitespace/icon prominence.

Refined Information Architecture

in consideration for product's future growth


Auditing Principal:

🧭. Adjust Navigation structure for cognitive flow

🔗 Get adaptable layout with existing design layout

🤍. Clean and modern style

Before

After

System Icons

Primary Headings

（Side Bar）

Secondary Headings

（Tabs）

After

System Icons

Primary Headings

（Side Bar）

Secondary Headings

（Tabs）

After

Dashboard

Contacts and chats

System Settings

Primary Headings

（Side Bar）

Secondary Headings

（Tabs）

Progress Bar

Tabs

Usability Testing

Dated

Modern

Modern

Modern

Inconsistant

Consistant

Consistant

Consistant

Cluttered

Efficient

Efficient

Efficient

Impact

To business

The redesign reduced users' time on task for finding contacts or starting chats by 13%, and increased user satisfaction (CSAT) by 8%, will drive user growth and increase repurchase rates.


To designers and develop team

The implementation of the design system significantly enhanced collaboration between design and development teams within the organization.


To users

This improvement streamlined the process of creating new tools, ultimately boosting efficiency and fostering a more cohesive and high-quality user experience.