Designing for a Contemporary Audience
Refocusing to a brand that fits the value of service
Who They Are
Code Your Dreams is a non-profit organization dedicated to teaching tech skills to youth in underserved areas of Chicago. They currently own and operate a website that provides information about their organization and allows users to donate money towards their cause.
Who I Am
I am a UX designer currently focusing on visual design and UI. I operated as the sole designer for this project by conducting research, planning and execution of initial designs, and iteration of designs through feedback from my colleagues.
The Design Process
I only had a week to work on this design, and it was clear that I had to prioritize my time in order to be as efficient as possible. My process began with UI audits of well-designed and prestigious landing pages, as well as the current Code Your Dreams page. After this I developed two protopersonas which encapsulated the two main types of users for the site. Then came the first sketches of wireframes, which were later filtered into an initial visual layout. Once this initial layout was digitized into the program Figma, colors were explored and photos were added to create the visual identity of the landing page. After this, titles and content were added to appropriate sections, filling out the entirety of the page. This design was then brought to my 32 colleagues, who commented and gave me feedback about possible improvements. Once these final edits were made, the landing page was sent to the client.
Research
While pondering what kind of landing page I was going to design, I thought it best to start by looking at some of the greatest examples of landing pages that can be found online. I explored the website OnePageLove.com and came across a multitude of beautiful landing pages. This inspired many of the strong visual aspects I was going to incorporate in my ideal design. I looked for pages that had a recognizable structure when it came to headlines and supporting copy, but still contained some unique visual characteristics in the main hero section. Here are some of the pages I thought were good examples of this:
In addition to finding inspiration through other well-designed landing pages, it was important to conduct a UI audit of the current Code Your Dreams page. Through this audit, I found that the main calls to action were: Donate, Meet Our Students, and Learn More (about programs). These buttons did not pop out in contrast to the colors around them and seemed to be easily overlooked if one was to quickly scan the site. As I explored more pages on the site, it was clear that the three main objectives were to get people to donate, sign up to volunteer, or apply for programs.
With these main points in mind, I developed two protopersonas which became the identities of ideal users for the website. One was of a middle aged gentleman who was retired, had some coding experience, and wanted to find an organization where he could donate his free time. The other was of a younger boy who was a prospective student that knew he wanted to learn some tech skills, but was unsure of where he was going to do it. These protopersonas gave me a clear understanding of what the landing page needed to be in order to have an impact on users.
Design
I started by sketching 8 possible layouts.
Given the research I had done, I chose to move forward with one that allowed room for text and information to be provided, while not over-encumbering the visual space. I knew from viewing other effective landing pages that a stunning photograph would need to be displayed in the hero section to leave an instant impression on the user. I chose a design that used sleek cuts to divide the main hero section, while using a card on the lefthand side to provide a detailed description of Code Your Dreams. On the righthand side, there would be a focus of charity and giving, with two call-to-action buttons labeled “Volunteer With Us” and “Donate”. A low-fidelity wireframe of this design was then created in Figma.
Wireframe
The fact that young prospective students would be viewing the page meant that it had to give of the impression that Code Your Dreams offers a learning environment that’s fun, interesting, and most of all, cool. This was in high contrast to the current landing page which focused primarily on acting as a charity website. I wanted my design to engage students immediately and show them that the programs offered weren’t going to bore them to death.
Adults looking to volunteer or donate would also have to have clear indication of these available actions without scrolling as well. I was going to need colors that focused user attention on these actions, while not completely distracting from the main theme.
Mood Board
After hours of searching through pre-made color pallets, I found that the colors of black and yellow to be the most effective in communicating a style that fit the sleek, cutting-edge theme. Color theory tells us that black emphasizes an emotion of power, elegance, and mystery — all things that would speak to the interests of kids looking to dive into the wondrous capabilities of computers. In contrast to this, yellow is associated with brightness, happiness, and energy. This would be a major aspect of reinforcing the idea that Code Your Dreams offers programs where one can feel excited, inspired, and alive.
The creation of a mood board provided continuous direction throughout the process.
The landing page had now taken form.
Iteration
My design was presented to my colleagues in order to receive feedback and comments. This was important as I needed to iterate on my design within the one week timeframe I was given.
Changed Nav Color
Updated Hero Section Font
Removed Hero Card Gradient
Reduced Copy and Added Link in "Meet Our Students" section
Fade to Black Background
Rearranged Cards into 2 Columns
Removed Card Gradient
Updated Footer Fonts
Changed Background Color in "Meet Our Partners" section
Final Product
Next Steps
With the landing page now flaunting a visual identity meant to intrigue and excite users, the next steps would be to redesign the other subpages. This would rebrand the website in a way that would keep prospective students interested and excited about learning at Code Your Dreams. The idea is to communicate to the students that if they came to learn their tech skills here, they could possibly go on to do great things in the tech industry. The site also would let volunteers know that these programs teach powerful skills to kids that would not have the opportunity to learn anywhere else. It would make possible donors feel that their money is going toward a program that ought to be taken seriously, as this is not your average community outreach program.