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 stakeholders were satisfied with my service and the final design. The design was accepted and is currently being developed.
"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
To help me think from a user’s perspective, I created two user scenarios featuring two primary use cases of the site.
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.
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.
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.
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.
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.
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.
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.