







Alchemist
Improvement
Through in-depth research, the UX and UI have been significantly improved to meet user needs and wants, and exceeded the stakeholder's expectations.
Time
​
2023
|
Present
Role
​
Volunteer
|
Partner
UX Designer
UI Designer
Practice
User-centered Design
User Interface Design
Interaction Design
Design System
Tool
ChatGPT
Figma
Asana
Miro
Developer
Dong Zhou


What is Alchemist?
A website that enhances algorithm and data structure learning for developers and students through real-time interactive visuals, making complex concepts more accessible and enjoyable.
Overview
Enhancing UX and redesigning Alchemist's UI have been an exhilarating journey, accompanied by numerous challenges.
These challenges included understanding users' pain points, uncovering their real 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.
Problem Context
Algorithms and data structures are essential for computer science students and developers, but learning them is quite frustrating.
​
Dong is a senior software engineer. He vividly remembers his frustration when learning algorithms and data structures during his school days and job-seeking phase.
"These concepts were challenging to grasp, and solving tremendous problems was a significant hurdle. That experience was so painful for him that he once considered giving up."
​
Dong realized many computer science students and job-seeking developers faced similar challenges, so he created Alchemist and video tutorials to make the process more engaging and easier.
​
After years of development, Dong isn't satisfied with his website and seeks to update it. He invited me to utilize my professional expertise to enhance it, making it more enjoyable and intuitive.





The Statement
"How can we transform Alchemist into an engaging and user-friendly platform for algorithm and data structure learning and practicing?"
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.
Understand
Kickoff Meeting
This Kickoff meeting was essential to understanding the brand, evaluating competitors, building trust, and setting goals.
Through discussions with the stakeholder, I got to know that Alchemist's vision was still unclear, and there was uncertainty about its direction. The stakeholder expressed dissatisfaction with the current design elements, such as color schemes and layouts. One major concern was the lack of engaging problem representation for algorithms and data structures. This feedback guided our redesign process.


Target users are​
-
​Computer science students
-
​Developer job seekers




Stakeholder wanted ​
-
A visually appealing and simple website.
-
An attractive way to express algorithm and data structure problems.
1st Research
Since I was not familiar with algorithms and data structures, and the information from the kickoff meeting was not enough for me, I needed to gain a broader and deeper understanding of the pain points of people learning and practicing algorithms and data structures. ​
Methods & Goals​
-
​Searched articles and watched videos about the challenges that people faced when learning and practicing algorithms and data structures to understand learners' pain points.
-
Browsed algorithms and data structures learning forums to see what challenges they faced and what solutions they adopted.
-
Asked questions on Quora and Reddit to get answers from people who learned and practiced algorithms.
-
Attend CS job-seeking meeting.
Why these methods?
They allow me to quickly and easily get to know the common struggles, effective solutions, and valuable tools learners have used. This approach ensured that the project addressed its broad users' real-world needs and experiences.
The Findings​
-
There are some users' main pain points include understanding complex mathematical concepts, solving real-world problems, maintaining persistence, and staying motivated.
What were their solutions?
Effective learning methods discovered were using good resources with clear explanations, following a proper learning sequence, focusing on consistent practice, establishing a structured learning plan, and exploring enjoyable learning styles such as having a study partner.
-
Their learning methods involved finding quality resources, learning algorithms and data structures in a sequential manner beginning with basics, concentrating on one topic at a time, sticking to a single programming language, prioritizing problem-solving efficiency, and engaging in group learning.
Why understand their methods?
Understand the methods they employed and the reasoning, aiding in providing users with diversity learning methods.
One Interesting Finding
Explain, don't just solve!
"Being able to explain how and why you tackle those algorithm problems is worth more than just solving them. Expressing your problem-solving approach and ideas is crucial, as teamwork is key in today's workplace."
Competitive Analysis
After conducting my 1st research, I gained a broader and deeper understanding of people's struggles and approaches to learning and practicing algorithms and data structures. I was eager to understand the competitive landscape, which can help to identify gaps and opportunities, and to learn more about the algorithm learning and practicing process.
Methods​
-
Benchmarking
-
Analyzing their product reviews (both text and video)


A Notable Gap
There's currently no platform offering a multisensory learning style that integrates real-time interactive visualizations and detailed textual explanations. This gap presents a valuable opportunity. Users would benefit from interactive engagement with visualized algorithms and data structures, supported by concise textual overviews followed by comprehensive step-by-step visual breakdowns. A multisensory approach significantly will improve concept comprehension and learning.​

Discussed the gaps with stakeholders, and helped him to have a clearer product positioning and to identify areas where we could gain a competitive advantage.

Research
Survey
While my 1st research provided me with information about people's challenges, solutions, and learning approaches when learning and practicing algorithms and data structures, I need to understand the reasons behind them and users' needs. Additionally, the 1st research lacked completed information that a well-planned survey could offer.
To overcome these limitations, I conducted a structured user survey using Google Forms with both a wide range of users and our specific target users and gathered 13 responses that could be systematically analyzed.

