I spent the last two years of my life building Byte Avenue. In this page, I will dive deep into
Designing Byte Avenue’s MVP
The team was previously building CodePark. I worked there as a UI/UX Designer. It is a social platform for competitive coders to ask questions, share code and learn from each other. Unfortunately, we had to shut it down. My journey at CodePark and why we shut it down are not in the scope of this case study, but if you’re interested to read about it, click here.
Founding Member & Product Designer
June 2020 - Present
0 → 1 is always a long journey, so grab a bucket of popcorn 🍿
Meet the users 👋
We reached out to CodePark users to understand their learning journeys and patterns. We could identify and generalize their needs, pain points, motivations & goals.
These users weren’t time-rich or money-rich to invest a lot into a bootcamp. They preferred to learn from self-paced courses because most of them were affordable. They also had a very tiring college schedule.
Their pain points 😓
Out of all the problems that they were facing in their learning journey, I will unfold the ones that we believed are the most important to solve.
“I don't know what to do when stuck”
When learners hit a blocker while solving a question (On other platforms), they could not guide themselves to the solution. They needed help in the form of hints or solutions to move forward. This trend of seeking generalized help did not improve their skills over time. The learners' growth depended only on their consistency and efforts. Hints/solutions hardly contributed to it. The problem with hints was that they were the same to everyone irrespective of how they performed in solving the question so far. Solutions couldn't help either because in most cases, they did not guide the learner to think in different ways. It was just the final code.
We believed this problem added a lot of friction to the learning journey and is the source of demotivation. The learners are already at a tipping point due to slow or no progress at a critical stage of the learning process. This situation amplifies minor inconveniences until solved.
“I feel confused about what to learn”
The learners are looking for a structured path. It is something that most learning platforms offer. We need to conduct a competitive audit to discover why this is still a recurring pain point among many learners. It is one of the building blocks of a learning platform. It has to be more than just good.
“I don't know how much to learn”
Some learners expressed that they feel a void in the knowledge they acquire from the courses they do and the questions they solve. They feel that the courses they take do not have enough questions to reach a great skill level and when they head to other practice platforms to fill that gap, they almost have infinite questions to solve. They don't know what is sufficient in each topic they learn.
Now that we understood their pain points, we proceeded to ideate solutions for them.
Possible solutions ⚒️
We brainstormed to get possible solutions to the pain points we picked up. We built an Impact-Effort matrix to identify the best feasible ideas and began our journey in building Byte Avenue!
Laying the bricks 🧱
The ed-tech space (Programming/coding space) is quite populated and there are a lot of standardized features that a learner might expect from our platform. Re-inventing the wheel might lead us to throw a lot of time down the drain. We took off with a competitive analysis to identify best practices and understand why they aren’t working out for the students we spoke with.
Translating the shortcomings of other platforms to user needs:
“I want a roadmap of concepts to learn from”
Contrary to the common practice of making a list of topics that look like the index of a textbook, we built a roadmap that was less intimidating and more approachable. Upon testing this with focus groups, we discovered that they found this depiction of the roadmap helpful.
This was the V0 of our roadmap, which changed overtime as our requirements changed.
“I want a focused and distraction-free environment at the time of solving questions”
Every product has its own goals. We observed that other platforms allowed/encouraged navigating to other parts of the platform, which may hinder the learner’s focus at the time of coding. We wanted to get rid of that distraction to aid focus.
“I want personalised hints”
This was a tech-heavy solution and I won’t be getting into the details of it. We designed and built a one-way communication to trigger hints depending on the code that the learners have submitted. I worked on the copy for the messages as well.
This is how they evolved over time.
Making courses (educational content) was a time taking process. We had to temporarily adjust the platform to function more like a practice platform (more questions and few educational resources) to test the parts of the product that we could build till then.
Designing the learning experience 🪄
We built and tested a practice platform containing just one subject, Data Structured & Algorithms. Until now, it is nowhere near what we intend to build because we want to build different courses to cater to learners with different requirements. During this duration, our research and content teams have prepared our teaching philosophy and the V0 of our educational content, which dictate a lot of our design decisions from now on. Let’s have a look at some of them,
A learning journey must be broken down into smaller portions and upon completing each one, the learner must experience a sense of accomplishment. It can either be in the form of a milestone or a reward.
A learner, at all stages of the journey, must be aware of their progress and have an idea about what is ahead of them.
Educational content must be broken down into the smallest consumable bits to retain the knowledge more easily.
A learner should have the opportunity to learn by doing.
What you’re seeing here was the last stage of the MVP in the beta testing phase. This solution was not a one-shot. We arrived at this outcome after building, rejecting, and innovating tons of features! Our early testers (learners on the platform) always had one hand on the steering wheel in this journey. We decided to take off when they were happy with what they were experiencing 💝
Launching a product demands a more holistic output. We then designed other screens like course catalog, subscription experience, checkout experience, etc.
Behind the scenes 📽️
About three notebooks worth of research & wireframes, four iterations of the product, thousands of conversations with learners, infinite connections in Figma files, and a lot more! 🥳
Other tricks from the hat 🎩
I designed an internal CMS tool to build and publish programming courses for our product. I designed the logo, design system, website, and did a little bit of motion design as well. It’s always fun to try something new! 🔮