Portfolio Piece

Overview

Free Code Camp is an open source community that offers self-directed courses in web development. As part of a class project, I conducted a usability evaluation to assess the efficiency and ease of use of the site’s “course map” page. A prototype taking user feedback into consideration was then created with Bootstrap.

Project Deliverables

  • User Research
  • Usability Evaluation
  • Bootstrap Prototype

Free Code Camp publishes profiles of real users on their web site. This provided great insight into the motives, frustrations, and goals of the site’s users. Four personas covering the following groups were created: alternative student, tech professional, recent grad, and career changer.

Persona Example
Persona Example

Along with the personas, the hierarchical task analysis and the object analysis aided in the redesign of the map page. When designing a hierarchical task analysis, the starting point is a user goal. As such, mapping out the goal of “learning to code” and the accompanying subtasks helped provide context and an understanding of the user ’s overall interaction with the page.

Hierarchical Task Analysis
Hierarchical Task Analysis

The object analysis was a useful tool in deciding how to maintain the page’s content. Designing an outline of the collections of information allowed each panel to be arranged accordingly.

Object Analysis
Object Analysis

The aim of the usability test was to improve the user experience of Free Code Camp by benchmarking it against the more established Codecademy. Comparing users’ reactions to each website helped determine the advantages and disadvantages of the two designs.

Final suggestions were supported by quantitative and qualitative data that was obtained by administering a questionnaire and a set of timed tasks to volunteer participants.

User Feedback
User Feedback

Insight from the usability evaluation of Free Code Camp revealed several key issues including poor visibility, extraneous information, and lack of feedback. As such, the basis of the redesign was illustrated with evidence from our user tests and design guidelines.

Before Example
Poor Visibility Example

For example, the course listings on the Map page were poorly organized, resulting in excessive scrolling when searching for a course, which frustrated the user. To counter this issue, a potential design solution using cards and bookmark navigation was created using Bootstrap. This prototype could then be used for further user testing.

After Example
Redesign Example