WonderKey Collective

“WonderKey exists to narrow the digital divide safely for foster, emancipated and homeless youth in the US.”

Through the implementation of various design methodologies, I was able to design the interface for a new website for this non-profit that provides more information, uses more compelling branding guidelines, and a better user flow.

Home
Who We Are
Our Impact
Contact
How to Receive
How to Contribute

Website Remake

Here, I created a clickable prototype for the entire website. I added and reorganized the information found throughout the website making the important content easier to access. I enhanced their existing branding guidelines by maintaining the logo and bright teal highlight, but added a deeper tone and more compelling imagery and typography. I also added interactive elements to the website, taking it from just an information list to something the users could interact with.

Using the already existing body copy from their website in addition to information found through research and a meeting with a director from the program, I created more comprehensive body copy that fully describes WonderKey’s mission. I also provided more information on how the program works, for people who may have been confused by the vagueness of the information before.
I carefully selected imagery and branding that supported the WonderKey mission. I used a soft sans-serif for headlines to mimic their logo, in contrast with a readable sans-serif for body. I used the bright teal found on their current website for headlines and highlights, but I enhanced their current branding with a darker, richer blue for contrast, as well as adding a gradient effect over the images used for the website banner.
I wanted the website to be more user focused and provide much needed information. I created a quiz for people who want more information about the program. It asks a variety of questions that would help the customer service team respond with the correct information. I also designed a donation tab and an interactive impact page which displays success stories using the hover function.