Urban Paws Website
Project Scope
For my project, I have chosen to design a website for a theoretical dog daycare business. I have chosen this business as I am currently a dog sitter for Rover.com so I feel that I have a good understanding of the target demographic for the website as well as the necessary requirements for information to display. Additionally, I have access to many dog owners to interview to get an even better understanding of the customer base. Overall, I feel that by choosing a business to design for that I understand well I will be able to get a good grasp on what will make a successful website to speak to this target demographic.
Design Inception
Mood Boards
Mood Board 1
Fun, playful, and energetic
Mood Board 2
Cool, calm, and relaxed
As I started to research and look at imagery of dogs and dog daycares a clear pattern emerged. Most of what I saw was green grassy images of dogs running and playing outside. However, I also wanted to explore the calmer and more relaxed side of the animals as not all dogs are energetic and playful. Additionally I wanted to srategically design my business to stand out within the marketplace. Mood board 1 explores the traditional style of dog imagery whereas mood board 2 explores the calmer and more soothing side of dogs with a series of cool and calm colours.
Brand Identity
From the mood boards I moved forward into the design of a brand identity for the business. The first and most difficult part was coming up with a name. After several pages of brainstorming and comparing names to popular dog daycares in the Toronto area I narrowed my options down to the names listed below. The next step was to do some research and see which name resonated with people the most. Finally I settled on Urban Paws as the name for my business.
Name Brainstorm
· The Doggo Den
· The Pupper Pack
· The Dog Den
· Good Boi
· Urban Paws
· Urban Woof
· Snouts
Style Guide
When approaching the colour palette of this project as previously mentioned I wanted to stay away from the most common colour used with competitors which is green so I began to develop my colour palette from Mood Board 2. I took the light and dark blues from the calming imagery and wanted to create a high contrast look so for my next colour choices I drew from the orangey brown colours of the dogs fur to create a complimentary colour palette. Then I continued to draw from the soothing cool tones and added some neutral greys.
For the typography of the project I wanted the brand to feel cool, crisp, and modern so I was drawn to thin stroke sans serif typefaces. After looking at several options I settled on Gotham Book for the primary header, Gotham Light light for the secondary header and Avenir Light for the body copy.
Logo Variations
The next step was taking my name and designing a logo. As the project began to develop in my head the first concept that came to me was the graphic icons shown later in the Design Elements section. From here I had developed a style that I wanted the logo to fit into with a playful and simplified aesthetic. I wanted the logo to relate to the city of Toronto as well as making it clear what the business was. Finally I settled on the logo shown below. The primary logo would be the multi-coloured one shown on a white background, however the other variations could be used in other various contexts.
Design Elements
Icons
Buttons
Calendars
Forms
Wireframes
After doing my research and brainstorming, I arrived at the task of creating the wireframes for the website. The first idea that came to me was the menu style for the desktop. I wanted to use the icons I had created in a unique and engaging way while keeping the rest of the style clean and simple. Different pages called for different patterns to orangize information, however many pages follow the Z pattern such as the home page where the eye is lead throughout the page in the shape of a Z and lands on the call to action to “book a stay” with the daycare. However, some pages are more copy driven and follow the F pattern such as the FAQ page. I then took these page styles and adapted them to flow for the destop, tablet, and mobile websites.
Desktop Wireframes
Tablet Wireframes
Mobile Wireframes
Prototype
Click to View the Desktop Prototype
Click to View the Mobile Prototype
Conclusion
Overall I feel that this project combined all the elements I have learned about User Interface Design and has exhibited them in a engaging and functional manner. Through these concepts and design processes that I have created a what I feel would be a truly sucessful website for Urban Paws.
