UX|UI Designer

Client brief.

Child's Play is a non-profit that aims to improve the lives of children in hospitals and other child facilities through the power of play. Since 2003, Child's Play has 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 by utilizing therapeutic play and 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. Child's play needed a complete website redesign to create a better environment for the users visiting the website, while also keeping in mind the non-profits goals and the reason for the redesign. The redesign included the creation of Flowchart, Personas, Low-fidelity wireframes, style guide matching their already made logo, and a high-fidelity prototype.
*This website redesign was completed for Millersville University's Interactive and Graphic Design degree*

Project presentation.

Goals, User Objectives, Questions, and Emotions

I first researched the non-profit's goals and ideals and used this information to conceptualize their website and what it should convey to it's users. User goals were the next part of this process. I then needed to determine what the user might need to accomplish on the site and how might they interact with the website. The next step was making sure that the website would answer the questions users might have while they are reading through the content. Lastly, I wanted to ensure that the design of the website was in line with the company's purpose.

Website Flow

Child's play had a lot of information that needed to be included on the website so I created a website flow(see above). Flows helped to organize all the information that needed to be included on the site, how it could be best laid out, and helped form a navigation system. I created this flow using the information from the notes I took before and sketched the flow in a notepad.

User Persona - Akora
User Persona - Nick

Akora Stevens and Nick Kolchef were two user personas created to portray the website's target audience. These personas helped to build empathy and ensure that the design created was both user-centered and business oriented.

User Flow

Using the personas, website flow, and notes, this scenario was created for a potential user flow. Here you can see the route a user might interact with the website and the different avenues they might take depending on what they are trying to accomplish. By anticipating how the user may interact with the website, I was able to ensure that they could navigate the website efficiently.

Child's Play Wireframes
Low Fidelity Wireframes

After creating the wireframe sketches, I used them to build the low-fi wireframes in the program Sketch. The low fidelity wireframes now show how the beginning of each site will look, text that would be displayed on each page, buttons, forms, and placeholders. The most important change from sketch to low-fi was the addition of an application page and a donation page. This change was to keep the fundraising page from having an overwhelming amount of information. One other small change from the wireframe sketch to the low fidelity mockup was the addition of the submit event form, so users can easily add the information they need to for an event without being outsourced.

Style Guide - Child's Play

This style guide created consistency through the website and any other digital media. The guide features icons, typography, UI elements, and the new color scheme.

High Fidelity Mockups

Using the style guide and the low fidelity wireframes, I created high fidelity mockups in the program Sketch and a prototype using the mockup in the Invision App. The link to the prototype will be provided as well.



Have a project that could use some help? Get in touch!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Other projects.

Previous projects for other clients.

See more examples
Arrow that points to project examples