top of page

ALCHEMIST

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

Screenshot 2023-06-20 at 7.23.40 PM.png
home.jpg
arrow green gif.gif

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
Smiling Student Sitting At Desk
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

Happy Man
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
Home.png
PROTOTYPE
  • Simplify

website header.jpg
old home gif.gif
website header.jpg
home white.gif
  • Global Navigation

website header.jpg
old search gif.gif
website header.jpg
search-aichatbot gif.gif
  • Added Account

website header.jpg
old no account gif.gif
website header.jpg
account gif.gif
  • Added Disccusion & Quiz

website header.jpg
old description gif.gif
website header.jpg
algorithm description gif.gif
  • Reposition Example

website header.jpg
old problem solving gif.gif
  • Algorithm Problem Solving

website header.jpg
algorithm problem solving gif.gif
STYLE GUIDE
style guide.png
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:

  1. Adjust the jargon of Instruction on the problem-solving page for clear ideas.

  2. Add alphabet order for algorithm problem sorting.

  3. Change disabled black grids to grey during visualized algorithm problem-solving to indicate inactivity.

​

  • ​The following functionalities are still under development:

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

  2. A certification page should be added to allow users to share their achievements.

​​​

bottom of page