Overview

I created a website called Codeably using Adobe XD. It helps users learn programming languages.

The Problem

Learners couldn't find beginner-friendly coding tutorials easily. My goal is to offer coding tutorials that are perfect for beginners and effortless to discover.

Research + Discovery

To understand the product's pain points, I used observational research to create a user journey. This helped me spot when users felt frustrated while learning a new programming language and find areas for improvement.

Developing a persona helped me grasp users' learning goals and potential challenges. For instance, Mira struggles to find beginner tutorials. The problem statement is: "Mia Lillis, a high school junior, needs beginner coding tutorials to enhance her coding skills."

My aim was to keep the website simple, so users can navigate easily. I included essential pages like a search bar, profile page, coding videos, and helpful information. This sitemap helped me organize the overall website layout.

Wireframes

After understanding users' pain points and creating a sitemap, I began designing my website with paper wireframes. For the homepage, I included responsive designs, such as a tablet, computer, and mobile app. For my digital wireframes, I opted for Adobe XD as it offered a user-friendly experience with its minimalistic design and straightforward tools. The digital browsing wireframe is designed to help users discover coding tutorials that interest them. Additionally, I incorporated filters for browsing, allowing users to easily find the tutorials they want.

Usability Study

I conducted a moderated usability study with this prototype. I found 3 fundamental findings from my 5 participants:

Final Designs

After conducting my usability study, I made improvements to the browsing page in my high-fidelity prototype. I introduced a rating tab in the filter section and beneath the videos. This new rating feature allows users to assess the helpfulness of coding tutorials.

To enhance accessibility, I made the following changes:
- Added a footer at the bottom of the website, providing more information and easy navigation to other pages.
- Included a language change button on the navigation bar to accommodate users who prefer languages other than English.
- Utilized bold headings to help users quickly identify essential content on the site."

Takeaways

I became more comfortable with Adobe XD and learned about sizing variations. Additionally, I gained valuable insights into users' needs when learning a new programming language. My next plan is to conduct more rounds of usability studies to further enhance my design. I'm also working on adding more screens to my wireframes, allowing users to watch actual videos from the prototype.