Backyard

Taking the work out of finding play:
A simplified park locator for families with children

THE PROBLEM

Get a group of parents with young children together, and inevitably, the conversation turns into a tip-sharing session: where can families enjoy the outdoors without traveling too far from their homes?

Google and Yelp are the current go-to search engine powerhouses, but combing through their results has become a tedious affair. Oftentimes, desired details are still missing despite the multitude of recommendations and reviews.

THE SOLUTION

Backyard solves the problem of information overload by streamlining the search process and simplifying the selection between kid-friendly spaces.

Parents are back in control! With Backyard, parents can specify their children’s ages, along with park and playground features they are looking for. From there, Backyard provides a customized display of wonderful parks, some that are loved locations and hopefully, some that are fresh finds. With Backyard, families can explore anew and choose what to go back to, to foster a love of the outdoors together.

THE RESEARCH

User Research


I created a user research survey to get to know my perspective users and what their habits were. My questionnaire focused on:

  • How often parents took their children to parks and playgrounds;
  • Why they visited these places;
  • What their most important considerations were when selecting a park;
  • What their typical approach was to find a suitable park; and
  • What they liked or disliked about their current search process.

Results were gathered from 70 respondents across social media and online parent groups in the Bay Area.

I summarized the data and identified common themes for user motivations, frustrations, and considerations:

  • The vast majority took their children to parks 1-2 times a month for informal playtime;
  • Proximity, safety, playgrounds, and parking were the most important considerations;
  • ¾ of respondents liked to share details about parks they enjoyed with others;
  • The majority used Google and Yelp and praised their convenience, speed, and availability of information; but just because a lot of information was available did not mean it was all there, or that it was all correct;
  • Respondents also complained that filters didn’t allow for enough customization and that search results were overwhelming to navigate through.

It was clear from these survey results that parents wanted a search tool that prioritized child-friendly details and specific feedback, and organized everything in a clean, easy to read display.

Personas


I conducted one-on-one interviews with a number of my survey respondents to dig deeper into their responses and hone my understanding of the problem and my potential solution. From these interviews, I identified three major user groups, which I developed into three personas.

The preference for customization and detailed information was universal. I also identified various features (related to social media and third-party transactions) for implementation in future phases of development.

Competitive Analysis


From my survey and interviews, I realized that if parents were mostly using Google and Yelp, I needed to understand what viable competitors existed for a playground-specific mobile app, where these competitors were succeeding, and where they were falling short. I completed a SWOT analysis of five competitors: a mix of mobile apps, mobile sites, and web sites, each claiming to help families find playgrounds around their location. Ultimately, looking at existing user reviews, testing out the apps, and examining screenshots in detail helped me identify key areas that I could build upon and improve. Most surprisingly, an app that I noted to be crudely basic was highly rated for its functional, no-nonsense utility; this was a good warning to check my biases.

User Stories


After compiling a lengthy list of tasks that users would want to accomplish with my product, I prioritized those essential for a minimum viable product (searching, filtering, viewing, reviewing) from the nice-to-haves (sharing, socializing, reserving).

User Flows & Sitemap


I converted the primary users stories into user flows to visualize how the user would accomplish those stories with my product. This took several iterations as I experimented with whether or not to require users to sign up prior to accessing specifics features or all of the content. I returned to my SWOT analysis to assess my competitors’ approaches and tested apps from indirect competitors, including Foursquare, Hotel Tonight, and ChefsFeed. From this, I concluded that providing a delightful introduction and allowing exploration of basic features would persuade users to sign up to continue the experience with additional features.

I followed up my completed user flows with a sitemap to solidify the app’s navigation structure and content hierarchy, and to act as a reference point as I began to design the actual product.

BRANDING

The brand identity and communication of existing competitors seemed to rely on one of two alternatives: a childish scheme overloaded with colors and imagery, or a starkly functional canvas. From my interviews, I felt this product needed a balance between the two, simultaneously capturing a sense of welcome and delight in tune with feelings of serenity to give the users a calmer, straightforward experience.

Typography


