Overview

www.CodeSavvy.org

Code Savvy is non-profit organization in Minnesota whose mission is to interrupt existing gender, racial, and socioeconomic gaps in the technology field by supporting students and educators with technology education.

The Problem

As a team, we observed that Code Savvy's website has usability issues that cause educators and parents to overlook key information, such as upcoming events, registration, and current program information.

The Solution

Redesign the navigation and content on the homepage to improve user experience so educators and parents can easily find key information.

The Impact

Easy of Use: Before redesigning the homepage and primary navegation, only 20% of users choose the right navagation button to match the task (task: asking educators/teachers to find the tab for educators, and parents/students to find the tab for students), after the redesign users had a 98% success rate choosing the correct tab on the homepage.

Research

Competitor Analysis

We began our research with a visual competitor analysis of two direct competitors (for profit coding programs for educators) and two indirect competitors (other educational support companies). The following depicts some of our big takeaways:

Heuristic Evaluation

Our heuristic evaluation highlighted some major heuristic problems on the website. For example, the navigation bar was not responsive, cutting off key menu items depending on the screen size. The Hero space displayed a video with quick cuts and off text overlays that were jarring for the user. Additionally the homepage contained misalignment and white space was oddly placed and alignment was off for several items.

Primary Navegation Bar Not Responsive

Jarring Hero Space Video/Text

Misalignment & Use of White Space

Stakeholder Interview

Within the the first two days of the design process we interviewed the director of Code Savvy - to better understand the stakeholders goals for the website, target audiance, as well as current likes and dislikes. Below are a sample of questions and answers from the interview:

What is the main goal for the website?
Informing users (primarily educators & donors) of programs & events.

What 3 adjectives best describe the brand?
Informative, Acceptable, and Community focused

What is most important on nav bar?Our 3 main programs, about us, and the mission.

What do you like about the current website? Informing users (primarily educators & donors) of programs & events.

What do you want to see in a redesign?
‍Having all our info in one place. Make it cohesive and clear.

Any aesthetics you would like incorporated?
Informing users (primarily educators & donors) of programs & events.

User Interviews & Survey Data

Survey Data

We asked 5 Users a range of questions - including their feelings about representation in tech, thought on students learning coding, in addition to having them try 3 navigations tasks on Code Savvy. Some major findings included:

Users felt upset that many groups were underrepresented in tech.
Users thought there were major benefits to learning coding and technology design systems as a child.
4 out of 5 users had difficulty navigating Code Savvy’s website - and failed to click on a the correct primary links in our test.

Users had difficulty differentiating what primary navigations like “Code Savvy Educate,” “Code Savvy Explore” and “Code Savvy Experience”

User Quotes

“Learning to code opens doors”

“The mobile was frustrating to me to navigate as it took exploring for a while.”

“Couldn’t say what each code savvy name meant.”

Survey Data Backed Up User Testing Findings:

Of Survey Users Were Confused By The Primary Navegation

50%

Affinity Diagram

Definition

User Persona

Using the findings of the stakeholder and user interviews and survey results, I created a user persona to explore some of the major pain points .c would have in trying to attract users who were not domain speculators or blockchain enthusiasts, but who still may be interested in the .c domain extension. In this instance, I created Allison Heath - a freelance website designer.

UX Hypothesis

We believe that changing the navigation labels along with other aspects of the information architecture and visual heuristics will decrease confusion from educators, students, and potential donors that visit CodeSavvy.org and therefore will increase user engagement on this site as well as number of students enrolled in a coding program and donations made.

Value Proposition

Code Savvy’s mission and programming have the ability to make a powerful impact on our community. By redesigning the user interface for Code Savvy’s website we believe we can create a more user-friendly website encouraging more people to get involved with all the wonderful tools Code Savvy has to offer.

Story Board

Elizabeth Wants Her Students to Learn Coding

Online She Finds www.codesavvy.org

She Quickly Finds Resources She Hoped For

Success! She can’t Wait to Get Back to Her Classroom with Code Savvy’s Resources!

User Flow

Information Architecture

We started as Information Architects crafting a new navigation system - since our users like Elizabeth struggled to find what she needed at times. In this process, we had 4 users card sort 29 Code Savvy Links into 5 or 6 categories and name these categories. Users did this fairly consistently, giving us 5 categories plus a donate button. This also helped us to name our categories, giving us our site map.

Site Map

Ideation

Mood Board

To find inspiration for a new user interface - we created a mood board in Figma. Pulling from our competitors and other inspiration, we found fun, innovative, informative, acceptable, and community-focused (per our stakeholder) inspiration.

Style Guide

We updated the color palette, keeping the primary color purple but changing the hues to be brighter, signifying a more fun and community-based educational experience.

We updated the logo with our new color palette.

We updated the buttons with our new colors, using teal as an accent color to make the website’s call-to-action links stand out.

Prototyping

New Navigation & User Testing

As we made some big adjustments to the primary navigation, as soon as we had a navigation prototype we got it in front of users to see if they knew where to go - and they did! For example, when asked to go where a principal might go - they went straight to the “for teachers” link; when asked where to go as parents they went straight to the “for students” link.

Low to High Fidelity

We began our prototype with sketches, then moved onto low, mid and eventually high fidelity prototypes.

User Testing

As we were designing for Responsive Web Design, we focused our initial designs on mobile, while also keeping desktop in mind (pictured above). During our mobile first approach, I developed two navigation systems specific for mobile:
A: A more standard upper right corner hamburger menu button (left)
B: A more unique and innovative bottom, center menu button (right)

A/B User Testing

We conducted A/B user testing with 8 Users to see what direction we should take. We found:

100% of users found A easy to use
1 out 8 users found B too distractingBUT...
Many users were really excited about B, while No users were excited about A

So... What Did We Do?
(hover or press below to find out)

Option B!

Iterations After Testing

We took a risk with option B, but we knew some changes had to be made to make it work for more users, while still keeping it exciting for users.

We decreased the glow to make it less distracting.
We tried off to the side but it didn’t look right given the symmetry of the page.
We switched the placement of the X to replace the menu, making it easier on the thumb when holding a phone.
I also then took the lead for figuring out how to bring the essence of this menu back to our desktop prototype, giving us our final prototypes.

Final Prototype

Link to Clickable Prototype in Figma

Reflection

We presented our case study to the stakeholder - wholoved the presenation and dsign, and planned to bring our design to her board of directors and incorporate aspects of it into aredesign. She was sold right away on the navegation redesign - this being one of the primary reasons users found the site easier to navegate. She also liked the areas where we simplified, or added new content to the home page like testimonials. She liked going for the innovative button, and she liked the revised calandar view. Her one concern was weather the calandar interface we created could populate automatically from her calandar services, as her current google calangder month view does. She did agree that this view would be better for highlighting what each event was, and given they only have 4-5 events amonth a month view calandar just seemed to take up space without providing useful informaiton.

Next Steps

More User Tests: Because this button represented a deviation from normal heuristics for a website, we would want to do a LOT of user testing.Get Stakeholder Feedback & Iterate.

Finish Building Out Secondary Pages & Tablet View

Create a Fun Mascot: Many direct and indirect competitors had mascots, and we thought this would add some “fun” and increase engagement.
‍
Can Our Calandar View Populate Automatically? Figure out for theStake Hodler if a calandar view like the one we created can populate automatically.

CodeSavvy.org

Project: Responsive Website Redesign for The Non-Profit Code Savvy with a Team of 4 Student UX Designers in An Agile Setting.

Design Role

Deliverables

Tools