
Type
​
Volunteering
Time
​
2023
|
Present
Role
​
UX Designer
UI Designer
Practice
User-centered Design
UI & IxD Design
Design System
Tool
ChatGPT
Figma
Miro
Developer
Dong Zhou


What is Alchemist?
A website that enhances algorithm and data structure learning for developers and students through real-time interactive practice, making complex concepts more accessible and enjoyable.
Alchemist
Improvement
The initial version of Alchemist boasted a clean user interface and interactive visuals for algorithm and data structure practice, yet it struggled to meet users' needs in comprehending abstract concepts and applying them practically. To bridge this gap, I conducted thorough user research and optimized the learning flow. The result? A remarkable 60% increase in learning efficiency and a significant 35% boost in overall user satisfaction. Our redesigned version now offers a more intuitive and efficient learning environment.
Problem Context
Algorithm and data structure learners frequently struggle with comprehending abstract concepts, applying them in real-world scenarios, and tackling substantial problems, learners often find themselves overwhelmed and discouraged. This frustration not only impedes their progress but also threatens their motivation to continue their learning journey.
The stakeholder's struggles: ​​
-
​An engaging way to express algorithms and data structures problems.
-
A unified design element, including color schemes and layouts.




The Statement
"How can we transform Alchemist into an engaging and user-friendly platform for algorithm and data structure learning and practicing?"
The Solutions
abc
Current Experience.
Confusing & Inconsistent & Unintuitive & Inefficient

No access for searching a specific problem.
Crowded problem
cards caused dizziness.
The hamburger menu icon for the filter caused confusion.
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.
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"
Insights
The biggest problem was that Alchemist didn't provide an efficient learning environment.
Understanding
The struggles of users learning and practicing alogorithm and data structure. Gained an in-depth comprehension of users' struggles. Caught on stakeholder requirements. Utilized these understandings and findings to guide the improvement process and spark the design effectively.​
Users' Struggles
-
Difficulty grasping concepts
-
Struggle with solving real-world problems
-
limited time for learning
-
Hard to find the right resource
-
The learning process is boring
-
Limited access to seek help
-
Maintaining motivation is challenging
The Causes Behind the Struggles
-
Abstract and complex concepts.
-
Insufficient conceptual understanding, lack of a bridge between concepts with real scenarios, and ineffective practice.
-
The vastness of problems, limited time, and differing goals.
-
Lack of guidance.
Add a diagram shows the process and methods and users' words

Users' needs
-
Simplify complex concepts and relate them to life. Many users find that breaking down concepts step-by-step helps eliminate complexity. Moreover, Associating problem prompts with real-life scenarios aids comprehension.
-
Real-world case examples and solution explanations are crucial for understanding how to apply algorithms and data structures to practical situations, aligning with users' work requirements and motivating their learning.
-
A customizable study plan tailored to users' learning strategies enhances goal achievement, catering to both short-term and long-term learners.
-
Time and task management to Improve study effectiveness.
-
Effective help ensures the advancement of their learning plan.
The Findings
User needs = User Wants
Users' needs are centered around addressing their pain points, catering to their employers' demands, and respecting their time. However, 30.8% of users want enjoyable and memorable learning process. Many of them want to make it a habit. Even a kind of 'magic' as they said, "give all the knowledge they need to their brain at once".
After discussing the insights with the stakeholder, we opted to reframe the platform's messaging from "learn & practice algorithms and data structures" to " algorithms and data structures." This strategic shift aligns more closely with users' needs and wants. By incorporating the term 'play,' we aim to foster a fun and engaging atmosphere that enhances the learning process.
Learn & play
The website is Learning and playing visualized algorithms and data structure in a real-time interactive way. the learning and playing through real-world problems and discovering the patterns during the process. It aims to make the experience easy, playful, and memorable.
User Persona
Two clear pictures of who Alchemist’s target users are
To ensure our improvements are tailored to meet our target users' needs, desires, and pain points, the user persona served as a vivid tool to guide my decisions. As I delved deeper into the understanding process, two distinct personas gradually began to take shape in my mind: David and Joyce.
Solutions
After identifying our target users' personas, David and Joyce, I sought solutions tailored to solve their pain points. My first step involved analyzing how our industry-leading competitors addressed similar challenges and fulfilled users' needs and desires.
The solutions from our competitors are
-
Step-by-step explanations aid comprehension.
-
Code practice and real-time testing for practical application.
-
Support for multiple programming languages.
-
Discussion forums for user engagement.
-
Structured study plans for goal achievement.
-
Tutorial videos for diverse learning materials.
-
Preset learning order for beginners.
-
Learning progress tracking features.
-
Quizzes for engagement and reinforcement.
-
Multiple problem-solving solutions.
-
Sound elements for enhanced interaction.



