Creating a landing page for Code Your Dreams, through the Rapid design methodology

The importance of providing the correct landing page to a user is vital, it is the way to guide the user to whatever content he/she is interested in.

Code your dreams is a Chicago based non-profit incubator for youth, their objective is to empower youth through code.

Code your Dreams asked for the creation of a landing page, as the scope for this project was 1 week, I decided to focus on the home page. I wanted to make sure that my landing page proposal was relevant to potential partners, volunteers, and donors.

The research was focused primarily on other non-profits, I wanted to identify key elements that they all use on their websites, the learning that I got from them was the repetitive elements of carousels and the Donate call to action that was everywhere I also noticed that none of them were explaining what were they in a clear and understandable way. Then I used data from the past project where I asked nonprofits about what information was relevant when trying to partnering with another organization, from them I got relevant insights in regards to trust and compromise.


Form the insights I got from the research phase, I created the following sketch:

Visual Concept

The color palette was built up and combined with the primary color of the logo, the tool that helped me with the mixture of colors was adobe color.

The final color proposal can be found below:

First Landing page (without feedback)

The feedback I received was positive but there were a lot of alignment issues, also the sections were not well defined. After receiving a round of feedback I ideate and create the following redefined version.