Codi is a fictional app for individuals on the go to learn development, designed for users to be able to do lessons anytime, anywhere.
This case study was done as part of the Google UX Design Professional Certificate.
July 2022–August 2022
Personal
Lead Product Designer, UX Researcher
User Research, Wireframing, Product Design, Prototyping, User Testing
Currently existing products focus mainly on teaching web development in a desktop environment, with mobile options offering a more basic experience. There is no app on the market that allows learning web development on mobile with more in-depth lessons.
To design a platform to learn web development that doesn’t compromise on lesson quality on mobile.
How might we teach users web development on their mobile device?
The goal of my user research was to find out what features users find useful when learning web development. One of the top features was a live coding preview, to preview how exactly changes to the code would affect the final product.
Researching the market of users most wanting to learn web development, I was able to find that most users were between 20–40 years old.
I conducted research on other web development education platforms, the main one being Codecademy, to learn what features they all supported to inform my design decisions. As a result of this research, I learned that a live code editor was a must-have feature, as well as a structured course and lesson list to guide learning.
Using this research, I developed personas falling within the target demographics discovered during my research to guide my design.
Jimmy is an architect who needs to learn how to develop for web because he wants to switch careers into a web development role.
“I want to switch into web development”
Analysing Jimmy’s user journey showed how a user that might have a bit more background knowledge looking for a deeper learning experience might interact with the product.
Sarah is a marketer who needs to learn how to develop for web because she needs to make updates to her company’s website.
“I want to pick up some basic web development skills”
Analysing Sarah’s user journey showed a different user background, showing the importance of keeping each lesson light, as not everyone might have previous knowledge of coding principals.
Based on my research, I developed a sitemap to plan out the app structure and guide my wireframes. As the lessons were the main feature of the app, the lessons were prioritised to make getting into them as quick as possible.
Using the Crazy Eights exercise, I started by sketching out some rough ideas for the app with the lesson screen as the focus.
After quickly sketching out some ideas, I chose elements that worked best for the product goal and developed these further to create the initial flow to lead to the lesson screen as quickly as possible.
An interactive prototype was created to test the flow of the app. It can be viewed here.
A usability study was carried out on the initial low fidelity prototype to gather insight about what elements worked and what could be improved. A group of 5 users fitting the Jimmy persona were gathered to help run a usability study on the app prototype. A moderated usability study was conducted to gather more insight in a shorter amount of time and to observe in minute detail how users interacted with the prototype.
Moderated usability study
In-person (Toronto, Canada)
5 participants
5–10 minutes
Results of the usability study were recorded and organised in an affinity map. These results were then further refined into 3 actionable insights:
Participants felt that they were just presented with a list of courses, and with no prior knowledge, they didn’t know what the courses meant.
Participants noted that maybe “Enrol” for the button didn’t make sense, as it was unclear what that action was performing.
Participants didn’t like how the lesson screen worked, with the tabbed layout not making sense as they could just skip the reading and jump into the coding section without understanding the lesson or objective fully.
The results of the usability study showed that having a list of courses with no title didn’t really make sense, so titles were added and sections were created.
Another insight was that with no prior web development experience, users didn't know what any of the sections such as front-end development actually meant. To add clarity, informational icons were added beside the headers to explain what the sections were.
It was also gathered that the Enrolment flow didn’t make sense for users. Originally, the “Enrol” button would enrol the user into the course, then change to a “Start Learning” button after enrolment. As the user was already tapping the “Enrol” button to start the course, this was changed to simply “Start Learning” and skipped the need for an additional button press.
The initial prototype had a lesson screen consisting of two tabs where users could switch between the lesson material and the live coding assignment. The usability test revealed that this meant that the user could skip the lesson reading and switch directly to the coding tab with no knowledge of how to complete the lesson, so the tabs were changed to having the coding window open as a pop up, which could then be minimised to review the lesson materials. A progress bar was also added to help users keep track of their progress in the course.
A live prototype was created to test the updated design. It can be viewed here.
Once the adjustments to the low fidelity design were tested, the high fidelity mockups were created using the low fidelity designs as a base. Colours were chosen from colour schemes typically used in code editing programs to echo the feel of using those programs and minimise the transition between Codi and a desktop code editor.
However, when working on the designs, I received feedback from another designer that they found one of the colour combinations challenging to see. This was due to their red-green colour blindness, which made me realise that I had not yet checked my designs to test with users affected by colour blindness. The designs were then further tested with the designer that pointed this out, and modified to ensure that the two problem colours, the pink and the lighter blue, were never used beside each other. In addition, designs were checked to be accessible with the WCAG standards to ensure this would not be a problem going forward.
Using the mockups, a high fidelity prototype was created to further test and can be viewed here.
The designs were adapted for a web format as well for users to access their lessons without the app installed. Changes were made to the design to accommodate the change in platform.
For the mobile designs, platform-specific elements were swapped for more generally used web assets to ensure the design worked on any type of mobile device. As the app was the main experience, links to download the app were included in the navigation drawer to point users towards downloading the app for a more platform-native experience.
A prototype of the mobile web version was created and can be viewed here.
For the tablet designs, the design was adapted for the larger screen size, making better use of available screen space. The code editor view was also drastically altered, utilising the full screen and no longer needing to switch between a popup view to code.
A prototype of the tablet web version was created and can be viewed here.
The desktop version adapted what was changed for the tablet version to a wider desktop screen.
A prototype of the desktop web version was created and can be viewed here.
Colour choices were checked with the WCAG standards to ensure a minimum of level AA contrast.
Colour choices were checked with colour vision checkers to ensure no elements of the designs were lost as a result of colour blindness.
Headings and content follow the order that a user would expect when browsing the content on the page.
All images were ensured to have alt text.
Pages are not limited to orientation, and can be viewed at any size or on most devices without affecting content or functionality.
Text can be zoomed up to 200% without losing content or functionality.
Participants enjoyed using the app and noted that if it was developed, they would enjoy using it as it solved the problem of studying web development on a mobile device.
This project had a large impact on my process and taught me the importance of testing with a variety of users, especially users affected by accessibility issues. I learned the importance of designing with the WCAG accessibility standards in mind, as without an accessible design, you can unintentionally block a whole group of users from using your designs.
I learned the importance of following platform-specific guidelines, as the initial prototype used a variety of non-platform specific elements, which confused some users. This taught me that adhering to the design standards of a platform can actually affect usability directly, as users accustomed to a certain platform will look for cues that they are used to.