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.

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.

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.

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.

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.

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.

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.