Child's Play - Website Redesign

Child's Play, a non-profit improving the lives of children in hospitals and other child facilities through the power of play. Since 2003 they have been dedicated to supplying children in a network of over 100 children's hospitals, clinics, domestic violence shelters, and other facilities. Child's Play has come to the rescue of many children who needed a distraction for therapeutic play by supplying them with toys and games. This fully responsive four-page website redesign showcases the importance of their non-profit for children, their impact, and different ways a person can get involved.

Languages and Software
Sketch / HTML / CSS / Adobe Illustrator / Adobe Photoshop
Scroll Down

The Challenge

The goal of this website redesign was to create a better environment for the target audience that would be using the website. One key update to the site was creating a landing page that showcased the primary purpose of the non-profit. The key components included on this landing page are a call to action, and a brief about them and their impact. Another key update was to analyze the target audience and create an experience centered around the goals the user would be trying to accomplish. In addition, it was essential to ensure that the website had a flow that users could easily navigate. The images below show wireframes, style tiles, personas, and user flows that all played a role in making the key changes to the website.

The Design Process

The first step to a redesign is not wireframes, personas, or journey maps, but to define what the clients' goals of the redesign are, and understand them. As a designer, there are four essential questions: what are the goals of the business, what are the goals of the user, what questions does the website need to answer to avoid confusion, and what emotions to portray. These are all vital for optimal user experience. Once there is an answer to those questions, we can move onto finding the target audience through personas. I created two personas; the best persona represented the users that you could find visiting the website, and this helped to drive design decisions by taking everyday user needs and bringing them to the forefront of planning before the design has started. After the creation of the personas, I designed wireframes to layout important information without committing too much to the design. After finishing the wireframes, I was able to create a style tile to develop a uniform layout on each page. I chose bright colors and hexagonal buttons to portray a fun, childish, and happy feeling when you are navigating the website. Using this style tile and the wireframes, I knew what I needed when bringing the design into Sketch to be finalized before coding it using HTML and CSS. All assets for the website were created in Adobe Photoshop and Adobe Illustrator.