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 nonprofit 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.

Sketching

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

I was trying to have all the relevant information well organized and classified into elements, and components.

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.