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

Methods:

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

Tool:  Figma

Developer:  Dong Zhou

Practices: 

Interaction Design, Design System

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

"How can we transform Alchemist into an engaging and user-friendly platform for algorithm and data structure learning and practicing?"
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.

Through discussions with the stakeholder, I discovered 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 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.

  • 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 use. This approach ensured that the project addressed its broad users' real-world needs and experiences.

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. 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 designing a more easy learning pathway.

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.

4

1

2

3

5

6

Findings

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.

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. 

One user emphasized that additional examples and step-by-step explanations could significantly enhance the learning experience.

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

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

Nothing beats practice. Almost every participants emphasized the importance of practicing.

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 (4).jpg
Analyze

After synthesizing these stickers, I reorganized related notes into groups and examined them. This analysis focused on identifying and summarizing users' motivations, struggles, causes behind these struggles, user needs and why these needs, and other insights. 

Alchemist diagram (5).jpg

Motivations 

Users' primary motivations for learning and practicing algorithms and data structures are to secure a job (61.5%) or improve problem-solving skills (23.1%).

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. A good resource. Many users believe that a step-by-step explanation of concepts can help understand and eliminate the complexity. Besides this kind of explanation, an ideal resource should also organize topics logically, provide multiple programming languages (for beginners, it's recommended to start with one language), and encourage focused learning on a single topic and its related themes to enhance learning efficiency. Such learning resource caters to learners of all levels, especially beginners.

  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 the algorithmic thinking, and search for ample examples to enhance their understanding. The efficiency of problem-solving, including time and space considerations, remains a critical factor for users.

  3. Time and task management. Creating a practical plan for learning and practice, managing time and tasks effectively.  

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

Some users stated that 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.
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.

Motivation

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

Needs

  • A step-by-step explanation.

  • The updated questions of companies.

  • Engough real scenario examples.

  • Access to find help.

  • Time & tasks management.

Smiling Student Sitting At Desk
Joyce Hou
Computer Science Graduate Student

Pain Points

  • Struggle with applying algorithms in real-life problems.

  • Difficult to grasp the concepts.

  • Hard to find the right resources.

  • Boring and dry experience.

  • Difficult to stay motivated.

  • Too many questions to learn.

Goals ​

  • Practice easy-level algorithms next year.

Algorithm Level
Easy

Wants

  • A funny and easier learning and practicing method.

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.

Alchemist diagram (1).jpg
Man with Striped T-shirt
Ideate
Improvement Principles

ENGAGEMENT

Multisensory and playful to increase users' engagement

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.

Instant Feedback

Important for real-time interactive problem solving.

Clarity

Easy to grasp the concepts

Shareable

Problems, solutions, achievement all can be sahreable.
Brainstorm

start with the problem statement, surrounded with users' struggles and needs, wants, and stakeholder's requirements. I wrote down as much as I could and connected the two related elements to find out the most important and possible solutions

Alchemist diagram (7).jpg
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.

WechatIMG3662.jpg
User Flow
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