Explore the solutions they have applied to understand how these solutions worked and why they preferred them.
Understand the various approaches users took for achieving different goals.
Identify the pain points, motivations, and needs of our user base.
Assess varying user timeframes or commitment levels. Use this insight to design learning plans section and refine business strategies around time considerations.
Findings
01​
The primary pain points consistently identified were the challenges in comprehending the concepts, difficulty solving real-world problems, constraints due to limited time, hard to finding learning resources that fit their learning style, boring learning experiences, and hard to stay motivated.
02​
Regarding users' solutions for their pain points, users typically practiced first, referenced alternative solutions on platforms like Leetcode, watched YouTube tutorials, participated in group learning and sought guidance from instructors.
03
30.8% of users wanted to make their learning process more fun and easier, like visualized Sorting is a good example.
04
Additional examples and step-by-step explanations could significantly enhance the learning experience.
05
Motivations varied among different user roles, with job acquisition being the predominant driving factor.
User Interview
To dig deeper target users' pain points and needs, I conducted interviews.
Initially, the stakeholder hesitated to conduct user interviews and usability tests due to concerns about bothering users. However, by presenting survey results and underscoring the value of a user-centered approach, I convinced the stakeholder and even invited his participation. Eventually, I gained permission to conduct research and testing with two target users.
Methods​
-
Video interviews
-
Ask open-ended questions
The Findings​
Users' learning priorities were shaped by the expectations and demands of their employers.
Users' Needs = Their Real Needs
What algorithm and data structure problems for users to learn and practice was driven by company requirements.
Struggled with solving real-world problems.
The pain points identified in the user interviews aligned with the findings
of the survey and the
1st research.
Pain Points = 1st Research's = Survey's
Usability Test
To identify the usability deficiencies of the Alchemist platform, I conducted Usability tests.
Methods​
Video meeting & Observation
Why these methods?
Video meeting allows me to contact the abroad participant.
Observing participants doing a task through screen sharing, I would see clearly where the problems and inefficiencies of the website are.
Identified Three Main Issues
01.
Lack of Consistency
Inconsistencies in pages, titles, and tooltips.
02.
Algorithm page confusion
Unclear algorithm problem-solving process, ambiguous input/output units or contexts, and excessive color usage for interaction changes, categories, and guidance.
03.
Trouble in Navigation
The icons of key features were hidden in submenus or combined, and the absence of a search bar made navigation difficult.
Analyze
Synthesis
The first step of analyzing was synthesizing the data, findings, and insights gathered from the 1st research, survey, user interview, and usability test.
Methods​
Affinity map
.jpg)
Analyze
After synthesizing these stickers, I reorganized related notes into groups and examined them. This analysis focused on summarizing users' struggles, causes behind these struggles, user needs and why these needs, and other insights.

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.
User needs = User Wants

Users' needs are centered around addressing their pain points, catering to their employers' demands, and respecting their time.
However, users want enjoyable, easy, and memorable learning and practicing 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".

User needs
Why?
​Simplify complex concepts, and make abstract concepts relatable to life.​
Many users believe that a step-by-step explanation of concepts can help understand and eliminate the complexity. A step-by-step explanation means breaking down complex concepts into coherent smaller concepts making them easier to understand. Associating abstract concepts with real-life phenomena helps users comprehend the concepts.
Ample real-world problem examples and solution explanations.
Customizable study plan.
Time and task management.
Effective help.
The proficiency to efficiently solve real-world problems is super important since it aligns with work requirements, a key motivation for users to learn algorithms and data structures. Ample examples are essential in comprehending how to apply these concepts to real-world problems.
A personalized study plan tailored to users' learning strategies boosts the likelihood of achieving diverse goals. For instance, short-term learners target popular problems, but long-term learners prefer lifelong learning.
Make an effective study.
Receiving effective answers ensures the progression of their learning plan.
Multisensory Learning
Sounds, visualizations, and text work together to enhance the learning experience, making the learning and practicing experience enjoyable and more accessible.


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
Persona
To visualize users' motivations, pain points, goals, wants, and needs, I created two personas for reference and to constantly remind us to prioritize user wants, needs and address their pain points throughout the improvement process.
User Journey Map
I crafted a user journey map to visually illustrate how our target users achieve their objectives and recognize potential opportunities. This map was curated from the comprehensive insights derived from the Affinity Map and Persona. It allows us to gain deeper insights into our users' behaviors and goals, fostering a profound understanding of their interactions with our product or service. This user journey map serves as a strategic tool, offering a detailed visualization of their experiences and aiding in the identification of key touchpoints, thus enriching our capacity to design a more user-centric solution.
.jpg)

Ideate
Improvement Principles
Egagement
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
Prioritization
Prioritize improvement decisions based on the findings from previous work. Focus on must-have and should-have improvements
Shareable
Problems, solutions, achievement all can be shareable
Minimalism
Prioritize concise and effective features that meet user needs for a clean and streamlined platform
Clarity
Everything should be easy to understand especially the explanations & instructions
Improvement Decisions
I discussed all the features with the stakeholder and identified the ones that align with users' needs, desires, and Alchemist's vision. We evaluated factors like urgency, significance, and required effort to determine the features for this round of enhancement and design.

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
Wireframe





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.
More Information will come soon!
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.