ALCHEMIST
Volunteer project | Role: UX & UI designer | Tools: Figma, Miro | Time: 2023




The previous version to the final version
The UX design and interface redesign of the Alchemist website was my first project after graduation. The website focuses on algorithm and data structure learning. Through stakeholder engagement, competitor analysis, and user insights, I optimized search functionality, introduced valuable features, and redesigned the UI. The result is an enhanced platform that facilitates effective learning.
OVERVIEW
IMPROVEMENT
PROCESS
The process of improving the Alchemist website involved a comprehensive approach.
It began with a kickoff meeting to understand stakeholder's expectations and the current state of the website. Problems with the website were identified through competitive analysis, user interviews, and usability tests. Based on the findings from the user interviews, a set of improvement principles was established, emphasizing an effective learning experience and a concise design. Two personas were created and improvement decisions were made.
Subsequently, a wireframe and an interactive prototype were created and tested with two users to gather feedback and identify any new issues.
KICKOFF
MEETING
At the kickoff meeting, the stakeholder explained that the Alchemist website is a platform for users to learn and practice algorithms in a visualized way. The target users are computer science students and software engineer job seekers. The main features of the website include real-time interactive visualized algorithm problems, algorithm categorization and sorting, and problem descriptions. The stakeholder's vision for the UX design is to create a minimalist website that is clean, uncluttered, and efficient.
Initially, the stakeholder was hesitant about conducting user research. However, I emphasized that this user-centered approach would enable us to gather valuable insights and ensure that the design efficiently meets the needs of the users. Ultimately, I gained permission to conduct user research and testing with two target users.
COMPETITIVE
ANALYSIS
After thoroughly analyzing visualization algorithm competitors, I observed that Alchemist sets itself apart with its streamlined features, minimalist visual design, and real-time practice functionality. However, I also identified several areas for improvement compared to the competitors. These include making the meaning of icons more apparent, providing explanations of problem-solving steps, and redesigning the visual system to enhance aesthetics and usability. Additionally, I drew inspiration from competitors by recognizing the value of incorporating a quiz feature to greatly reinforce users' understanding and application of algorithms. By addressing these areas, Alchemist can further enhance its role as a high-efficiency platform for algorithm visualization and learning.
LeetCode
Engaging learning
multiple categorization
Beyond question-focused
Coding playground
Smooth leanring process
Concise explanation
tutorial videos
DataCamp
Interactive exercise
Concise design
Beyond question-focused
Hands-on experimentation
smooth leanring process
Instruction
tutorial videos
VisualGo
Question-focused website
Explanation
Interactive animation
Vivid colors
Data
Structure
Visualizations
real-time interactive practice
Question-focused website
Explanation
Alchemist
Real-time interactive practice
Question-focused website
Streamlined design
tutorial videos
USER-BASED
RESEARCH
To gain insight into user needs and identify the usability deficiencies of the Alchemist platform, I conducted in-depth video interviews and surveys with two target users: a computer science student and a software engineer. This user research revealed that users' needs are influenced by the expectations and demands of their employers. The survey results highlighted that users' primary pain point in learning algorithms is the application of algorithms to real-life problems. Through the video interviews, I performed usability testing and observed their first use of the site. Further, I identified three significant deficiencies: difficulty in locating icons, confusion regarding question content, and lack of consistency.
USERS' NEEDS
User Needs
Pain
Points
Goals
Issue Identification
Video Interview
Observation
Methods
Survey
Computer Science Student
Participants
Software Engineer
"The biggest pain point of learning algorithms for me is understanding them and being able to apply them in real-life problems rather than just memorizing the templates."​
USERS'
PAIN POINTS
"Not sure how to flexibly apply algorithms and their efficiency."​​
-
​Updated each company's requirement on algorithms.
​
-
​Efficient learning and practice progress
Easy to understand the algorithm problems. Providing clear ideas of problem-solving. Completing tasks fast without unnecessary tasks or distractions.
​
-
Access to find help
They need to ask questions when they have questions or challenges during the learning process.​​
USABILITY ISSUES
-
Difficulty in locating icons​​​
Some important features were either hidden in the submenus or combined with other features. The search icon in the hamburger menu caused challenges in search questions.​​​
Solution
Reposition icons for visibility
-
Confusion on the algorithm page​​​
Insufficient information on algorithm problem-solving process. Ambiguity input and output units or contexts. excessive use of colors for interaction changes, categories, and guidance.
Solution
Specify units or context
Clear step explanations
Implement cohesive and intuitive color scheme.
​​
-
Lack of consistency
Inconsistencies in pages, titles, and tooltips; search bar not global.
Solution
Keep consistency
To make the target users' needs more concrete, I created two personas for reference and to constantly remind myself to prioritize user needs and address their pain points throughout the improvement process.
PERSONA

Joyce Hou
Computer science graduate student
Pain-points
-
Applying algorithms in real-life problems.
-
Too many questions to learn.
Goals ​
-
Practicing the easy-level algorithms next year.
Motivation
-
To secure a job as a software engineer after completing her master's degree.
Algorithm Level
-
Easy

Front-end software
engineer
David Jones
Pain-points
-
Struggling with applying algorithms to real-life problems.
-
Limited time to learn algorithms due to commitments.
Goals ​
-
Learning the easy to medium level algorithms in 3 months.
Motivation
-
To hop a new job as a software engineer.
Algorithm Level
-
Easy
IMPROVEMENT
PRINCIPLES
COMPREHENSION
Visualized algorithms with clear textual explanations and visual cues help users learn more effectively.
PRIORITIZATION
Prioritize improvement decisions based on user research, and persona. Focus on must-have and should-have improvements.
MINIMALISM
Prioritize concise and effective features that meet user needs for a clean and streamlined platform.
ENGAGEMENT
Add examples, quizzes, and encouragement to improve user understanding and engagement.
IMPROVEMENT
DECISIONS
In order to make a comprehensive improvement decisions, I listed all the issues I found from user research, competitive analysis, and stakeholder. Under each issue and opportunity, I have listed corresponding solutions. It's clear to see that some solutions address more than two elements, and it is essential to implement them for effective improvement. While the number of occurrences is a consideration, priority is primarily determined by factors such as user needs and pain points, making them the most crucial areas of focus.






WIREFRAME















PROTOTYPE
-
Simplify




-
Global Navigation




-
Added Account




-
Added Disccusion & Quiz




-
Reposition Example


-
Algorithm Problem Solving


STYLE GUIDE

TESTING
Rearch users' Needs or not
Usability
Goals
Improvement results
Video Interview
Observation
Methods
Comparison
Software Engineer
Participants
Computer Science Student
USER TESTING
User testing yielded promising results, with participants expressing enthusiasm for the new Alchemist version. They found the platform more enjoyable, aesthetically appealing, and user-friendly. The problem-solving experience was improved, and additional functionalities were helpful. Positive feedback was received from the stakeholder, who expressed a strong desire for me to continue my efforts in improving the project. Overall, the new Alchemist is enhanced and more user-friendly.
NEXT STEPS
-
​User testing shows some details for further improvement:
-
Adjust the jargon of Instruction on the problem-solving page for clear ideas.
-
Add alphabet order for algorithm problem sorting.
-
Change disabled black grids to grey during visualized algorithm problem-solving to indicate inactivity.
​
-
​The following functionalities are still under development:
-
Design a cartoon character that will be used in the instructions, study plan customization, learning progress visualization, the completion page, and any encouragement moment. This will add a fun and friendly touch for users.
-
A certification page should be added to allow users to share their achievements.
​​​