Code Savvy Redesign
Code Savvy, a non-profit, aimed towards underrepresented groups to help them break into tech, website redesign
Background
Code Savvy is a non-profit organization, based in Minnesota, aimed towards underrepresented groups, such as POC, girls, and students who come from a lower socioeconomic background. The idea for redesigning the website came from a project that was directed by University of Minnesotas UI/UX course. We were asked to find a non-profit to work with, and create a redesign of the website, while also collaborating with the founders of the non-profit, if they would allow it.
During that time, my group had been really considering who we could work with, and who would be more open to having a website redesigned by students? Ian, a teacher of our group, suggested Code Savvy, as it was based in the state we were in and was something he had personally looked into working with, in order to engage more of his students with real life skills. I myself had been taking coding on the side, and was extremely excited for the opportunity to possibly work with Code Savvy.
So that is what we did, we reached out to the founder of Code Savvy, and got in touch with her right away. Through working with Valerie Lockhart, she had opened up about wanting her site to be redesigned and was more than happy to help us create a a great site, to which after our project was done, I had continued to iterate on the design.
Valerie Lockhart
Problem
Code Savvy's is. a non-profit organization designed to increase the number of underrepresented groups in the tech industry. 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.
How might we improve Code Savvy's navigation and visual interface so users are succesful based on program engagement?
Solution and Goals
It was important that as a team, we fix the core issues of the site, while also taking into consideration Valeries input in order to modernize this site. The main goal was to make the site clear and get as much information available to Code Savvy's main audience, so that there would be more engagement overall, while making it easier to understand everything they could offer.
User Research
In order to understand what users had the most problems with, our team conducted in-person user interviews, our main demographic being those who worked in education or had an interest in coding.
We did two different types of testing when we did our interviews, half of the users were given the desktop website, while the other half was given the mobile website to see if there was a change in navigation.
Here is some of the data we collected:
While taking into considerations Valeries input, we designed our User Persona and User story centered around teachers.
We also compared Code savvy to several different competitors, even if they were not directly in coding. Our team wanted a better understanding why more users found these sites easier to use and what seemed more attractive about them to keep up high user engagement.
The competitors we looked at were: Code for Fun, Mimo, Duolingo, and Courageous Conversations.
From this we learned valuable knowledge. Our competitors had a cohesive design with colors that helped lead the users eyes to where they wanted them to the most. Some of them used gamification in order to keep a higher interest, using a fun mascot that would engage with the user themself. There was a consistent use of iconography that simplified the message and information they were sending, in contrast to Code Savvy's usage of real life videos and real pictures. Navigation that was easy to read and not cluttered with too many things causing confusion.
So what could we take from this?
-
De-cluttering the homepage, to make it more clear for users
-
Adding more iconography to give users a better idea of what something stood for
-
Adjusting the colors to be more fun and playful, while also staying in line with the clients brand
-
Create a new navigation system that would be easier for users to go through
-
Making events its own proper section, and redesigning it so the information is more readily available
Prototyping
We created several iterations, testing each with new users in order to see what connected more with users. After 5 different iterations, we came to a design that our team felt tested the best amongst all our interviewee's.
However, our next biggest challenge came from our mobile redesign, we came to a decision that we ended up taking a risk on. We conducted A vs B testing on the mobile navigation.
In our testing we came across this data:
-
100% of users found A Easy to use, and understood how to navigate it easily.
-
1 of 8 did found B too distracting, as it caused some confusion in how to fully navigate
-
Many users were Excited about B, as it gave the mobile prototype a more unique look and made users want to explore more.
We decided to go with B, with the idea that this would help make Code Savvy stand out as a product.
Prototype A
Prototype B
Prototype 1.0
As a team we created both a redesign for the Mobile and Desktop versions of Code Savvy, and we gave our proposal to Valerie, who had very much enjoyed what changes we had made, even going so far to say she would include it in the next redesign.
While as a team we reached our goal, I as a designer decided I wanted to further expand on our research and see if I could simplify and add more to it.
Prototype 2.0
From my own research, I had come to several conclusions that I felt could greatly help Code Savvy and our redesign. By using previous user data, and looking through our clients notes, I used what resources I had to expand on what our team had accomplished.
Several things that I ended up changing were:
-
Fixing the colors, creating a better flow on the webpage so it is not so distracting for the user.
-
Fix the type, and spacing, so there is more breathing room for images/type.
-
Adding a bigger contact form giving all the information needed on it, to make it easier for users to reach someone at Code Savvy.
-
Removing iconography that created spacing issues cluttering up navigation.
-
Adding more pages in order to allow a better idea of the desktop website.
-
Due to the lack of availability and resources when gathering additional user data, I have decided to look back on previous research to pull additional insights that led to many of the changes during these final prototypes.
I worked on expanding and iterating on the most important pages that Code Savvy advertises, in order to give the site itself a little more of a spruce up, along with creating a design that would help lead users eyes through the information.
