top of page

Through in-depth research, the UX and UI have been significantly improved to meet user needs and stakeholder requirements.

home.jpg
Alchemist

Alchemist is 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 inherently complex algorithm and data structure concepts, developing the most effective learning methods, and coping with constraints on user research resources.

​

By conquering these challenges through conducting in-depth & extensive research, maintaining continuous stakeholder engagement, collaborating closely with the developers, 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.

Role:  UX & UI designer

Time:  2023

Tool:  Figma

Developer:  Dong Zhou

Methods:

User centered design, iterative design, Thorough Research, Competitive analysis, User Research, Testing, Persona, Prototyping

Practices: 

Interaction Design, Design System, Relationship Phylosophy

Problem Context

Algorithms and data structures are essential for computer science students and job-seeking developers, but learning them can be frustrating.

​

Dong was a computer science student and is now 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. He describes that period as a painful experience during which he almost gave 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 several years of development, Dong now wants to update his website. He invited me to utilize my professional expertise to enhance it, making it more enjoyable and user-friendly.

"How can we transform Alchemist into an engaging and effective platform for users to learn and practice algorithms and data structures?"
Improvement Process
2 rounds
Research
Analyze
Ideate
Prototype
Understand
Kickoff Meeting

This Kickoff meeting was essential to understanding the brand, evaluating competitors, building trust, and setting goals.

​

Furthermore, the stakeholder expressed dissatisfaction with the current design aspects, including color schemes, layouts, and more. His major concern revolved around the lack of engaging problem expression for algorithms and data structures. This feedback informed our redesign efforts. ​

Target users are​

  • ​Computer science students

  • ​Developer job seekers

Stakeholder wanted â€‹

  • A visually appealing and simply website.

  • An approach to problem-solving with algorithms and data structures that is both easy to understand and engaging.

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. To do this, I initiated my first round of research using the following methods:​

Methods & Goals​

  • ​Searched articles and watched videos about algorithms to understand the challenges that people faced when learning and practicing algorithms and data structures.

  • Browsed algorithms and data structures learning communities 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.

Why these methods?

They were quick and easy ways to uncover the common struggles, effective solutions, and valuable tools used by learners. This approach ensured the project addressed the real-world needs and experiences of its broad users.

The findings​

  • There are some main pain points

  1. ​They found intricate details and mathematical concepts challenging to grasp.

  2. Struggled with solving real-world problems.

  3. Concerned about the long-term time commitment since a vast number of data structures and algorithms had to be practiced.

  4. Difficult to stay motivated due to the dry and challenging nature of the material.

What were their solutions?

  1. Found a good resource with step-by-step explanations, followed an appropriate learning sequence, and practicing was the key.

  2. Practiced solving practical, real-world problems.

  3. Set a structured learning plan.

  4. Explored fun learning styles, and had a study mate.

  • Their learning patterns

  1. ​The first step was to find good resources including books and platforms like LeetCode.

  2. Learned algorithms and data structures in an appropriate order, such as starting with fundamental topics like arrays and linked lists before moving on to more complex structures like stacks and queues.

  3. Focused on one topic at a time.

  4. Stick to a single programming language.

  5. Efficiency in problem-solving was frequently a significant consideration.

  6. Learned in a group.

What opportunities I found?

  1. Show users the efficiency.

  2. Add a feature for similar or related problems. It helps users to understand the similarities and differences between similar problems, and further improve their problem-solving skills.

  3. Create an effective and fun "Study Mates" feature to make Alchemist more engaging and make users easier to achieve their learning goals.

Competitive Analysis

After conducting my 1st research, I gained a broader and deeper understanding of people's struggles, patterns, 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 product reviews (both text and video)

​A Notable Gap​

​No platform combines both visual and textual explanations, indicating a valuable opportunity. Users could view a concise textual explanation of an algorithm, followed by a more detailed visual explanation that breaks down the algorithm step-by-step.​

A Significant Opportunity

Quizzes can be a fun and effective way for users to test their learning. The quiz feature should be designed to be challenging but not discouraging, and should provide users with feedback on their performance so that they can identify areas where they need additional practice. Learning through practicing

