Caption: Code Your Dreams is a non-profit organization that provides culturally relevant, community-based technological programs to underserved youth and adults in Chicago, IL. This picture shows a person holding a Python textbook by O’Reilly. Photo by Christina @ wocintechchat.com on Unsplash

Code Your Dreams provides culturally relevant, community-based technological programs to underserved youth and adults in Chicago, IL, and empowers the community with code.

Caption: Illustration showing multi-faceted aspects of coding tech

Project Description

I was inspired to explore UI strategy, art direction, and visual design principles by creating a high-fidelity landing page for Code Your Dreams. During this time I worked within a rapid prototyping sprint to provide a finished concept while employing discovery, research, and best practices to frame my early iterations.

The aim of my mission was not to make design recommendations per se, but rather to help make clear the benefit of the organization to visitors to Code Your Dreams’ site.

The Client: Code Your Dreams

Code Your Dreams is a 501(C) organization founded by Brianne Caplan in 2018 in Chicago, IL. They are an incubator and nonprofit that empowers underserved students to solve community problems through code.

Going into this project I wanted to understand the context surrounding Code Your Dreams. During my User Interface Audit, I learned through a video interview Brianne Caplan had hosted by Chipy Talk, that Code Your Dream’s mission is to teach students to build apps in their own communities in order to empower them to create a better world.

My Role

During this project, I completed a brief heuristics analysis of the current landing page that considered website usability. Jakob Nielsen of the Nielsen Norman Group offers 10 Usability Heuristics for User Interface design:

1. Visibility of System Status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

Caption: This is a screenshot of the current homepage for Code Your Dreams

Landing Page Overview

To give some background info, the landing page I decided to design was not necessarily intended to replace the current homepage, but rather to introduce additional context to provide the background to donors about the programs offered at CYD, as well as give event information to people interested in learning more about the upcoming Code Your Dreams event, Codepalooza.

I’ve centered this page around the users who would be interested in understanding why they should decide to donate, register to join events, and engage in sponsorship.

The Challenge

The issue that I identified was that potential event-registrants and potential donors did not necessarily have a centralized location to learn about why and whether they should donate.

To identify this problem, I conducted a UI Audit surrounding the concept of donation. Reviewing through Code Your Dream’s live, current webpage, main menu, I counted the number of times the “Donate” button showed up.

· Header = 1
· Unlock Potential webpage = 1 Donate button
· Code Your Community = 0
· Our Students = 0
· Our Instructors = 0
· Get Involved = 0

I felt that only 2 Calls-To-Action to “Donate” throughout the website could be amplified to underscore the message through repetition.

Needs

Striking the right tone with users at each step of their journey is critical. My goal was to appeal to the user’s state of mind in their journey and to help them understand why this organization is absolutely worthy and deserving of their donations.

Solution: I decided to create a landing page that would focus on reaching potential donors and event registrants; encourage giving, sponsorship, and retention; and teach visitors about Code Your Dream’s mission to benefit tech empowerment and community equity.

Caption: I created a mood board to encapsulate the various organizations that I researched that attempt to bring code to communities. These included CS for All, Brown Girls Code, Plural Sight One, Computing Research Association, TechLit Africa, and others.

Mood Board

I created a mood board to encapsulate the various organizations that I researched that attempt to bring code to communities. These organizations included CS for All, Brown Girls Code, Plural Sight One, Computing Research Association, and TechLit Africa.

Caption: This image shows two sets of handdrawn sketches that I made to ideate on a landing page for Code Your Dreams.

Sketching and Ideation

Next, I created a series of sketches to ideate upon various UI solutions. I felt it was important to include Codepalooza, an event that Code Your Dreams was co-hosting in partnership with TechLit Africa. TechLit Africa is an organization founded by Nelly Chaboi, which is committed to bridging the gap by repurposing technology to build community-centered computer labs in rural African schools and “bring the library of the world to the children of the world”.

I placed this event at the Hero image section at the top of my first sketch, with the event timeline in the second panel.

In my initial sketches, I also included the various skillsets taught by Code Your Dreams, as well as planned to showcase videos of real student projects by Code Your Dreams.

Wireframe

I created 2 initial wireframes based on my sketches, as follows:

Caption: I created 2 wireframes based on my sketches.

Version 1 — Code Your Dreams (LEFT)

- I used blocks to designate sketched out page sections
-I added ipsum lorem text on a lo-fi level and styles to add into specific types of text blocks.
-I would’ve liked to add components to simplify adding repeating layouts
-I added preliminary colors, but thought about updating the palette (while keeping the Code Your Dreams pink/red).

Version 2— Code Your Dreams (RIGHT)

- I took it to an even higher level of fidelity with sample text and graphics
-I improved on the copy language from the first prototype
-I created components in Figma, which are easily accessible repeatable elements, for buttons, arrows, cards, and blocks
-I ideated on a simple color scheme centered around a sky blue, pale yellow, and red/pink

Initial Prototype

Using Figma, I created an initial version 1 prototype, and I got some amazing feedback from over 30 other UX Designers about how to iterate from my initial prototype! Some common themes were that many of the user testers wanted me to include more negative space to give the text and images room to breathe, especially in the “About Codepalooza” section.

Caption: Over 30 amazing people lent feedback to my initial designs!

Color Theory Overview

