PuppySquad

Author: Ying (Adam) Pan

Puppy Squad is our team’s vision of a Premier Dog Meetup website based at San Diego. The site allows individuals, businesses, families with or without dogs to easily find and attend meetup events — no account required. Businesses and organizations can connect with the community by hosting promotional events and sponsorship while also supporting their business. For those with tight schedules and those that are too busy with their lives, the web application allows interested users to be able to attend dog-related events at their convenience or leisure.

PuppySquad was created along with 5 other motivated members in a design course at UC San Diego. Throughout the 5-week process, my team and I conducted user research and user testing, while also creating various personas, storyboards, and prototypes, to design the ideal solution to our problem.

User Research

When we first formed our group, we all asked ourselves what kind of problem do we want to solve and how can we solve it using a website or web application. Our initial ideas ranged from Dog Go ( a parody of Pokemon Go),a Dog Social Media(where people can like pictures or videos of dogs), and Puppy Training ( where dog owners can find people to help train their dogs). However, we wanted to make something that all dog lovers would find useful and something practical that can be used from day to day. Thus, we decided on creating a dog meetup application, which will allow users to create dog meetup events, to meet other local dogs and dog owners, to acquire help from dog stores or businesses, and to view local dog events.

Before making our idea a reality, we wanted to question a plethora of potential users for this application so that we can gather valuable data about how to design our website. For each different user category, we created a series of questions that we believe are vital in understanding our users. As a team, we then asked people in different categories about their opinions on dog meetups and events.

We found that dog owners would be interested in going to meetups, however many of them were never able to attend them due to a plethora of reasons. One reason was that many owners have busy schedules so they do not necessarily have the time to go. Also many of them could not go, since the events are too far.

User answers to meet-up questions

Potential dog owners usually go to events close to where they are and to events targeted for people without dogs, like fluffy therapies (where people are able to cuddle and play with other dogs). This is because they said that they would “feel awkward” at meetups if they did not have a dog or bring at least a friend with them. Different dog businesses have varying opinions on the purpose of dog events. Adoption centers, like Humane Society, focus on fundraising events and spreading awareness about their dogs. While, store businesses, like PetCo, use social media, like Twitter, Facebook, and Instagram, to promote events to promote new products.

Meetup.com and Facebook are the world’s go to websites when you want to host an event. These two websites host millions of users from across the world and it is easy to get any event or group started. However, these websites host millions of different events of different categories, so they are not designed specifically for dog events.

BarkHappy, Sniffr, and Playdate are all mobile applications that can be downloaded from the Google Play Store and Apple Store.

→ These applications above allow dog owners to create a social media for their dogs, meet other dog owners and dogs, write status messages, and view other local dogs.

→ To use these applications, users must signup with their dog and themselves and create profiles for each of these.

Our application will not force users to signup and allow unregistered users to still be able to see local dog events around them. Also, these applications REQUIRE users to have own a dog, however our website will allow potential dog owners and dog enthusiasts to be able to attend these events. These applications have little to no business incorporation in their design. However, we plan on sponsoring events from famous pet stores and businesses like Humane Society and PetCo, in order to help increase dog event meetups.

Personas & Storyboards

As we continue to grow and explore both ourselves and our product, we knew that we needed to find ways to unlock and tap into our full creativity to find and explore every corner of what our product could offer. Up to this point we had begun to really come together as a team, finding our roles and growing together. Likewise, we had done our research on our product, going out and interviewing potential users as well as analyzing potential competitors.

As we strive to accomplish a well-designed, user friendly experience and product, we always have to be ready to read, react, and change both our product and ourselves.

We went out as individuals to explore our personas in order to better understand how and why these groups would interact with our product. We began first to explore our personas, their demographics, age, and really develop our users as people as individuals rather that cookie cutter models. Developing personas goes beyond a simple age and gender, instead we seeked to create a person, with personality traits, hobbies, interests, and of course for our purposes, dog ownership.

After creating our personas, we all individually got to work sketching out storyboards. Storyboards are essentially sketches containing story lines of how and why that specific persona would interact with our product. This process what incredibly insightful for many of us. Additionally, this process allowed us to explore and expand our original simple idea of hosting dog meetups. We finessed our minds in coming up with more varied and unique experiences our users might have. We reflected on our user interface and plan for design, as well as our product as a whole and realize its strength and weaknesses among potential users.

We understood the need to translate these somewhat abstract ideas into our product, so we began discussing specifics on features on our website. We also learned from both our interviews and our story-boarding process that many users want a quick and fast way to gain access to event listings. Therefore, we decided on including these updates:

- an optional login process for users

-use the website without logging in

Either way, we continued to grow and develop the specifics of our product based on our story-board analysis.

Prototyping Process & Design Iterations

Initial Design

After working with the team through the early design phase of our product, we came together to come up with a rough iteration of our platform that will satisfy the personas we created as well as meet the needs of our target audiences. With the information gathered, we created a rough prototype of what the web application will look like and what it will achieve.

We used parallel prototyping, one with a clickable PowerPoint mock-up and another, a paper mock-up of our web platform. For the paper prototype, we focus on making sure potential testers will be able to see the events listings in the home page, and go through the process of creating events, and users profiles manually to better see structural design problems.

The PowerPoint mock-up, allow users to follow the functionalities processes including signing up and logging in to the accounts as well as creating customized events to better visualize common usage scenarios and potential user experience issues.

Users Feedback & Heuristic Evaluations

The initial prototype was useful in displaying our ideas, but were lacking actual product feedback. Thus, we decided to recruit some early testers from another project team and people we know to gain a better understanding of what we can do to improve our product.

Example ideas:

→ Users found the home button to be functionally confusing

→ Map location change in relation to events to provide better feedback for users

→ UI/UX change regarding the navigations

Final Low-Fidelity Iteration

Our revised final low fidelity iteration demonstrated design changes based on the feedback and evaluations we gathered. The home page shows a listing of puppy events that that are taking place with intuitive filters base on distance, price and other useful features. The home page contains a clean interface with the logo serving as the homepage button, the event creation bar and a combined FAQ/About navigation bar. We added changes to events creations allowing for customization options for dogs added. After the events is created, it displays useful information regarding location, time, people who are attending events as well as basic help for people interested. The logo of the website now also contain useful information that briefly provide visitors information about what the website is about.

Final Prototype & Development

While many members in our team have backgrounds in computer science, many of the members did not have too much experience with web development thus making it challenging to implement some of the advance features we wanted on the website like Google Maps integration, and filtering events. Fortunately, we were able to overcome the hurdles and implement the site using some bootstrap theme, HTML, CSS, and Javascripts with extensive google searches, tutorials and API inclusions. My team and I encountered multiple issues with webpages scaling, and issues with local storage as well. Nonetheless, we were able to get a minimum viable product completed with me contributing to the design and implementation of many of the front-end elements on the webpages including the about page discussing our team, and wiring of the different pages along with the color scheme and layout design.

Conclusion

In all, this project was one of my favorite that I’ve ever been a part of. Not only did it teach me hard skills in web development in a team setting, it also introduced me to the design process as a whole. More importantly, PuppySquad has helped me develop a passion for designing and implementing elegant and functional user experiences.