top of page
3D Abstract Shapes_edited_edited_edited_
3D Shape    _edited_edited_edited.png
3D Sphere _edited_edited_edited_edited.p
only home round corner.png
Untitled 2.gif
WechatIMG3910_edited_edited_edited.png
shadow_edited_edited_edited.png

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

|

Present

Role

​

Volunteer

|

Partner

UX Designer

UI Designer

Practice

 

User-centered Design

User Interface Design

Interaction Design

Design System

Tool

 

ChatGPT

Figma

Asana

Miro

Developer

 

Dong Zhou

website header.jpg
old problem solving gif.gif
What is Alchemist?

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, empathizing with users, 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 frustrating.    

​

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

3d cloud_edited.png
3d cloud_edited.png
depressed person_edited_edited.png
3d cloud_edited.png
3d cloud_edited.png
The Statement

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

Current Experience

Confusing & Inconsistent & Unintuitive & Inefficient

The hamburger menu icon for the filter caused confusion.

No access for searching a specific problem.

Crowded problem

cards caused dizziness.

Users were unsure where to start or what actions to take.

Real-time interactive feedback has helped in understanding algorithms.One of the user stated that "at least 80% help"

Users liked the multi-select feature.

Users had to back to the filter board to edit their selections was Inefficient.

old problem 1.png
old description 1.png

Insufficient information was provided for users to grasp the knowledge and apply concepts to real-world problems.

The interaction was unintuitive, requiring users to engage in extra cognitive effort to accomplish tasks.

Users liked the

clean UI.

Inconsistencies arose due to the lack of titles, tooltips, and other elements on some pages.

inconsistant 1.png

The diagram shows both the primary positive and negative experiences identified through user interviews and usability testing.

Improvement Process
2 rounds
How I Made It?

Principles Go First

Engagement

Making it multisensory and playful to enhance user engagement.

Efficiency

Provide efficient learning and task flow.

Instant Feedback

Important for real-time interactive problem solving.

Clarity

Everything should be easy to understand especially the explanations & instructions.

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.

Ellipse 182_edited.png
target users.png

Target users are​

  • ​Computer science students

  • ​Developer job seekers

Ellipse 182.png
3D Shape    _edited_edited.png
Stakeholder no background_edited.png

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 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 include understanding complex mathematical concepts, solving real-world problems, maintaining persistence, and staying motivated.

What were their solutions?

Effective learning methods discovered were using good resources with clear explanations, following a proper learning sequence, focusing on consistent practice, establishing a structured learning plan, and exploring enjoyable learning styles such as having a study partner.

  • Their learning methods involved finding quality resources, learning algorithms and data structures in a sequential manner beginning with basics, concentrating on one topic at a time, sticking to a single programming language, prioritizing problem-solving efficiency, and engaging in group learning.

Why understand their methods?

Understand the methods they 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 me with information about people's challenges, solutions, and learning approaches when learning and practicing algorithms and data structures, I need to understand the reasons behind them and users' needs. Additionally, the 1st research 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 13 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 for achieving different goals.

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

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

Findings

01​

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.

02​

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. 

03

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

04

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

05

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. 

Users' Needs = Their Real Needs

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

Struggled with solving real-world problems.

The pain points identified in the user interviews aligned with the findings

of the survey and the

1st research.

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

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

01.

Lack of Consistency

Inconsistencies in pages, titles, and tooltips. 

02.

Algorithm page confusion

Unclear algorithm problem-solving process, ambiguous input/output units or contexts, and excessive color usage for interaction changes, categories, and guidance.

03.

Trouble in Navigation

The icons of key features were hidden in submenus or combined, and the absence of a search bar made navigation difficult.

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

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

Struggles

  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

  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 = User 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".

User needs

Why?

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

Ample real-world problem examples and solution explanations.

Customizable study plan.

Time and task management.

Effective help.

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.  Ample examples are essential in comprehending how to apply these concepts to real-world problems.

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.

Make an effective study.

Receiving effective answers ensures the progression of their learning plan. 

Multisensory Learning

Sounds, visualizations, and text work together to enhance the learning experience, making the learning and practicing experience enjoyable and more accessible.

3D Shapes

After discussing the insights with the stakeholder, we opted to reframe the platform's messaging from "learn & practice algorithms and data structures" to "                           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.

Learn & play
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.

Smiling Student Sitting At Desk
Joyce Hou
Computer Science Graduate Student

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.

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

Egagement

Making it multisensory and playful to enhance user engagement

Efficiency

Provide efficient learning and task flow

Instant Feedback

Important for real-time interactive problem solving

Prioritization

Prioritize improvement decisions based on the findings from previous work. Focus on must-have and should-have improvements

Shareable

Problems, solutions, achievement all can be shareable

Minimalism

Prioritize concise and effective features that meet user needs for a clean and streamlined platform

Clarity

Everything should be easy to understand especially the explanations & instructions

Brainstorming

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.

WechatIMG3894.jpg
User Flow

To comprehend the initial experience of users, such as David Jones, who wish to explore Alchemist's algorithm problems before signing up, I created a user flow. This flow illustrates David's navigation through the platform to find a problem to learn and play, guides his decision-making process about signing up, and subsequently assists him in custom a study plan to start learning.

User Flow.jpg
Design
Wireframe
question pool page.png
in.png
Account pages.png
Study plan setting pages.png
Prototype
website header.jpg

More Efficient Navigation

  • Categories for quick access.

  • Organized problem cards for easy browsing.

  • Informative labels on problem cards for fast access to information.

  • Collection and Share icons for convenient saving and sharing.

  • Back-to-top icon for quick navigation.

Smooth Learning Experience

  • Concise Guidance.

  • Real-world application examlples and  scenario problem prompt.

  • Multichannel learning: text, visuals, and videos, with clear interaction.

  • Movable boards.

WechatIMG3905.jpg
website header.jpg
website header.jpg

Easy Sign Up & Sign In

  • Social sign up or sign in.

More Information will come soon!

Prototype
website header.jpg

More Efficient Navigation

  • Categories for quick access.

  • Organized problem cards for easy browsing.

  • Informative labels on problem cards for fast access to information.

  • Collection and Share icons for convenient saving and sharing.

  • Back-to-top icon for quick navigation.

Smooth Learning Experience

  • Concise Guidance.

  • Real-world application examlples and  scenario problem prompt.

  • Multichannel learning: text, visuals, and videos, with clear interaction.

  • Movable boards.

WechatIMG3905.jpg
website header.jpg
website header.jpg

Easy Sign Up & Sign In

  • Social sign up or sign in.

bottom of page