Codify
About the Product
Codify is a coding learning platform with the aim to make the coding journey accessible worldwide with published articles, videos, and courses available in multiple languages.
I worked on this project between June 2023 and July 2023 as part of the Google UX Design Professional certificate. The goal for this project to complete the UX design process for a responsive website, taking into account different device and screen sizes.
The Goal
Many coding website don’t have great accessibility and language options, usually offering courses, videos, and articles in a single language and minimal accessibility settings.
My goal was to create a website where you can easily browse and search for courses, videos, and articles in different languages while being able to track your learning progress.
This project would be my first design project that used Adobe XD as the primary design software. One of my main focuses throughout the project was the learn how to use the tools provided effectively and understand how they differ from other platforms like Figma.
My Role
I acted as the Lead UX Designer and UX Researcher for Codify for this project.
My responsibilites included:
- Conducting User Research
- Planning Site Architecture.
- Drafting Wireframes
- Creating Prototypes
- Conducting Usability Studies
The User
In order to better understand our users, I completed a set of user interviews, where I gained valuable insights that I used to create empathy maps. Through this research, I was able to identify the goal of our target users, in addition to some of their needs. Many users want to be able to learn how to code, but were frustrated as they struggled to find free coding tutorials or courses available in their language. Additionally, many existing websites lack in searchability and discoverability for tutorials of specific topics, difficulty, and language. Users want to be able to focus on learning, rather than stressing about finding what they want to learn.
Challenges and Constraints
The biggest challenge I faced was figuring out how to include the accessibility features without being too intrusive to the general user flow, while also being able to make them easily discoverable by the user.
This was also my first time using Adobe XD as a design tool, so I had to take some time learning about the different nuances in navigating the software.
Research Study
From my research, I was able to identify three main user pain points that users experienced while following coding tutorials online:
- Language — Significant lack of options for tutorials and courses offered beyond of English language.
- Discoverability — Poor searching and filtering features make it harder to find the desired tutorials by difficulty, subject, or language.
- Learning Experience — Independent online learning can sometimes feel impersonal leading to decreased motivation and engagement.
Design Concepts
I used the How Might We and Crazy Eights exercises to to ideate some design solutions before starting on my initial wireframes.
Sketches and Wireframes
After completing the initial ideation phase, I made paper wireframes for each of the primary screens needed in the main user flow.
I also completed paper wireframes for different screen size variations.
User Testing
To gain further insights into my designs, I conducted a usability study using the low-fidelity prototype.
Here's what I found:
- Users need to be able to access accessibility and other settings preferences on every page.
- Users want more filtering and search options to help narrow down their search results.
- Different elements on card components should bring users to different resources.
Mockups
After receiving great info from the usability study and generating insights, I made adjustments to some of the article and video components and the way information was displayed, and added additional navigation options.
Additionally, I modified the way that courses are displayed so that they are more consistent and display more information for the user. I also modified the tag system to make it more scalable in the future.
The high-fidelity prototype can be found here.
Responsive Designs
The responsive phone versions for several screens can be found below. In lieue of a top navigation bar, pages can be accessed through a pop out menu by pressing the hamburger menu.
Accessibility Considerations
Accessibility was the key focus for this project. Here's a few ways accessibility was taken into account in my designs:
- Language — Making our coding tutorials accessible worldwide was a massive priority. Adding in language preferences and search filters will make it so that many people will be able to learn through our platform.
- Audio and Closed Captioning — Making sure that videos have audio transcriptions and closed captioning capabilities ensures that those with hearing impairments are still able to use these resources to help them learn.
- Consistency and Clarity — Using clear headings and labels to denote sections throughout the page to make it clear to screen readers the hierarchy of content on each page.
Impact
Codify will help make coding more accessible around the world for those who speak different languages.What I Learned
While working on this project, I learned how important accessibility is to make a universally great user experience, and how vital navigation is to make a cohesive design for a website.
I found it really fun learning how to use a new tool like Adobe XD. Prior to the certificate course, I already had experience using Figma. However, this was my first introduction to Adobe XD. It was interesting to see the differences between the two platforms and what kind of things are possible on each.
Next Steps
After reflecting on the work I completed during this project, some of the next steps I would like to complete are:
- Conduct more testing into the language options and other accessibility features throughout the website.
- Include more community features such as forums, discussion sections, or messaging.
- Experiment with more extensive searching functions and including more specific topic pages.