CoderDojo NYC Website Redesign

CoderDojo NYC is a non-profit organization hosting free Science, Technology, Engineering, Art and Math (STEAM) workshops for youth aged 7-17. I was thrilled, as a volunteer designer, to help them redesign their website.

The Problem

  • In the original CoderDojo NYC website, the sign-up flow was convoluted and not clearly explained. Confused users would then send emails to CoderDojo NYC asking questions or request to sign up for the next workshop. These emails became overwhelming for the organization to respond.

The Solution

  • I aimed to improve two fundamental aspects of the site: content discoverability and the visual display of important information.

The Goal

  • Refresh the website's visual style.
  • Improve site’s information architecture and usability to reduce user confusion.

The Result

The stakeholders were satisfied with my service and the final design. The design was accepted and is currently being developed.

Before vs. After

CoderDojo website screenshot before the redesign The final design I provided

"Ran is fantastic to work with, she was able to analyze how to best optimize our UI and transform our non-profit website into a beautiful, clean and user-friendly experience. Anyone would be lucky to work with her!"

-- Rebecca Garcia, co-founder of CoderDojo NYC

Process

Scenario

To help me think from a user’s perspective, I created two user scenarios featuring two primary use cases of the site.

User Scenarios

Information Architecture

I started by creating a content inventory of all the information Coderdojo presented at their current website. Then I set up an online card sorting project using Optimal Workshop. I recruited 11 participants. Two of them abandoned the cardsort mid-session but I included some of their data in my result analysis. I analyzed the results using the Similarity Matrix and Dendrograms provided by Optimal Workshop.

Based on the data, I designed the new global navigation.

I also reorganized the site content into a new sitemap.

Ideation

After buttoning down the Information Architecture, I started sketching and wireframing. I started with quick and messy sketches to generate as many ideas as possible. After I got something I really liked, I started to sketch with more detail.

Mid-fi Mockups

I fleshed out a few key pages and created mid-fi mockups to gather input from the stakeholders.

Then I consolidated the feedback from my client and finalized the visual design after a few more iterations.

Final Design

Sample Illustrations

Design Details

Page for each targeted user

In the global navigation bar of the new design, I dedicated the first two spots for parents and volunteers. In each page, I've included all the information for each user group in their corresponding page. So once they get to the page, they are able to find everything they need to know.

Better illustrated process

I've tried a few different ways to show the process on the website. I ended up using a series of custom-made icons to visualize the steps they would take. Along with text explanation (both titles and microcopy), the process becomes very easy to understand.

Adding FAQs to the Contact Us page

The stakeholders had expressed to me multiple times that people will email and ask the same questions over and over again. I decided to add a list of such questions on top of the contact form. That is, the user needs to go through this list of questions before they can submit a question to the organization. However, I couldn't test and verify this design decision just yet. Once the site is published, we can then monitor the number of emails we got and I can tweak the design if needed.

Summary

The Coderdojo project is a story of solving a real world problem with design. Hopefully the redesign is helpful in terms of explaining key information clearly for both parents and volunteers. I had a great time with the card sorting and making illustrations. The website is currently being build by the organization.