Coding Their Dreams

Being tasked with a visual design sprint isn’t always the easiest thing, especially for a first-timer like myself. I had to tap into my ancestor’s knowledge (I come from a line of graphic designers), and quite a bit of secondary research to come up with a landing page that was both appealing, and made sense from a design standpoint.

The client this time is a non-profit called Code Your Dreams, a social program based in Chicago that helps at-risk youth get involved with coding to help brighten their future. I was tasked with redesigning their landing page in four days.

With almost no user research being conducted, I relied on psychological “tips and tricks” to make a more appealing landing page. Taking the psychology around color, contrast, organization, design, a little bit of competitive analysis, and connotations of certain words were the tools of choice in design.

Coming from someone that loves psychology and the way the human brain works, I decided to start with color. Different colors and different palettes influence the way that people feel. For example:

  • Red is associated with excitement, energy, passion, and action. It’s a great attention-grabbing color that signifies intensity. It can also convey danger and tends to elicit the strongest emotional responses out of all colors.
  • Orange is associated with creativity, adventure, enthusiasm, success, and balance. It’s a great way to add a bit of fun to pictures and websites, but it’s not as commanding a color as, say, red. It’s still great at drawing attention to things like a call-to-action (CTA) button.
  • Yellow revolves around sunshine (surprise!) which evokes feelings of happiness, positivity, and summer. It’s also used as a warning color, however, so the use of the color yellow is very context-dependent. Yellow is also the brightest of all the colors, and so leads to the greatest rate of fatigue when looking at it.
  • Pink is usually associated with femininity, playfulness, youthfulness, and love. Not really what I’m looking for for a brand like Code Your Dreams.
  • Green is highly connected to nature and money. Growth, fertility, health, generosity, and even envy. Like most colors, it’s context-dependent.
  • Blue’s meaning is closely associated with the sky and the sea. Stability, harmony, peace, calm, and trust are the things that are most associated with this color. Conversely, blue can be associated with sadness, depression, and a sense of coldness.
  • Purple has been associated with royalty and luxury since the middle ages. It’s connected to power, wisdom, and spirituality. A purple-forward color palette can be perceived as arrogant and aloof which can elicit feelings of frustration and envy.

There’s more colors to cover, but that’s the gist of it. Different colors result in different emotional responses. For my color palette for the new Code Your Dreams landing page, I decided to go with blue and yellow as my main two colors.

Well, competitors might not be quite the right word. Fellow non-profits is a bit more like it. I did research and found a few key takeaways from different social good sites like the Canadian Red Cross, Charity:Water, and the United Nations High Commissioner for Refugees (UNHCR), to name a few.

  • Distractions are always at a minimum. Less is more when it comes to having a landing page for an organization that isn’t trying to sell you a product.
  • Headlines are prominent and are never lost in the rest of the page. If it’s something that they want to get more attention, it’s paired with an emotional subheader.
  • Call to action buttons are high-contrast and emotional. High-contrast CTA buttons are nothing new, but making them emotional too, well, that’s the difference between good and great CTA buttons.
  • The purpose of the landing page is clear. It has a clear goal and isn’t jumping all over the place with different goals. It makes the user understand why they’re even on that page in the first place.
  • They explain the call to action in a way that eliminates fears. Is it going to be hard? Am I going to be sending a bunch of stuff to my friends and family? How long will this take? And most importantly: Am I really able to make a difference?

Just because a change is small, that doesn’t mean that it can’t have a big impact. That’s what connotation was all about. Different words in different titles can have a much larger impact on how someone feels. The biggest change that I made to the Code Your Dreams landing page in terms of connotation was changing the “donate!” button to a “support us!” button at the top of the page. A donate button right off the bat felt too aggressive and “gimme your money!”

The support us button at the beginning of the page was left intentionally vague because I didn’t want visitors to feel pressured to donate immediately after visiting the page. It would lead to volunteering resources, donating (of course), and partnerships for organizations that want to help out. However, I did leave the CTA button at the bottom of the page still saying donate because at that point, the user will have enough information to decide if they want to donate or not.

I might not be the best graphic designer (yet), but I do know how to take feedback and research and turn it into something that is usable and good. Taking the research I did on color palettes, competitive analysis, and wording/connotation, these are the iterations on the first part of the landing page.

Iterations on the top of the landing page
Iterations on the footer of the landing page

Designing something isn’t all just “make it look pretty”. Designing a landing page for Code Your Dreams isn’t as simple as choosing colors that look nice; it’s so much more than that. It’s carefully selecting colors that make people feel a certain way, it’s about designing certain components to stand out and others to be unobtrusive, and choosing words that mean feel different than other. It’s as much about managing the person that visits the site as much as it is about managing how the site looks.

--

--

UX/UI Designer, Gamer. Let's make something together: https://www.linkedin.com/in/seanmphelps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store