Poiret One’s sans serif displays a fresh, light form. Its geometric letters are sleek and simple while retaining some humanistic nuances for style, conveying a little bit of whimsy to remind users of a child’s handwriting without overpowering the elegance associated with modern products. Karla’s popular and quirky sans serif with open counters provide a more structured counterpart that is still legible and friendly, allowing users to quickly scan and locate their desired information amidst blocks of text.

Brand Story & Logo


The product’s central premise was to locate outdoor play spaces that were close by, safe, and enjoyable for children, not unlike the backyard of one’s home. The word “backyard” also came up in several conversations between parents that I witnessed which inspired this project - how, given today’s housing market, families often cannot afford homes with a yard for kids to roam and explore, but they still want to encourage their kids to play in nature and learn to socialize; or how parents often came across public playgrounds near their homes on random walks that they hadn’t realized existed there. I wanted to capture the feelings of proximity and exploration in an open, natural, familial space, and “Backyard” was thereby born.

From there, Backyard needed a logo to communicate the product’s function, key message, and personality. My design started as literal park benches and trees and evolved into a simple line illustration of a leaf-cum-magnifying glass to convey the product’s simplicity with some whimsy.

Colors


Backyard also needed a color palette to support feelings of serenity while evoking typical associations with the outdoors. The color inspiration came from a wondrous view of green grass meeting blue sky as I sat on a park bench during some informal field research in my neighborhood.

EXECUTION

Backyard transformed from a paper prototype to a clickable prototype through rounds of exploring visual design, conducting usability testing, and iterating on user feedback.

Paper Prototype


I began with a pencil and paper to quickly sketch a low-fidelity prototype, focusing on providing opportunities to quickly narrow down search results and on minimizing the complexities of pinpointing family-oriented details. Rather than reinventing the wheel, I conducted multiple pattern analyses to extrapolate key elements of search, filter, view, and edit flows that met my criteria for convenience, speed, and organized simplicity.

Using paper prototypes allowed me to draw up several concept alternatives for the search, view, and edit screens, upon which I conducted basic user testing and preference tests. Feedback pointed me towards navigation and content organization as the top user priorities to keep in mind as I turned to Sketch to begin creating wireframes.

Low-Fidelity Wireframes


I wanted to test which search view users would gravitate towards, and which categories of amenities users would click through. I also wanted to see how users would navigate through the entire process from search to review. I recruited participants to be recorded in in-person usability tests as well as a video recording through TryMyUI. In-person participants were guided through interactive wireframes built in InVision using a test script developed from the foundations provided by Steve Krug.

Feedback generated from the tests of my grayscale prototype centered on a few key takeaways, which informed my top action items:

  • Refine and build filter categories into an onboarding process to highlight the product’s kid-friendly purpose;
  • Clarify distinction between informative and action elements on selected park screen; and
  • Incorporate a feed to emphasize differences between bookmarking and checking in, re-format for consistency, and make adjustments to the main navigation accordingly.

High-Fidelity Prototype


Backyard came to life as I added color and iterated on my design to create a high fidelity, clickable prototype, which I then used to conduct a second round of usability testing using a slightly revised test script.

Using feedback from six test participants, I refined my prototype once again:

  • I improved existing coach marks explaining the bookmark and add visit functions given users’ difficulties in understanding and exiting the instructive modal.
  • I revisited the Add a Visit flow, incorporating buttons for users to leave a review or correct information so as to highlight the calls to action and reduce barriers to completing these tasks.
  • Because time and accuracy were equally important to users, I overhauled the Review screen after exploring how to generate accurate ratings using yes/no questions, a checklist, or behavioral data gathered as a whole.

KEY LEARNINGS

In creating this mobile application, I was challenged by the breadth and depth of information that users wanted for a product that would work like Google and Yelp, but better. From my research, current competitors appear to have conflicting brand identities and have not fully utilized data gathering and user testing to appeal to a broader demographic.

Working on this project also taught me the importance of organizing content to fit the needs of the specific user. Convenience and speed were real demands born out of parents’ demanding real-world needs, and every little detail that can shred seconds off completing a task is crucial.

With more time, I would continue to iterate on the user Profile screen to enable Backyard to further develop its social networking capabilities and build a foundation for potential e-commerce partnerships.

CODING

Coming soon!