top of page

Creating art wasn’t a hobby—it was the root of my being, fueling my growth and shaping my view of the world.

It was a cosmic canvas where I intended to paint with code and concept, unconstrained by limits.

Now! I’m a UX designer at Alchemist.com, wielding pixels like a digital paintbrush. This role has made me more professional, thoughtful, and strategic in my approach, allowing me to create solutions that truly help people.

My passion for design continues to flourish and evolve.

Designed and developed an iOS app that combined haptic feedback with emotional expression. This project demonstrated my ability to turn imagination into reality and showcased my hands-on skills.

Collaborated on an experiential sound project that explored haptic and visual design, deepening my understanding of design. System combining music responsive, generative visual art and a wearable vest containing reactive haptic vibrations.

Bored with the ordinary; I want to live fiercely!

portfolio alchemist 3.png

Alchemist

A website designed for developers, CS students, and job seekers to learn and practice algorithms and data structures through real-time interactive visuals.

B2C

EdTech

NEW DESIGN

Ensure Easy Navigation

website header.jpg

Efficient & Joyful Learning

website header.jpg

CURRENT DESIGN

Inconvenient Navigation

website header.jpg

* Click to play and pause the videos

Confused Learning

website header.jpg

* Click to play and pause the videos

New Features Support Learning Experience

COMPARISON

New

Ensure Easy Navigation

website header.jpg

Current

Inconvenient Navigation

website header.jpg
the final enter page round corners.png
rounded corner old home.png

+60% learning efficiency.  +35% usability satisfaction.   +36.8% aesthetic satisfaction.

Artboard 4.png

The Improvement

of Alchemist

Turn Learning Into Gold

Improved the website through

user-centered design.

UX/UI Designer 

03/2023- Present

The Redesign

of Help

For Elderly

UX Designer 

01/2021 - 05/ 2021

03/2024 - Present

Coming Soon...

Objectives

Transform Alchemist into an efficient learning platform for algorithms and data structures, and boost users' goal completion.

Current Experience

Confusing & Inconsistent & Unintuitive & Inefficient

The hamburger menu icon for the filter caused confusion.

No access for searching a specific problem.

Crowded problem

cards caused dizziness.

Users were unsure where to start or what actions to take.

Real-time interactive feedback has helped in understanding algorithms.One of the user stated that "at least 80% help"

Users liked the multi-select feature.

Users had to back to the filter board to edit their selections was Inefficient.

old problem 1.png
old description 1.png

Insufficient information was provided for users to grasp the knowledge and apply concepts to real-world problems.

The interaction was unintuitive, requiring users to engage in extra cognitive effort to accomplish tasks.

Users liked the

clean UI.

Inconsistencies arose due to the lack of titles, tooltips, and other elements on some pages.

inconsistant 1.png

The diagram shows both the primary positive and negative experiences identified through user interviews and usability testing.

How I Made It?

Principles Go First

Engagement

Making it multisensory and playful to enhance user engagement.

Efficiency

Provide efficient learning and task flow.

Instant Feedback

Important for real-time interactive problem solving.

Clarity

Everything should be easy to understand especially the explanations & instructions.

Prototype
website header.jpg

More Efficient Navigation

  • Categories for quick access.

  • Organized problem cards for easy browsing.

  • Informative labels on problem cards for fast access to information.

  • Collection and Share icons for convenient saving and sharing.

  • Back-to-top icon for quick navigation.

Smooth Learning Experience

  • Concise Guidance.

  • Real-world application examlples and  scenario problem prompt.

  • Multichannel learning: text, visuals, and videos, with clear interaction.

  • Movable boards.

WechatIMG3905.jpg
website header.jpg
website header.jpg

Easy Sign Up & Sign In

  • Social sign up or sign in.

Iteratively Design

Low-fidelity Prototype

Enter page.png

Entry Page

Algorithm seperated.png
learning full.png

Learning Pages

Account page.png
progress tracker.png

Profile Pages

Sign up.png
login.png
study plan survey 1.png
study plan survey 2.png
study plan survey 4.png
study plan survey 3.png
study plan survey 5.png

Making Study Plan Pages

After testing the Low-fidelity prototype with one user, I learned that The Use Case lacked clarity on how and why to apply a specific algorithm, leaving the user unsure of practical usage.

"I still don't know how to apply this algorithm to solve real-life problems."

Enter page.png

