top of page
Cover – 1.png

PuppyVille
Mobile Application Design

A concept application for dog owners that are looking to connect and share with other owners.

 

The main goal of this app is to provide both new and experienced owners a place to check everything dog related.

Main functions include creating profiles for your dog(s), breed information, training tutorials, sharing problems using forums, as well as finding nearby dog parks.

Date: January, 2020

Tools Used: Adobe Illustrator, Adobe XD

Areas of Focus: UI Design, Visual Design, UX Researching

Identifying the Problem

While puppies are fun and cute, getting a puppy and learning to take care of it can be a daunting task that requires a lot of time and patience. With such a huge variety of breeds and sizes available, potential owners also need to learn what traits and features they are looking for in their companion. Even still, owners need to learn how to train and socialize their puppy once they have picked one out.
 

With so much to consider, some new owners might not realize what they are getting in to. The goal of this project is to make this process of owning a new puppy easier. Through this application, I wanted users to be able to find all the information they needed in one place, as well as help guide them through raising their puppy.

iPhone_edited.png

Scope, Constraints, & Role

Due to this being a project for school there was no budget and a close deadline, meaning I was unable to dive deep into each aspect of the app and consider every possibility. This meant that there would need to be firm timeline that had to be followed strictly in order to complete the project in time.

Being the sole person working on this project, I was in charge of conducting research, design the interface and make sure the user experience worked well.

Research - Understanding Your Audience

It was clear from the beginning that the audience would be potential, new, and experienced dog owners. However, through surveys, it was discovered that the needs and wants from these users differed. Potential and new owners wanted to learn more about their puppy and how to train them while experienced owners wanted to share their experiences and find off leash parks for their dogs to socialize. Personas were created based off this research to refer back to when creating the app to make sure the users needs were met.

Persona 1.png
Persona 2.png

Prototype - Using Simple Navigation

Analyzing the results from the research it was clear that users wanted to a clear and easy to use app with all the features they are looking for. Through this a sitemap was created to list all of the features of the app and gain a better understanding of the user flow by looking at how they would navigate from page to page.

Site Map.png

Prototype - Creating
Good User Experience

A crucial step in the process of designing an app is wireframes as it provides the basic skeleton or structure for the app that the will users interact with. Once the features and navigation of the app were made clear using the previous research, personas, and site map, multiple iterations of wireframes were created in order to gain a visual understanding of the users and their journey throughout the app to finally develop an intuitive and simple user experience.

Wireframe.png

Prototype - User Testing
The Wireframes

Just as important as designing the wireframes is testing them with actual
users. By using the wireframes that were developed, user testing would ask a possible user to complete a specific task such as finding information on a breed of dog or finding the page that shows your liked posts. This is used to find any barriers or hiccups in the user experience so that they can be fixed before the final app is released.

User Test.png

The user journey taken to find a training guide

Design - Giving Users
a Feeling of Growth

Before pushing forward into designing high fidelity mockups for the app, several style guides were created to test how the users might feel using the app. This style tile was selected as it felt fun and inviting with the main colour being green and a contrasting orange colour.

StyleTile.png

Design - High Fidelity Mockups

These are the final high fidelity mockups for the app. These showcase the users needs of discovered in the research phase, such as adding vet information, a forum to share experiences, info on dog breeds, puppy training guides, and a map for nearby off leash dog parks.

iPhone_edited_edited.png

Design - User Walkthrough

Using the high fidelity mockups, a user journey was provided to see how the
user would use the final app to achieve a goal. This example shows how a user would view their liked posts in the forums.

iPhone – 6_edited.png

Opens the app to the homepage -> enters forum page -> clicks on liked posts tab

Reflect - Outcomes & Lessons Learned

Once the project was completed it was very clear that every step in the process played an important part to the final outcome and if a step were to be ignored it could cause major setbacks and delays.
 

To create a good app or website, you must understand who you are designing for and what their needs are. Only then should you move onto developing navigation using site maps and wireframes to ultimately create a good user experience.
 

Due to the restraints on time, there was a lack in the amount of research done to further my understanding of the user. As a dog owner myself, this led to me making some assumptions based off of what I would want to see in an app. There was also more user testing that could have been using the high fidelty mockups in order to update them to improve the overall look and feel of the app. I also learned that even after an app or website is launched, it does not mean that the project is complete as it needs to be maintained and updated with new information periodically.

iPhone – 1.png
bottom of page