Algoace
A playful exploration into gamification and learning
Visual Design UI & UX Design
Oct - Dec 2024
PetCare Plus Clinic
UX/ UI / Branding
Healthcare
Visual System
Branding
UX Design
Interface Design
Interaction Design
January 2023
Designer Darcy McSwain
Designer Maggie Chu
Designer Ellie Huang
OVERVIEW
01/ PROBLEM FRAMING
Leetcode Homepage
Leetcode Homepage
Leetcode Homepage
Context
Context
Context
Leetcode is one of the most essential tools used by Software Developers to prepare for jobs. Millions rely upon its database of problems and solutions to practice for interviews. And yet, almost every developer will tell you they have a love/hate relationship with the platform, particularly junior developers new to code.
Leetcode is one of the most essential tools used by Software Developers to prepare for jobs. Millions rely upon its database of problems and solutions to practice for interviews. And yet, almost every developer will tell you they have a love/hate relationship with the platform, particularly junior developers new to code.
Leetcode is one of the most essential tools used by Software Developers to prepare for jobs. Millions rely upon its database of problems and solutions to practice for interviews. And yet, almost every developer will tell you they have a love/hate relationship with the platform, particularly junior developers new to code.
Overwhelming Problems
Overwhelming Problems
Overwhelming Problems
In Leetcode, you are given a challenging question regarding a specific “algorithm” in coding (a method of solving a problem).
The problem? Often, young developers have no idea how to solve these questions and simply look at the solutions, which fails to build strong fundamentals or the eye for coding patterns.
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
Lack of Direction
Lack of Direction
Lack of Direction
Leetcode's huge library can be overwhelming to navigate. With no clear path, it's difficult for junior developers to know where to start and what to practice. This can be discouraging and cause inconsistency.
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
No Verbal Practice
No Verbal Practice
No Verbal Practice
Leetcode focuses on strengthening the ability to write code, not verbalize the problem solving behind it. This fails to prepare students for real-life interview questions.
Leetcode focuses on strengthening the ability to write code, not verbalize the problem solving behind it. This fails to prepare students for real-life interview questions.
Leetcode focuses on strengthening the ability to write code, not verbalize the problem solving behind it. This fails to prepare students for real-life interview questions.
02/ DEFINE
Initial Painpoints
Initial Painpoints
Initial Painpoints
After research, our team narrowed down key painpoints and developed design solutions that put our users first.
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
Lack of Consistency — Many users find it difficult to stay consistent and motivated
Steep Learning Curve — With how expansive Leetcode's problem data base is, it can be difficult to navigate learning new topics
No Verbal Practice — Leetcode is aimed towards writing code and as such does not prepare students to verbally communicate their solutions
Design Principles
During our development process, we followed a researched learning model guided by four principles to keep users consistent and efficient in their learning.
Learn by doing — Players are immediately prompted into simple exercises with explainations and hints
Personalize the experience — Personalize the learning journey to boost learners’ growth and long-term knowledge, including AI interview prep
Stay Motivated — Split material into manageable chunks and use positive reinforcement, rewards, and competition to cater to all types of learners
Making it Fun — Prioritize crafting uniquely tailored UX and UI to create a truly gamified and quirky learning app.
03/ FEATURE DEVELOPMENT
03/ FEATURE DEVELOPMENT
03/ FEATURE DEVELOPMENT
Our Solutions
Our Solutions
Our Solutions
Turning our solutions into functional actions, we created four features reminiscent of the console games we played growing up. Inspired by games, optimized for students.
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
Prior to designing, our team was introduced to 3 issues regarding Leetcode and were in charge of navigating these challenges. We tackled Steep Learning Curve, Lack of Consistency, Realistic Verbal Interview Prep
Encouraging Exploration
Encouraging Exploration
Encouraging Exploration
We gamified learning by designing lessons as unlockable 'Planets' in the Algoace universe, motivating learners and fostering a sense of accomplishment and discovery with each milestone.
We gamified learning by designing lessons as unlockable 'Planets' in the Algoace universe, motivating learners and fostering a sense of accomplishment and discovery with each milestone.
We gamified learning by designing lessons as unlockable 'Planets' in the Algoace universe, motivating learners and fostering a sense of accomplishment and discovery with each milestone.
Sparking Engagement
Sparking Engagement
Sparking Engagement
To boost engagement and encourage consistent use, we designed a Community page featuring weekly leaderboards, friend connections, and daily online quests—playable solo, with friends, or competitively.
To boost engagement and encourage consistent use, we designed a Community page featuring weekly leaderboards, friend connections, and daily online quests—playable solo, with friends, or competitively.
To boost engagement and encourage consistent use, we designed a Community page featuring weekly leaderboards, friend connections, and daily online quests—playable solo, with friends, or competitively.
Empowring Users through AI
Empowring Users through AI
Empowring Users through AI
Recognizing the value of real-world simulation, we prioritized creating a feature to strengthen and test verbal communication. An AI interview simulation allows players to test their knowledge, practice communication, and receive actionable feedback from the AI at the end of each session.
Recognizing the value of real-world simulation, we prioritized creating a feature to strengthen and test verbal communication. An AI interview simulation allows players to test their knowledge, practice communication, and receive actionable feedback from the AI at the end of each session.
Recognizing the value of real-world simulation, we prioritized creating a feature to strengthen and test verbal communication. An AI interview simulation allows players to test their knowledge, practice communication, and receive actionable feedback from the AI at the end of each session.
Race to the Top
Race to the Top
Race to the Top
The profile page drew inspiration from games like Pokémon, leveraging the motivating power of Experience Points, Ranks, and Leveling up. We also introduced Achievement badges to reward players for reaching key milestones.
The profile page drew inspiration from games like Pokémon, leveraging the motivating power of Experience Points, Ranks, and Leveling up. We also introduced Achievement badges to reward players for reaching key milestones.
The profile page drew inspiration from games like Pokémon, leveraging the motivating power of Experience Points, Ranks, and Leveling up. We also introduced Achievement badges to reward players for reaching key milestones.
04/ IDEATE
04/ IDEATE
04/ IDEATE
With a tight timeline, our design team swiftly developed mid-fidelity wireframes. A key challenge was integrating the app's many features without sacrificing user experience, balancing the project leads' vision with our design goals to ensure the app remained intuitive and user friendly as it scaled.
With the key features decided and on a tight deadline, we jumped straight into creating mid-fidelity wireframes and went through many stages of iteraction
With the key features decided and on a tight deadline, we jumped straight into creating mid-fidelity wireframes and went through many stages of iteraction
05/ VISUAL
The colors, type, and icons we used to bring the app to life.
The colors, type, and icons we used to bring the app to life.
The colors, type, and icons we used to bring the app to life.
Design System
Design System
Design System
I created the entire brand system for Algoace. I explored and added upon our universe theme, introducing a palette of cool-toned and vibrant pinks and purples, with typography that reinforces our retro-video game inspired theme.
To maintain AlgoAge's futuristic look, we took inspiration from the galaxy, picking an array of vibrant purples, blues, and pinks. However, we wanted to balance this feeling of excitement with stability as well, hence the range of cool tones and muted colors. The typography also echoes that of retroo video games.
To maintain AlgoAge's futuristic look, we took inspiration from the galaxy, picking an array of vibrant purples, blues, and pinks. However, we wanted to balance this feeling of excitement with stability as well, hence the range of cool tones and muted colors. The typography also echoes that of retroo video games.
Brand Elements
The Cherries on Top
The Cherries on Top
In collaboration with our Marketing Team, I created custom graphics to be used throughout the platform, tying the futuristic gamified aesthetic together.
From iconography and illustrations to interaction, we wanted to amplify the gaming experience through galaxy-inspired visual cues.
I spearheaded the creation of custom graphics to bring the app to life and set our educational learning platform apart from competitors.
From iconography and illustrations to interaction, we wanted to amplify the gaming experience through galaxy-inspired visual cues.
I spearheaded the creation of custom graphics to bring the app to life and set our educational learning platform apart from competitors.
Uniquely styled Planets that matcha each lessons color theme
Our avatar library consists of 12 characters (made by our marketing team-member!) for players to use as profile icons
Handmade text boxes to guide players throughout the game and a couple of the many badge icons players will be greeted with as rewards.
Handmade text boxes to guide players throughout the game and a couple of the many badge icons players will be greeted with as rewards.
05/ PROTOTYPES
05/ PROTOTYPES
05/ PROTOTYPES
How the final piece came together
Onboarding
Onboarding
Onboarding
The goal of onboarding is to introduce Algoace's identity. Deep purples, smooth transitions, and twinkling stars greet the user. Players also get to personalize their profiles with avatars and bio descriptions.
The goal of onboarding is to introduce Algoace's identity. Deep purples, smooth transitions, and twinkling stars greet the user. Players also get to personalize their profiles with avatars and bio descriptions.
The goal of onboarding is to introduce Algoace's identity. Deep purples, smooth transitions, and twinkling stars greet the user. Players also get to personalize their profiles with avatars and bio descriptions.
Homepage + Lesson Plan
Homepage + Lesson Plan
Homepage + Lesson Plan
After onboarding, the first thing players see is the Galaxy homepage, featuring all the worlds they can unlock.
Once in the lesson, they can browse problems or take an assessment quiz to skip to the next world.
In the lesson, they'll be taken through multiple choice questions, paired with positive reinforcement, and a results page.
After onboarding, the first thing players see is the Galaxy homepage, featuring all the worlds they can unlock.
Once in the lesson, they can browse problems or take an assessment quiz to skip to the next world.
In the lesson, they'll be taken through multiple choice questions, paired with positive reinforcement, and a results page.
After onboarding, the first thing players see is the Galaxy homepage, featuring all the worlds they can unlock.
Once in the lesson, they can browse problems or take an assessment quiz to skip to the next world.
In the lesson, they'll be taken through multiple choice questions, paired with positive reinforcement, and a results page.
Positive Reinforcement
Positive Reinforcement
Positive Reinforcement
After milestones like completing a lesson or solving a certain amount of problems, players receive awards and achievement badges.
After milestones like completing a lesson or solving a certain amount of problems, players receive awards and achievement badges.
After milestones like completing a lesson or solving a certain amount of problems, players receive awards and achievement badges.
Building Community
Building Community
Building Community
It was essential that there be a community aspect to Algoace to inspire consistency, competitiveness, and connection.
The Leaderboard lets players to gauge their progress and compete against others.
Quests can be used to play with friends or gai extra Experience Points.
Add Friends allows users to build connections
It was essential that there be a community aspect to Algoace to inspire consistency, competitiveness, and connection.
The Leaderboard lets players to gauge their progress and compete against others.
Quests can be used to play with friends or gai extra Experience Points.
Add Friends allows users to build connections
It was essential that there be a community aspect to Algoace to inspire consistency, competitiveness, and connection.
The Leaderboard lets players to gauge their progress and compete against others.
Quests can be used to play with friends or gai extra Experience Points.
Add Friends allows users to build connections
AI Interview Prep
AI Interview Prep
AI Interview Prep
Developing the AI interview feature was the final puzzle piece in crafting an effective interview prep platform.
Players can select from a variety of topics they want the AI interviewer to quiz them on.
Once in the interview, they're given a real-life prompt and must record their answer.
During the session, the interview will continue until the AI is satisfied with the answer or the player decides to exit.
Developing the AI interview feature was the final puzzle piece in crafting an effective interview prep platform.
Players can select from a variety of topics they want the AI interviewer to quiz them on.
Once in the interview, they're given a real-life prompt and must record their answer.
During the session, the interview will continue until the AI is satisfied with the answer or the player decides to exit.
Developing the AI interview feature was the final puzzle piece in crafting an effective interview prep platform.
Players can select from a variety of topics they want the AI interviewer to quiz them on.
Once in the interview, they're given a real-life prompt and must record their answer.
During the session, the interview will continue until the AI is satisfied with the answer or the player decides to exit.
05/ REFLECTION
05/ REFLECTION
05/ REFLECTION
⭐️ Working as a team — As most of my previous design projects were solo-led, this project was a valuable opportunity to hone my leadership skills among younger designers and facilitate strong communication and collaboration across the entire team.
💫 Dev Time!
With a majority of the main flows designed, our developer team is busy coding everything out! The next few months will consist of close collaboration with the developer team and ensuring our designs are properly implemented
💫 Dev Time!
With a majority of the main flows designed, our developer team is busy coding everything out! The next few months will consist of close collaboration with the developer team and ensuring our designs are properly implemented
💫 Fleshing it out — Though we made great progress in just a few months, there's definitely room to build out certain features, add a fresh coat of paint, and make some modern updates.
💫 Dev Time!
With a majority of the main flows designed, our developer team is busy coding everything out! The next few months will consist of close collaboration with the developer team and ensuring our designs are properly implemented
💫 Dev Time!
With a majority of the main flows designed, our developer team is busy coding everything out! The next few months will consist of close collaboration with the developer team and ensuring our designs are properly implemented
🧑💻 Seamless integration — With most main flows designed, our development team is now bringing them to life. Over the next few months, we’ll closely collaborate to ensure seamless implementation of our designs.
💫 Dev Time!
With a majority of the main flows designed, our developer team is busy coding everything out! The next few months will consist of close collaboration with the developer team and ensuring our designs are properly implemented
💫 Dev Time!
With a majority of the main flows designed, our developer team is busy coding everything out! The next few months will consist of close collaboration with the developer team and ensuring our designs are properly implemented