Code Your Dreams
Redesigning the landing homepage for a non-profit teaching Chicago youth to code
Context
Code Your Dreams is a 501(c)3 non-profit based in Chicago, Illinois on a mission to establish the next generation of innovators and disruptors by empowering youth to solve their community’s problems through code. I was tasked with redesigning their landing homepage in a one-week sprint.
Problem
Their existing landing homepage has a lot of great information including images and videos of real students to lend credibility but they have limited resources. They needed a UX/UI designer to improve the information architecture, visual hierarchy, and visual design and make it easier to navigate and use for donors and volunteers.
Role
Sole UX/UI Designer
Time Frame
1 week
Competitive Analysis
While there are plenty of competitors in this space, Black Girls Code and Kode with Klossy stood out as the two main competitors. I evaluated the pros and cons of those two main competitors along with conducting UI audits of their websites.
While Black Girls Code didn’t have the most refined visual design, I found their website to be credible. I can confidently say that as both a UX designer and a user as I have personally donated to this organization in the past. The website has photos of real kids, data, and endless links if the user wants to learn more which adds to their credibility.
Credits: https://www.blackgirlscode.com/
The Kode with Klossy website on the other hand had a very professional and clean website. In particular, I was really drawn to all of the pictures and images of students and the founder that lend credibility. Although this message from a founder was probably included due to her supermodel status, I thought it would be impactful to add a face behind the name for Code Your Dreams.
Credits: https://www.kodewithklossy.com/
The use of data in an appealing, easy to read format is something that Code Your Dreams is missing and could add a lot of value to the homepage.
User Feedback
I received user feedback from a cohort of 15 participants to gain an understanding of what was working and what needed to be improved upon for future iterations of the landing page. Demographics were as follows:
Ages 21-45
8 males, 7 females
Located in the U.S.
Style Tile
I created a style tile to have quick references to inspiration from competitors, key reusable components, typography, and iconography to maintain uniformity while designing.
I added a muted blue color into the color palette as a primary color to elevate the branding and make it more gender neutral. I used the bright blue and pink as accent colors instead.
The final redesign
My primary goal was to elevate the professionalism of the website and make it concise for the primary users: donors and volunteers. Below are a few highlights of the improvements I made to the original website.
01. Improved Visual Hierarchy
02. Condensed text
03. Increased Accessibility and Learnability
04. Polished Student Testimonials
Results & Next Steps
The existing website was difficult to navigate and efficiently use for the primary users - donors and volunteers due to the information architecture and visual hierarchy. I successfully improved the overall experience of the landing homepage to create a more sustainable non-profit with improved navigation and visual hierarchy.
Results
Improved learnability and usability by redesigning the information architecture and visual design
Increased accessibility by increasing contrast and improving the visual hierarchy
Enhanced credibility with high resolution images and a message from the founder
Designed a more gender neutral color scheme to appeal to more users
Next Steps
Handoff annotations and specs to developers
Rebranding across the full website along with social media platforms
Replace stock photos with images of the actual kids enrolled in the programs
Film high quality videos of the students and volunteers working together for the website