Updating A Non-Profit
For The Greater Woof
When asked to create designs for a website, I opted to redesign a non-profit site as a way to display my skills but also create an experience for an organization that may not benefit from an updated look and feel. I chose Paws for Life as I love dogs and knew that I could create a simple and inviting experience for visitors of the site. In this update, I created wireframes, a style guide, high fidelity compositions and prototypes.
The Concept
While it was apparent that the website could use an updated look, I also asked the question, why does it need reworking? Through exploration detailed in the concept maps below I wanted to think what interactions the new website could simplify. I also looked into what type of people may use the site and questioned if it would fit the needs of different individuals, for example non-tech savvy people and people who barely have an understanding of a computer.
The Sketches
To begin the project, I first listed what pages I wanted to include and how the website would function. I then sketched up basic layouts of each page of the website, making sure to include where button, hero images, navigation etc would be placed on the page. When sketching the layouts, I sketched out a mobile design first and then a desktop site to have a comparison of how both platforms may look.
The frames (lo-fi)
After a brief sketching phase, I translated the sketches into vector wireframes to show a quick rendition of how the website will looks. I also placed this version into a prototype to provide an initial feel of how the website would function and feel. The purpose of these wireframes was to determine where interactive elements would be placed and to determine how the site would work in a digital space and if it conformed to a layout grid. This stage made surface comps much easier to build as the page elements had already been set in place.
The Style
Creating the style guide for the website allowed me to provide further details about creative elements such as colors, buttons and menus. It also allowed me to solidify the branding for the website in terms of color. I chose a navy blue as a base color and had a light yellow to accent elements such as buttons and forms.
The Surface (hi-fi)
Using my wireframes and style guide, I went on to create compositions that were essentially fully completed. I added color and images to the site to add the feel and character of the website and styled elements of the site to provide a more professional look. I used mostly images of dogs to encourage an environment of sympathy, hopefully moving the visitor towards adoption, donation or volunteering.
The Prototype
After creating high fidelity mockups I took them into Invision and made them interactive so that I could test how transistions would look and feels as well as see how certain design choices would look in motion. Creating working prototypes added a new level to my site because it helps the design to feel real before actually building the site/app. In my opinion, prototyping is one step that should not be skipped as it can reveal things that may need to be reworked or changed before a full implementation.
You can see the prototypes in action at the links below:
The End
While a project like this can seem long and tedious in places, each step is designed to uncover new areas and ideas for the creation. The reasoning for the site/app becomes clear within the early stages but even up to testing, new ideas become apparent. I really enjoyed creating this site outline and the accompanying deliverables that support the design choices and user experience choices that are made in the final designs.