Discussed the gaps and the opportinities 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 insights into people's challenges, solutions, and learning patterns when learning and practicing algorithms and data structures, I didn't know their needs. Additionally, it 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 thirteen responses that could be systematically analyzed.

Key Objectives​

  1. Identify the pain points, motivations, and needs of our user base.

  2. Explore the solutions they have applied, understand how these solutions worked, and why they preferred them.

  3. Understand the various approaches users took when learning and practicing algorithms and data structures.

  4. Gauge how long different users plan to study or their commitment levels.

Why these objectives?

  1. 2. Solve users' struggles and meet their needs.

    3. Find out learning patterns.

    4. Inform time commitment considerations for custom learning plans and business strategies.

The Findings​

  1. Motivations varied among different user roles, with job acquisition being the predominant driving factor.

  2. The three primary pain points consistently identified were the challenges in comprehending complex concepts, difficulty solving real-world problems, and constraints due to limited time. The results were the same with 1st research findings.

  3. Regarding learning patterns, users typically practiced first, referenced alternative solutions on platforms like Leetcode, watched YouTube tutorials, participated in group learning, and sought guidance from instructors. Many users emphasized the value of visualizing algorithms in an engaging and enjoyable manner.

What opportunities I found?

  1. Additional examples and step-by-step explanations could significantly enhance the learning experience.

  2. Nothing beats practice.

  3. Visualized algorithms were considered somewhat effective, but they may not always be the optimal choice for practical application.

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

What algorithm and data structure problems for users to learn and practice was driven by company requirements.

Users' Needs = Their Needs

Pain Points = 1st Research's = Survey's

The pain points identified in the user interviews aligned with the findings of the survey and the 1st research.

Struggled with solving real-world problems.

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.

Add a diagram to point the issues

Identified Three Main Issues

1​​​

Lack of consistency

Inconsistencies in pages, titles, and tooltips; search bar not global. 

2

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.

3

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

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

Alchemist diagram (3).jpg
Analyze

Put the notes with mutual connections and relationships together into one group, then I got seven groups. Then observe and analyze the relationships between them.

Alchemist diagram (1).jpg
Persona

To make the target users' needs more concrete, I created two personas for reference and to constantly remind us to prioritize user needs and address their pain points throughout the improvement process.

Pain Points

  • Struggle with applying algorithms in real-life problems.

  • Difficult to stay motivated.

  • Difficult to grasp the concepts.

  • Too many questions to learn.

Motivation

  • To secure a job as a software engineer after completing her master's degree.

Goals ​

  • Practice easy-level algorithms next year.

Needs

  • The updated questions of companies.

  • Access to find help.

Learning Pattern

  • Sequential Practice: Gradual progression from easy to complex problems.

  • Visual Learning: Relies on visual aids for complex concepts.

  • Engagement Strategies: Engages in study groups and online advice.

  • Self-Assessment: Regularly evaluates progress for improvement.

  • Time Management: Allocates dedicated slots for practice.

  • Real-World Application: Seeks practical problems for learning.

Smiling Student Sitting At Desk
Joyce Hou
Computer Science Graduate Student
Algorithm Level
Easy
User Journey Map

I made a user journey map to show how target users reach their goals and identify potential opportunities. It was based on research data, findings, and insights, helping us understand target users better and empathize with their experiences. Creating this user journey map enables a more nuanced comprehension of their needs and interactions with the product or service.

Project Timeline Builder (14).jpg
Man with Striped T-shirt
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.

After I got a broader and deeper understanding people's struggles, patterns, approaches of learning and practicing algorithms and datastructures, I was eager to know the competitors. It's a good way to identify gaps and opportunities, and also to learn better about other service's understanding about algorithm learning and practicing process.

To add entertainment, gamification should considered, but I omitted the game industry and gamificated educational learning websites in the 1st round of improvement. Through the searching competitive process, I found some direct competitors as well. 

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

  • Algorithm Problem Solving

website header.jpg
old problem solving gif.gif
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