I also received wonderful feedback from Sally Haulfmann, who has worked extensively in gallery spaces for art installations and has Art History knowledge with her suggestion to adjust the special event feature content, and to add bolder pops of color!

I did some research into colors and emotions they tend to convey, and per my review of color theory, I summarized the following color theory research:

Blue conveys themes of peace and trust, and also signifies renewal, just like Code Your Dreams is working to renew STEM education. The lighter shade of blue draws upon the sky imagery in the original webpage.

Pink lends itself to red and white and grabs attention, which we want to do in each Call-To-Action (CTA) button. This pink/red color is also found in the original CYD logo.

Purple represents power. Similarly, Code Your Dreams wants to empower the people who have been underserved by giving students the powerful ability, tools, skills and knowledge to work and invest in their own communities.

I used multiplicative additive color mixing of the blue and red to obtain the exact shade of purple that I wanted. These blue, red/pink, and purple colors are all on the same side of adjacency to each other on the color wheel, which created a harmonious palette. I also wanted to add purple to the color mix because using a strict pink/blue duo without other colors felt too much like it was creating an unintentionally gendered binary whereas the intention of this page should in fact be an inclusive space.

To ensure that the contrast in my color palette would be further visible in cases of colorblindness, I also used an accessibility color checker and verified that my final theme colors are contrast and color-safe, according to the Adobe Accessibility color checker.

Prototype

Finally, I created a prototype that incorporated the feedback I received and iterated upon. I focused on the themes: technology, empowerment, and equity, and stuck to Code Your Dreams’ mission to “reshape the future of tech”.

Caption: This is my current prototype

Caption: This is the alternate slide for “Code For Community”, which is one of Code Your Dreams’ two featured programs: “Unlock Potential” and “Code For Community”.

Analysis of High-Fidelity Prototype

I’d like to provide an analysis of my hi-fi prototype, starting from the top (section 1) and working my way downwards (section 7)

Section 1 — (Hero Section) Code Your Dreams: On section 1, the user begins by seeing this text that we are reshaping the future of tech. I had initially started out the site with an image about Codepalooza, but decided to center the overall prototype back to the organization rather than just the event, after I received recommendations from my colleagues to include more information about CYD as a whole rather than the one-time event Codepalooza on my landing page.

I re-focused on the fact that Code Your Dream’s solution is focused on Equity, Socioeconomic, and Community based solutions. They provide students everything they need — laptops, hotspots, and internet access. They also focus on low-income and minority students. They also put the power in the hands of their students to solve their daily problems using code. They do their user testing in neighborhood settings, and putting it in the community.

Section 2 — 1st Annual Event: Codepalooza: In the next section, I imagined the website viewer/user, the potential donor, getting to see the text for Codepalooza (the first annual event). The reason I used this particular picture in the Hero image section is because the text they use is “tech summit,” and the people have their hands raised in a group high-five resembling a “summit”. Furthermore, there’s a diverse range of ages and demographic ethnicities represented here, which I felt conveyed inclusivity.

Section 3 — Codepalooza Schedule: In the next section, the potential donor or event registrant can find out more about Codepalooza’s schedule. Each of these cards has a CTA to either Register or Donate. I had some great feedback here to expand these photos of the people to give the people more visibility and thereby give the organization more credibility in the eyes of the users. I tried to make the photos relevant to each headline, for example, this is a roundtable for the “roundtable discussion.

Section 4 — Programs at Code Your Dreams: In this section, the landing page shows the two major programs at Code Your Dreams, and the potential user can toggle between two different programs to see them at a glance.

Section 5 — Statistics: The Facts: To underscore the legitimacy of the organization’s work to potential donors, I wanted to include statistics that I gathered from Code your Dreams, so this section shows statistics from the videos that Bri talked about and the content she put together. I’ve also included a “Join Us” section here to underscore the Call-To-Actions buttons.

Section 6 — Video Project Showcase: This section is a video project showcase that I put in this gallery type slider where users can scroll through real student projects.

Section 7 — Our Partners: To highlight social proof, I included a section for “Partners” and I added a “Join Us” button in case the user wants to become a partner of Code Your Dreams.

Section 8 — Footer — A final call-to-action button to “Donate” is included in the footer, alongside “About Us,” “Site Info”, and “Join Us” categories.

Final Thoughts

Technology has shown us just how connected we all are and given the growing diversity of the technology ecosystem, the people who are creating products to improve our lives and our communities are dramatically making a difference in societies.

I would strongly encourage anyone reading this article to simply explore Code Your Dreams — please watch the videos of the student projects that Code Your Dreams students have created in their own communities. One student made an app that helps people understand their rights in accordance with the law and justice system; another student made an app that helps users record their usage of plastic packaging and waste.

Code Your Dreams underscores the fact that technology plays an essential role in helping to make the world more accessible, allows people to address critical challenges facing society, and helps people to build a more inclusive and sustainable world in the communities that they face.

If I could further iterate on my current prototype, I would:

Engage in additional user testing to assess the usability of this landing page
Evaluate the page in depth using Learnability, Efficiency, Memorability, Error Handling, and Satisfaction (LEMErS) heuristics
Elaborate on how this page could be used as a touchpoint in part of a Service Design centered user-experience for potential event attendees and sponsors
Explore consistency and standards of this landing page relative to accepted usability principles

Ultimately, I am thrilled to have been able to create a landing page and to ideate on ways to utilize technology to empower the Chicago community education ecosystem, through Code Your Dreams.