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!


NEW DESIGN
Ensure Easy Navigation

Efficient & Joyful Learning

CURRENT DESIGN
Inconvenient Navigation

* Click to play and pause the videos
Confused Learning

* Click to play and pause the videos
New Features Support Learning Experience
COMPARISON
New
Ensure Easy Navigation

Current
Inconvenient Navigation





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

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.



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.

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


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.



Easy Sign Up & Sign In
-
Social sign up or sign in.
Iteratively Design
Low-fidelity Prototype

Entry Page


Learning Pages


Profile Pages







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


Entry Page


Learning Pages


Profile Pages
Iteratively Design







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.


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.

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

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.

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.


How I Achieved this Goal?
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.




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.

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.

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.


Interactive Art
Experiential
Sound
Explored the intersection of sounds, visuals, and haptics.
11 / 2021 - 05 / 2022
Coming Soon...


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.



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






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


Bored with the ordinary; I want to live fiercely!
