Deep dive into StackBased
Date
Location
Team
Role
Apr 2022 – June 2022
Human-Computer Interaction -UW CSE 440
Justin Trinh, Dylan Bunarto, Efrain M. Lona, Wei S. Aw
UX Designer, UX Research
The problem
Tech layoffs continue to rise even though there is a growing demand for tech talent. According to US labor statistics, the shortage of tech engineers in the US will exceed 1.2 million by 2026. Grads and tech students often have trouble with the interview process that requires the interviewee to solve intensive coding problems under a time limit. As tech layoffs increase, interviews remain competitive.
Brief
I was asked to design an app similar to Leetcode, however, with a more structured algorithmic approach to each individual. Through our user surveys, we found that students don’t know what coding problems to practice and thus have trouble staying motivated. It improves upon existing designs by focusing on tracking and utilizing data on problems solved and integrating other information and lists from outside sources.
Our approach
We chose to redesign the mainstream way students study for interviews. Interview processes for tech often require intensive coding problems under a time limit. Since the technical side of interviews are an important step in determining the coding abilities of an applicant, we aimed at improving online resources for coding practice.
Many students opt to use online resources to practice coding problems before an interview, however StackBased is the first to offer: personalized progression through weak and important topics, and a dual modality allowing for both practice on-the-go and a web based application for more thorough coding problems.
Conducting Interviews 👥🎙️
To gain familiarity with users and their interview preparation process, strengths and weaknesses, we met with 3 students at the UW all with recent experience searching for internships.
Interview Topics 💬
Who are they? How much coding and Internship hunt experience?
What would they do differently when preparing for next interview?
When they usually start preparing. Also how often and how much?
Where they prepare for coding interviews. Popular resources?
Why they use their particular resource?
How effective resources are and what can be improved?
Alex
2nd-year Computer Science student at UW who has acquired a technical internship for the summer of 2022. He has been coding since 6th grade, around 9 years. The resources they used were Leetcode Premium and Educative.io.
Spent around 3-4 hours in one sitting practicing. Would try to start before internship season, but would ramp up when getting actual interviews. Wished they started earlier & on stricter practice schedule.
Paul
2nd-year Computer Science student at UW. “Paul” has acquired an internship offer for this summer, and has been coding since 4th or 5th grade. The existing coding resources he used were Leetcode Premium, Codesignal, Cracking the Coding Interview, and Youtube.
Existing resources provide the right topics. Practiced consistently, 1-2 hours daily and never felt burnt out. If they were to repeat the process they wished they started earlier.
Jen
3rd-year Informatics student at UW. Participant 3 with an internship offer this summer. Been coding since 12th grade. Existing coding resources they used were Leetcode, Cracking the Coding Interview, and Youtube.
Self-tracked progress on Excel. Burnt out and gave up tracking. Starts practicing right before applying to internships, 1-2 hour sessions when cramming, 45-minute sessions otherwise. Would have definitely started earlier.
Main Takeaways
- Resources with explained solutions are most helpful, not so much without.
- They progressed through lists of popular problems/topics online, or word of mouth.
- Progression through self-tracking causes burn-out.
- Also leads to focusing on less helpful to learn topics since everyone is at varying levels.
- Often would cram, i.e. not practice until right before an interview
- If they were to redo the process, would practice earlier
- If they were to redo the process, would adhere to stricter schedule
Competitive Analysis 🤺
Finding out the why popular resources, including LeetCode, Blind 75, HackerRank, Binary Search, and Youtube, could cause burn out.
- Web-based existing resources takes lots of time and energy to learn.
- The most popular resources do not provide structured progression.
- Rather they recommend problems chronologically, so users have to guess.
- They also require you to sit at a desktop for hours each interaction.
- Boring layout and easy to feel burn out.
- Full explanations and thought process for each question not always provided.
Defining Features
Code with Friends
A web application that hosts live sessions where parties can work together to solve a coding problem. Enabling live chat and allowing participants to partake in collaborative coding can aid in learning. Along with full explanations and recommendations for problems.
Structured Progression
On a web application. Imports lists of problems from resources like LeetCode, however this application reccomends next problems based off the user’s experience in each category (using metrics like confidence ratings, problems solved, and most important topics).
Learning on the go
Using a Tamogatchi-like device to practice quick multiple choice coding problems. Keeps track of a pet that is in better health when user practices on a consistent basis (takes care of pet frequently).
Combining 3 ideas into 1
We then sketched the first paper prototype to be used in early stages of usability testing. Our solution is a Web and Mobile App that takes the most important features.
- Learning On The Go 📱
- Recommendations of topics for Progression🧱
- Understand challenging problems 🤔
Tasks
Learning on the Go 📱
All of our participants noted that they would ideally want to have started preparing sooner than they have in the past. Our users have often prepared for interviews in bursts, meaning they would only start when they had a technical interview coming up. The spacing effect is more desirable for learning.
Recommendations of topics for Progression🧱
All participants progressed based on recommendations from friends and the internet. This often has some undesired results as it often leads to them focusing on those topics while ignoring everything else. Current resources do not provide enough structure for tracked progression, which we learned is important to balance between various topics of importance.
All participants stated that there were several times in which they had difficulty understanding provided solutions. Certain resources lack thorough solutions and thought processes for every step, crucial to learning algorithms. Our solution tracks and recommends next problems for you.
Refine
5 Usability Tests to Refine the Paper Prototype
We needed to identify crucial usability issues. We conducted 5 usability tests with 10 undergraduates majoring in computer science at the UW using our sketched paper prototype. Under evaluation of 3 design critics, we performed a screening using Nielson’s set of 10 Usability Heuristics.
Participants
Our usability tests were conducted with 10 University of Washington students 20-24 years old who are pursuing a Computer Science degree, as well as 3 faculty members aged 25-42. We chose people with moderate to strong levels of familiarity with interview preparation. We performed the usability test at Bill & Melinda Gates Center for Computer Science & Engineering or CSE2 since it is a space where people are more focused and likely to be doing technical interview preparation.
Tasks for users to perform on prototype
For the usability study, we compiled a list of tasks, which we asked the participants to perform from our application. We had one individual read the script and tasks to the participant, while another individual was responsible for performing the necessary “wizard of oz” tasks to the participant. The other two individuals in our group took notes during the process. The participant was asked to think aloud while walking through the tasks which included:
Web Instructions
- Navigate to recommended coding problem, Two Sum.
- Work through the coding problem and run your solution.
- Rate your confidence level and submit.
- Go to the scheduler.
- Schedule an event to work on two sum from 10-11 AM Tuesday.
Mobile Instructions
- Select Strings as the topic then click begin.
- Solve the multiple-choice question.
- Rate your self-confidence after doing the multiple-choice.
- Go to the next problem.
- Return to the practice menu.
- Return to the home page.
- Navigate to the problems done today.
What We Learned From Testing
- “I was frustrated with the amount of information, it was intimidating and too much to process at once”
- There needs to be a way to navigate to review problems quickly, right from the home screen.
- Confusion on “new” and “continue” sessions, would be worth exploring a list of past problems instead.
- Terminology and components need to be up to industry standard for time-efficient use.
Fixing Key Usability Issues ⚠
Improving Cluttered Menu
A cluttered and disorganized problem menu violates the heuristic of aesthetic and minimalist design because it makes it difficult to properly work through questions at a timely pace.
Giving Users a Way to Access Problem History
Usability tests revealed that the app lacked the ability to review problems completed. Users wanted a way to access past problems to grasp difficult concepts.
Making Terminology and Navigation Clearer
In our heuristic evaluations, one group noted the confusion between “Recommended” and the “Problems” menu while everything else matched in terms of identifiers. Confusing titles that are not consistent with standard labeling make it difficult to identify the purpose of certain tasks at the home interface.
Including Video Explanations to be Inclusive Across Different Learning Styles
One revision we made to promote inclusivity in our design was through a feature on the web app that if someone is stuck on a problem, we would link a video that explains the problem and promote solutions from minorities in tech, to have representation within our app.
Making the Scheduler Consistent with Industy Standard
Our initial design of the scheduler was not consistent with other calendars.
Review Page – Improving the Scroll Bar
After testing I added a scroll bar so that the user can search through individual problem names or topics faster. I then updated the page altogether to be a popup for improved usability.
Deliver
Before Feedback
Constant Reiteration
Quick Start for Fast Practice
Our usability tests noted a critical issue. Too many clicks to start a problem.
Adding a quick start button for fast review was essential to help with time management for our users.
Tracking Confidence and Problems for Best Recommendations📈
Previously, our users would practice topics from a random list. Submitting confidence level after each problem is crucial to our algorithm to recommend topics to practice next, so our users can progress through the topics more efficiently for their interview.
Get a closer look at code
Coding resources for interview preparation are limited to find for mobile devices so we had to think about how to make a code window for web fit on mobile. We made the code expansive to save space, while expanding allows for larger coding problems. These crucial improvements in usability made using the app to practice much more faster and easier to use.
Updating the Calendar to Industry Standard
Because Google Calendar and other calendars already exist, we wanted to have a scheduler that adds onto Google Calendar by automatically adding events and scheduling a plan for the week vs just another calendar for the user to keep track of.
