This project has been a part of my Google UX Design Course, therefore I have taken on all the UX / UI roles needed to walk through the steps. My responsibilities were:

• Goal definition

• User research

• Storyboarding

• Wireframing

• Lo-Fi design

• Usability Studies

• Mockups

• Hi-Fi design

For the purpose of this project, I have interviewed several peers who are either employed as programmers or have programming as their hobby, or people who are interested in learning coding in the near future.

The participants have been asked the following set of questions:

• Are you interested in coding and programming? To what extend?

• Do you feel like the resources are easily accessible to you?

• How would you normally like your learning process to go?

• What is an ideal platform to learn coding, according to your opinion?

• Are you satisfied with the way resources are shared online, or would you like to see a different system in place?

During the initial user research, the following pain points have been identified:

Persona examples

Problem statement 1: Stephanie is an eager programming learner who needs a way to learn on the go and without good connection because she travels a lot and often finds herself in remote places.

Problem statement 2: Vince is a business professional who decided to pick up programming as a hobby and needs a clear and concise guidance without the pressure of deadlines because of his busy schedule.

User journey map

A detailed user journey map for Stephanie was sketched out, creating the outline of what the website needs to focus on and how some of its features might improve her everyday life.

During the competitive audit I have mapped two direct competitors and one indirect competitor to gain insight into the industry standard to date, and to get an idea about what is done well and what could be done better. The audit has been done for Codecademy and The Odin Project as the direct competition and GitHub as the indirect competition.

The "crazy eights"

For the ideation phase I have used the "crazy eights" method to come up with various ways of solving the user's pain points.

The "How Might We?"

1) lots of freely accessible content, can be hard to navigate for a beginner

2) not all resources are available offline (especially video tutorials)

3) gamification options during the learning process to increase engagement

4) community-based learning space (reddit - GitHub - Netflix)

5) smart watch app for learning little pieces of code

6) an offline code reader

Information architecture (sitemap)

Paper wireframes

Throughout the wireframing process I have aimed to create a responsive desktop / mobile website that would offer the following:

• Offer an easy way to browse courses and navigate video content

• Be a friendly platform for learners as well as contributors

• Provide an elaborated profile overview

Digital wireframes

Usability study of the lo-fi prototype

2 rounds of usability study have been conducted. The first round using the low-fidelity prototype, the second round using the high-fidelity prototype.

The usability research plan can be viewed here.

Affinity diagram

Mockups

The mockups have been created based on the refined wireframes after the first usability study.

The high-fidelity prototype

The final prototype has been created to offer a smooth and direct user flow with no distractions and clear CTA's and browsing options. The graphics have been created to offer a sufficient contrast for visually impaired users, and the textual hierarchy has been created in such a way so that a screen reader can be used for browsing.

The high-fidelity prototype made with Adobe XD can be viewed here.

I have presented the final feedback to the people I have initially interviewed as the members of the target group. Although they probably weren't sure what to expect, their feedback about the final product has been quite enthusiastic.

The most popular aspects were the social and networking factors, the self-accountability and no-pressure system, and the freedom for everyone to chip in with their piece of knowledge, accessible to anyone, anywhere.

The video content is quite heavy, compared to purely textual documentation as it is usual for programming, which could possibly be an obstacle down the line. However, these things can be adjusted by using cloud servers, compressing the video file sizes and other adjustments.