Bark Park

A location based social network for your four legged friend.

My Role

Being a side project I used it as an opportunity to exercise my skills in different ways and build up skills in my weaker areas. I did everything from talking to users about their pain points all the way up to animating the way interfaces connect.

The Problem Space

Many of my friends have dogs and few of them have yards. Some of them visit dog parks in the city to socialize and let their dogs blow off some steam. I was surprised when people mentioned why one park is better than another or how everyone knew at least 1 dog they didn’t like at the park.

They may have had a scare where a dog nipped at theirs or when a dog was being too friendly their last time to a park. Visiting a park can be a gamble with who else will be there and what their play style is with large, small, or different genders. Knowing who’s there can tell you what kind of experience to expect.

User Research

To understand the problems of dog owners I started with a lot of searching online, from Reddit to Nextdoor, to find out what people were saying. Much of this was in line with what friends were saying and gave me ideas on other problems/solutions to take back to them to ask questions about.

The most rewarding form of research is done by contextual observation, getting in there and trying it for yourself. I convinced a friend to let me join them on their first trip to a dog park and learned about the complexity and inefficient processes involved with taking your dog.

It’s fun to think of your users as characters in your story; think of any group of characters from a TV show. These actors have a stereotypical behavior and wants/needs that when understood can be leveraged. The more I worked on these the more it made sense to do them for the dogs too.

User Journeys

After having the “who” detailed it’s best to move on to another dimension for “when” & "how" by making storyboards. Adding the user journey layer is for finding moments when a personas needs will overlap with other elements. This kind of thinking comes from the book Mental Models by Indi Young.

The Opportunity

Initially it’s best to divergently think of solutions that seem futuristic, like a beacon in a dogs collar that opened the gate to a park. The bolder the better since it gets us closer back to earth and figure out what I could feasibly do while working full time.

Everyone starts with a pretty templated approach to a problem when they’re a mobile designer, which is make an app. The path I set on toward is a a general idea that’s FourSquare for dogs mixed with Pokemon Go, where owners check their dogs into parks and others can see whose there in real time.

Building a Schema

You can’t find the sweet spot between two things unless you know everything about each hemisphere. I do this “data mapping” exercise as a way to explore everything that could be an attribute for a topic. Each data point can be later used as piece of information in the user interface later.

Dog Profiles

A profile for making new friends

Your dog is a social animal, put them closer in touch with their social network.

Prioritize Content

Profiles are the easiest, most impactful thing to design right off the bat. The constraints of the data model and context map keep focus on what the user can do, but also helps us think of new ideas as well. A user should look at this interface and know exactly what they’re looking at.

Sketch out ideas

Unless it’s a large corporate project with complicated states/flows, I stick to sketching. A sharpie and a large noteboook allows me to be more creative, fast, and loose with my ideas. During this time I try to focus on creating repeatable patterns for the layout. Along the way I find ideas for future features.

Moodboard Inspiration

I’m a slow visual designer when it comes to something new. I really take my time on getting the information right before thinking of what it’s going to look like. This part of the process takes me a long time to find something that’s stylish and conveys the right tone.

Dribbble is good for finding trendy styles or patterns that may help with the layout and give guidance on styles/trends. Rounded avatars is an example of this. I take this inspiration and head into Sketch to turn my sketches into something with personality.

Visual Concepts

Subjective tasks like this take a lot of time for me, there’s no right or wrong and sometimes it just comes to you. What you’re not seeing are all the times I second guessed myself, blatantly copied a fad, or fought with something simple like text hierarchy. I worked on this very casually over the course of a few months. Below are a few shots of my progression during that time.

Eventually I ironed out a version that was balanced well with iOS native patterns/elements and my own custom feel. I always test a design like this in as many ways as possible; a dog with a long name, multiple breeds, a lot of friends, different colors, and so on. Here’s a few variations of this one design.

When I was incorporating aesthetics into the layout I was playing with different variations in color. Could there be a different color background based the dogs breed, sex, age?

Activity as an engagement driver. The more places you visit and the more friends you make the more distinct your profile becomes.

User Testing

All the flashy, well intended interfaces aside, if people don’t pick up on what it is and don’t see the value in it; it’s useless. When you have visuals you can get a better reaction out of people. I often throw these screens into InvisionApp to make a prototype and show it to people at dog parks for reactions/feedback.

Knowing how to take feedback from users is key here; you don’t want to take every idea you hear as a need to have. Being as objective and stoic is essential to making sure you understand what people are thinking.

Build a Process

After building app after app for years with different types of teams there's one thing I can tell you that's critical: build a process. Create a method that's repeatable and measurable. It creates faster development and gets you to the market much quicker to test your ideas.

An experienced designer looks for ways to cut a project up into smaller bites that everyone can focus on. Below are a few more examples of other sections I used this same process on.

Scalable Design Process

Park Profiles

Know what to expect before getting there

Dog Profiles iPhone

Repeating the process

Following the same exercises above, I move my way through a more difficult section; parks/locations. The goal is to show people a detailed view that gives them an idea of who to expect at the park.

Design Data Model
UI Sketches - Parks List

After a few ideas are down on paper, I bring them into Sketch and start building out a visual style. Here’s a few variations of the park details page where users can see information about a park, whose visiting, and the ability to check in. It took many attempts to balance simplicity and technology.

UI Concepts Visual Design

Eventually I can refine a concept far enough along to address UI states. What does the screen look like when there aren't any visitors? What does the list of friends look like with no friends? How does a user know they're checked in?

Visual Design Variants UI

Onboarding

When a user opens your app for the first time it's critical to make the right impression. These part is more subjective in nature since it involves marketing copy, imagery, iconography, etc. Here's a few versions I went through in the process.

Onboarding Concepts
UI Animated Onboarding

Animation

The web/apps are interactive and static screens don't tell the whole story. I like to hop in and use tools like Framer or Principle to build prototypes that people can use. This is my first attempt.

After putting it into a few users hands and having them use it on their device, I came back and make some improvements. Design is about continual improvements.

UI Animated Onboarding GIF

Zero States

States are a huge element of any application: what does this app look like if there's no parks around me? What if there's 1,000 parks near me? These are zero states I use for when there's no data to be shown contextually.

Current Status (2017)

Bark Park is being refined and tweaked via designs, animations, and back end architecture. At this time there's a few prototypes out there that have been built to test location aggregation, user modeling, and invitation systems. Each of these key features can make/break the experience of the app and I'm looking for help with these as summer 2018 rolls ahead.

At the very least it's a fun project to chip away at, use as a creative outlet, and hope to launch something that people smile while using. It's not an idea that will get anyone rich in itself but I'd like to see it help people have better relationships with their dogs one day.