Entry Page

Algorithm seperated.png
learning full.png

Learning Pages

Account page.png
progress tracker.png

Profile Pages

Iteratively Design

Sign up.png
login.png
study plan survey 1.png
study plan survey 2.png
study plan survey 4.png
study plan survey 3.png
study plan survey 5.png

Making Study Plan Pages

Challenge

Balance simplicity with functionality

How to guide users through the learning flow visually?

The current learning page is clean but lacks sufficient guidance, leaving users confused about where to start and what to do. To address this, I explored two solutions: reorganizing buttons and directly displaying algorithm details. While the first solution maintained the clean design, it relied heavily on tooltips and button clicks, leading to inefficiencies. The second solution, though effective, risked cluttering the interface.

Solution: Drawing inspiration from gaming and educational platforms, I adopted a split-screen layout. This design prioritizes content on the left and maximizes user interaction space on the right, ensuring concise text and unified buttons. These changes effectively addressed the challenge. User testing confirmed the third version as the favorite.

Maintained the clean style but it's more suitable for playing algorithms than for learning.

Suitable for both playing and learning but UI overwhelming.

learning page 3.png
learning page 4.png

Visually clean with clear task guidance.

Aligned categories by frequency of use from high to low.

Redefined and Reordered Categories based on the survey findings.

filter & sort diagram 4.png

Individual buttons and dropdown lists caused users to miss the multi-selection feature.

2, Design Exploration - Filter& Sort

To provide users with an efficient way to find their interested algorithm and data structure problems, I redefined and reordered the filter and sort categories, placing them prominently at the top of the entry page. However, user testing revealed that users missed the multi-selection functionality, wanted a quick way to clear results, and needed to see the number of results after selection.

Challenges

Achieve complexity & efficiency & aesthetic

How can I keep the category buttons at the top while increasing the discoverability of multi-selection?

It's challenging to integrate filters and sorts while improving navigation efficiency due to the complex logic of multi-selection and various user choice combinations. Hovering over any category reveals a dropdown with all suboptions, highlighting multi-selection. However, the 'Beginners' Path' can only be single-selected, while sort categories like 'Popularity' and 'Newest' need to allow both individual and multi-selection. Maintaining a clean UI adds complexity because sort categories lack suboptions, and some filter suboptions have lengthy text.

​

Multi-selection

filter and sort problems.png

Single Selection

Hover animation and used gold to symbolize "Turning learning into gold," but it cluttered the color scheme.

Long text messed up the UI.

The elegant solution

After thorough consideration and experiments, I devised a solution: I grouped filter category buttons requiring multi-selection, enabled a dropdown display upon user hover, and kept sort category buttons separate. This approach allowed for both single and multi-selection. Meanwhile, I removed strokes from categories and suboptions, allowing long text to be displayed tidily, and adopted a unified white dropdown board to facilitate the multi-selection and streamline the UI. I canceled the "Turning learning into gold" concept in the filter and sort area, reserving it for the learning and playing modules, leaving the filter and sort area clean and focused. By making these changes, I made the multi-selection more discoverable, kept the UI clean, and overall improved user navigation.

website header.jpg
Project Context

Alchemist is in its early stages, featuring only a basic entry page and a learning/practicing page. Essential elements such as signup/log-in are currently missing. Developer and founder Dong wants to advance the platform to provide enhanced functionality and an engaging user experience, aiming to attract and retain a wider user base.

old problem page 50% parency.png
How I Achieved this Goal?
2 rounds

Identify current usability issues on the website.

Understanding users' struggles, needs, and genuine wants.​

Figure out the proper solutions.

Understanding users' struggles, needs, and genuine wants.​

Some are a lot of textual explannations but no visualized algorithms, but another have visualized algorithms but no much explanations. Too many text will make some learners who hate reading gave up easier. Only visualization no explanations not enough for leaners to comprehend the concepts.

3d cloud_edited.png
3d cloud_edited.png
depressed person_edited_edited.png
3d cloud_edited.png
We Further Made The Design Principles

Efficiency

Provide efficient learning and task flow.

Multisensory

Making it multisensory and playful to enhance user engagement.

Instant Feedback

Important for real-time interactive problem solving.

Clarity

Everything should be easy to understand especially the explanations & instructions.

progress.png

This Process diagram was neutrual, users wanted a active progress tracker, like recommendations based on their learning history.

