top of page
165 .png
green arrow.gif

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

Role

 

UX & UI designer

Tool

 

Figma

Developer

 

Dong Zhou

Practice

 

Interaction Design

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

​

              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                   many computer science students and job-seeking developers faced similar challenges, so he                   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                it. He invited me to utilize my professional expertise to enhance it, making it more enjoyable and intuitive.

frustrating
Dong
realized
Created
update
The Statement

"How can we transform Alchemist into an engaging and user-friendly platform for algorithm and data structure learning and practicing?"

Improvement Process
2 rounds
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.

stakeholder.png

Stakeholder wanted ​

  • A visually appealing and simple website.

  • An attractive way to express algorithm and data structure problems 

Target users are​

  • ​Computer science students

  • ​Developer job seekers

target user green_edited.jpg
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

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

  2. Struggled with solving real-world problems.

  3. Not easy to persist since a vast number of data structure and algorithm problems 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 to start learning, followed an appropriate learning sequence.

  2. Practicing was the key.

  3. Set a structured learning plan.

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

  • Their learning methods

  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.

Why did I need to find out their learning methods?

Understand the methods 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 insights into people's challenges, solutions, and learning approaches when learning and practicing algorithms and data structures, I need to understand 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.

WechatIMG3650.jpg

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

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

Identify the pain points, motivations, and needs of our user base to solve users' struggles and meet their needs.

Assess varying user timeframes or commitment levels. Use this insight to tailor learning plans and refine business strategies around time considerations.

Findings

1

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.

2

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. 

3

30.8% of users wanted to make their learning process more fun and easier, like visualized Sorting is a good example.

4

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

5

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. 

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.

What is 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.

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

1

Lack of consistency

Inconsistencies in pages, titles, and tooltips; The search bar was 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 process.jpg
Analyze
After synthesizing these stickers, I reorganized related notes into groups and examined them. This analysis focused on identifying and summarizing users' struggles, causes behind these struggles, user needs and why these needs, and other insights. 
Alchemist process (1).jpg

Struggles

The list, ranked from the most significant struggle to the least

  1. Difficulty grasping concepts

  2. Struggle with solving real-world problems

  3. limited time for learning

  4. Hard to find the right resource

  5. The learning process is boring

  6. Limited access to seek help

  7. Maintaining motivation is challenging

The Causes Behind the Struggles

The list, associated with the order of Struggles

  1. Abstract and complex concepts

  2. Insufficient conceptual understanding, lack of a bridge between concepts with real scenarios, and ineffective practice

  3. The vastness of problems, limited time, and differing goals

  4. Lack of guidance

User Needs & Why

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

  2. Ample real-world problem examples and solution explanations. 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. Users actively sought good resources to understand the concepts, view solution explanations for building algorithmic thinking, and search for ample examples to enhance their understanding. The efficiency of problem-solving, including time and space considerations, remains critical for users.

  3. Customizable study plan. 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.

  4. Time and task management. Make an effective study.  

  5. Effective help. Receiving effective answers ensures the progression of their learning plan. 

Users' Needs = Users' 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".

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 "learn & play 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.