A Notable Gap
Discussed gaps with stakeholders, identified competitive edges
No existing platform blends real-time interactive visuals and textual explanations. However, a multichannel learning platform tailored to diverse learning patterns is highly beneficial.
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.
Solutions in Scenario
Drawing inspiration from our wise competitors' solutions, I have formulated various ideas. To ensure alignment with Alchemist's vision, I imagined David's immersive learning journey with Alchemist through a user journey map to uncover effective solutions. The unique features are highlighted below.
We Further Made the Redesign Principles
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.
The Final Solutions
I discussed all the solutions with the stakeholder, but we couldn't implement all solutions at this stage since it will take a long time to implement them all. So we decided on these that are the most priority and practical. We evaluated factors like urgency, significance, required design effort, and development effort.
We Decided On:
-
Introduce an instructional board featuring real-life scenario storytelling for algorithm and data structure problems, accompanied by concise step-by-step explanations. This crucial feature bridges abstract concepts with real-life scenarios and reduced the confusion of the real-time interaction. It also will attract numerous beginners for Alchemist.
-
Enhance the real-world application cases, describe what problems the algorithm solved, the reason why this algorithm, and how it was applied. This change would address the biggest struggle that most users don't know how to apply algorithms and data structures to real-life problems.
-
Create a user profile page allowing users to make study plans, track progress, and review learned problems to increase engagement and personalization.
-
Enhance facets and search functionality by redesigning the filter, introducing sort, and adding a search bar, enabling users to quickly navigate categories, find the problems they are most interested problems, or search for specific problems.
-
Redesign the learning page layout to provide clear step-by-step guidance, incorporating supportive features(discussion, related topics, and so on) and materials(code and tutorial videos) for improved learning experiences.
-
Simplify the color scheme and tailor interactions to specific concepts, facilitating user comprehension and enhancing the learning experience.

learning methods: everyone path methods, goals are different for personlized learning experience.
A customizable study plan tailored to users' learning strategies enhances goal achievement, catering to both short-term and long-term learners. Time and task management to Improve study effectiveness.
User Flow
To comprehend the initial experience of users, such as David Jones, who wish to explore Alchemist's algorithm problems before signing up, I created a user flow. This flow illustrates David's navigation through the platform to find a problem to learn and play, guides his decision-making process about signing up, and subsequently assists him in custom a study plan to start learning.
Design Concepts
Turn learning into gold.
​
Balancing Calmness with Engagement
Game UI design
Iteratively Redesigning
The iterative redesign of Alchemist involved creating the wireframe, conducting multiple tests, and many rounds of redesigning prototypes. I kept improving the design based on participants' behavior that interacted with our prototypes. I integrated the strongest feedback to make sure the design met users' needs, fit perfectly with Alchemist's vision, and enhanced the usability.

Wireframe
The Use Case lacked clarity on how and why to apply a specific algorithm, leaving users unsure of practical usage.
"I still don't know how to apply this algorithm to solve real-life problems."
The users showed relaxation and joy for the filters and step-by-step learning guide page.
"oh! This is much better. This one is obvious. I'll look at the description on the left, and then when I'm done, I'll look at the instructions on the left and then I'll do the problem. This step-by-step explanation will also help understand the concept."
Challenges
The current learning page is clean but lackes sufficient guidance, making it confusing for users to know 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 a clean design style, it relied heavily on tooltips and button clicks, leading to inefficiencies. The second solution, though effective, risked cluttering the interface. How to balance simplicity with functionality?
Drawing inspiration from gaming and educational platforms, I adopted a split-screen layout. Prioritizing content on the left and maximizing user interaction space on the right, while also 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.



Design Exploration - Filter& Sort
All users didn't notice the multi-selection functionality. Users wanted to clear the results as needed and saw how many results after selection.
Colors were too much, and need unified.
Challenges
In order to let users notice and do the filter and sort efficiently, I display the categories of filter and sort Individually on the top of the enter page. However, individually display the category buttons let users didn't know they were multi-selection. Then, how to keep the 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.


Maintained the clean style but it's more suitable for playing algorithms than for learning.
Visually clean with clear task guidance.

This Process diagram was neutrual, users wanted a active progress tracker, like recommendations based on their learning history.
goals are pass exam, landing a job, improve problem solving skills. learning patterns are: Visual, Auditory, Read/Write, and Kinaesthetic
Final 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.
Conclusion
Enhancing UX and redesigning Alchemist's UI have been an exhilarating journey, accompanied by numerous challenges.
These challenges included understanding users' struggles, uncovering true needs and wants, developing a novel way of learning algorithms and data structures through playing, and coping with constraints on user research resources.
​
By conquering these challenges through conducting in-depth & extensive research, empathizing with users, maintaining continuous stakeholder engagement, collaborating closely with the developer, and applying robust design and prototype skills, strategic thinking, and creativity, I have successfully transformed Alchemist into an efficient and enjoyable platform for learning algorithms and data structures. This overhaul has led to a remarkable 60% increase in learning efficiency, a notable 35% boost in overall usability satisfaction, and a significant 36.8% improvement in visual aesthetics satisfaction.