Design Exploration - Filter& Sort

First I redefined the filter categories and reordered it from right to left to align with the high-use frequency according to the results of the user survey. The right is higher frequency and the left is lower frequency. Second, in order to let users notice what categories of algorithm and data structure are available easily, I displayed all the categories of filter and sort on the top of the enter page. To allow users to find their interested problems through filters and sort efficiently, I put the filter and sort and search bar in one place. To add playfulness I designed a hover animation on the category buttons. To convey the concept of click stone to gold, I designed the after-click color to gold. However, after the 1st test, I realized that the colors were too many to give a clear visual guide. During the 4- participants testing, one of the users thought the hover animation was unnecessary. The most important feedback was that all users didn't notice the multi-selection functionality. Moreover, users wanted to clear the results as needed and see how many results after selection.

Design Exploration - Filter& Sort

To help users efficiently find their interested algorithm and data structure problems, I redefined and reordered the filter and sort categories, placing them prominently at the top of the entry page for better accessibility. To add playfulness, I incorporated a hover animation on the category buttons. I used a gold color for the post-click state to symbolize transformation and implement the concept of 'Turning learning into gold'. However, user testing revealed that users missed the multi-selection functionality, wanted a clear way to reset results, and needed to see the number of results after selection. Additionally, the colors are too many to keep a clean UI.

Challenges

How to keep the category buttons on the top and meanwhile significantly increase the discoverability of multiselection? The solution is that when user hover on any one of the categories, a dropdown board that contains all suboptions shows up, so users get to know the multi-selection feature. However, sort categories like Popularity and Newest should also be able to be individually selected without other multi-selection. So I group the category buttons that can do multiselection, when users hover on any one of it, the dropdown board will popup, and also keep other category buttons individually, then users can both  just select one and multi-select the individual buttons with group buttons as needed.  Another question was that some suboptions are very long and don't fit to the stroke of the category buttons. Therefore, I deleted the stroke of the buttons and add a whole white drop board to keep the tidy UI design. This edition was the most elegant solution so far.

Added a color effect at the end of the search bar to direct users to the sign-up icon, emphasizing it to increase sign-up rates.

filter & sort diagram 6.png

Revolutionizing

Algorithm & Data Structure Learning & Playing

01.

Efficient learning flow

02.

Interactive modules

03.

Goal-oriented features

It is designed to enhance the learning experience for computer science students, job seekers, and developers by breaking down complex concepts, bridging theory with real-life applications, and keeping learners motivated through engaging and intuitive interfaces.

Expriential sounds.png

Interactive Art

Experiential
Sound

Explored the intersection of sounds, visuals, and haptics.

 11 / 2021 - 05 / 2022

Coming Soon...

ARt projects

the final enter page round corners.png
help mockup.png

UX & UI

Help

An app that assists elderly in

emergency situations.

 01 / 2021 - 05 / 2021

Coming Soon...

My creative journey began as a little girl who loved making cool stuff. 

IMG_5357.HEIC
fbc221d5c4bf692cfcc16304c2b51499.JPG
da46f5ffeb960f5e05651ffaedaaeff4.JPG

Emotions

Treasure

Challenges I Conquered

Whether it was dancing, crafting, or painting, if it was beautiful, I was all in. Learning art gave me a superpower: the habit of seeing beauty in everyday life, even in darkness, laying the foundation for my artistic mindset. Now, my passion for creation continues to flourish and evolve.

I can’t describe the joy of designing and creating beautiful, cool, and meaningful things. It was a time to dive into new mediums, immerse myself in the world of art, and refine my skills. I learned to channel my ideas and emotions into my work, turning abstract thoughts into tangible art. These experiences weren't just fun, they were like building blocks for a lifetime of "wow" projects.

I was a volunteer at Johnson center of art gallery

1c0808159169e2df77a2d2177c51ff15.JPG
d92c32789d1e89593fd62a1cd9f38a8a.JPG
13f0d0915e0ecb946eec138555e0d08a.JPG
IMG_2269.JPG
8409f141ae63553d5edb27f007c28bf2.JPG

In 2015, I moved to the USA and embarked on an exciting journey across the country, exploring renowned art museums. These experiences not only deepened my understanding of art's vast possibilities but also enriched my reservoir of design inspiration.

A life-changing move

Artboard 3.png

Bored with the ordinary; I want to live fiercely!

cloud.png
bottom of page