Experiential Sounds
Our multisensory system introduced a wearable vest with haptic motors synchronized to music, enhanced by dynamic visual art. Notably, the real-time biofeedback added a deeply personal touch, revolutionizing the way people consume music.
Time
​
11/2021
|
05/2022
Role
Haptic Developer
Visual Designer
Sound Editor
Programming
Engineering
​
Practice
Sensory Fusion
Interaction Design
Iterative Design
Interactive Art
Biofeedback
Tool
Arduino
Processing
Sonic Visualiser
Audacity
​
Teammate
Lynn Green–
Visual Designer
Wearable Desinger
Programming
Text content
Document


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, 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?"
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.


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 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 thirteen responses that could be systematically analyzed.

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.
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 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; The search bar was not global.
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 finding icons
Key features were hidden in submenus or combined, and the search icon in the hamburger menu made searching 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
.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
-
Difficulty grasping concepts
-
Struggle with solving real-world problems
-
limited time for learning
-
Hard to find the right resource
-
The learning process is boring
-
Limited access to seek help
-
Maintaining motivation is challenging
The causes behind the Struggles
-
Abstract and complex concepts.
-
Insufficient conceptual understanding, lack of a bridge between concepts with real scenarios, and ineffective practice.
-
The vastness of problems, limited time, and differing goals.
-
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.


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

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

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





Prototype


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.



Easy Sign Up & Sign In
-
Social sign up or sign in.
More Information will come soon!