CASE STUDY
fffinder
The Family Fun app for Portland
This app design connects parents with fun places they can take their kids. Over three weeks this client-driven assignment served as an introduction to the design sprint process and was scoped to deliver a low-fidelity prototype. Its two user flows were aimed at validating the app concept and test its usability. I spent an additional week to develop the branding and a high-fidelity prototype.
Role
Client interviewer
UX Researcher
UI Designer
Usability Tester
Tools
Figma
Google Forms
Miro
Zoom
Otter
Deliverables
Protopersonas
Empathy map
Journey map
User Survey
Card Sort
User stories
User flows
Wireframes
Low- fidelity prototype
Research results
Timeline
3 weeks (+ 1 for high fidelity)
OVERVIEW
The Problem
Parents struggle between a lack of time and the urgent need to find fun things to do with their children who crave attention and stimulation. Especially if they lack a strong, parent network to guide them, parents rely on random google searches which lead to dead ends or provide exceedingly variable results in terms of relevance, quality, comparability.
Audience
Our target demographic is anyone taking care of kids: parents of course but young baby sitters and active grandparents are considered. The client suggested that there be some focus on middle class parents – potentially with a slight skew towards women – between 24-40 years old, with kids 12 years and under, located in Portland, Oregon.
Solution
The fffinder app simplifies the search for fun, family things to do by letting parents specify their children’s age and activity preferences to provide personalized, base results. Furthermore, parents can use a search function, filter by preset categories and arrive at results they can trust because of parent ratings and a comments section.
Hear from parents who live near you about fun things to do rather than doing random google searches.
My Approach
I’m guided by a user-centered design philosophy to make sure that my users of my product will be at the heart of all my design decisions. I pursue my solution using the double diamond process: discover the user’s needs, define what the product needs to solve, develop tested solutions and deliver the final product.
DISCOVERY
Client interview
I kicked off the project by interviewing the client, a recently married infrastructure engineer. He doesn’t have kids yet but is clearly thinking about it. The problem he wants to solve is the difficulty a parent has in coming up with ideas of where to take their children when they don’t have a built-in network of parents to help them. In a nutshell parents lack enough information (that they trust.) We agreed to limit this prototype to one city as a proof of concept.
Story board
Here is a visualization of what the current state of affairs is when trying to come up with fun things to do with a child.
Relax, kiddo! You need to stretch your legs.
Goes to computer to google ‘fun places to go with kid.'
“Argh, this search is impossible. I give up!”
And here is what the client and I are aiming for the app to provide.
Downloads and opens our app.
Finds a park, gets directions, gets in the car with child.
Enjoys time at the park with child.
User Survey
Midway through wireframes, I sought to discover what people rely upon to ‘trust’ the information they find online. I surveyed 21 people about their web search habits.
Key Findings
I explored four types of information that users use to make decisions to determine which they trust or rely upon most:
• star ratings are relied upon by 12:2 (excluding neutrals)
• star ratings generated by users are preferred to ‘star ratings’ by 19:0 (excluding neutrals)
• editor’s picks compare weakly to ‘star ratings generated by users’ at a ratio of 5:11.
• comments section is useful at 15:4 (excluding neutrals) despite the fact that only nine report regularly contributing to the section.
Card Sort
Deeper into my wireframing, my subject-matter ignorance became apparent and when my initial focus on a filtering feature and content creation got fraught by it. Conceptually, it was easy to imagine filtering 200 results into ten, but I still had to create the content and what criteria would whittle it down! So, I gathered three parents to sort the 120 activity suggestions that were generated by five other parents. We arrived at the following 13 categories:
Nature Entertainment
Games Eating
Animals Museums
Shopping Seasonal
Nerdy fun Theme parks
Lessons Events
Get active
Audience Target Analysis
Key psychographics
• Values: good family bonds, healthy relationships, entertaining
• Likes to: book club, watch cable, brew beer, watch sports, travel
• Wants to: eat healthily, live ‘green’, decorate home (nest), book club, garden
Preferred channels
• Email, phone, text.
• Browses social media platforms including facebook and pinterest
Preferred content types
• listen to music on vinyl and Spotify
• reads books (10,000 Doors of January, So You Want to Talk about Race), or watch cable TV (Curb Your Enthusiasm, The Crown).
User Pain Points
The initial client interview and the interview portion of the usability tests agreed on the following frustrations:
• Lack of information from an existing parent network.
• Social awkwardness in efforts to build a parent network.
• Web searches provide information that is frustratingly irrelevant, inconsistent in quality and difficult to compare and assess.
Protopersonas
In order to orient my decision making in the absence of enough time to do user interviews early into a design sprint, I developed the following characters for this sprint. They represent users of our app with different needs.
Carla
“Putting out fires”
• 28 year old licensed clinical social worker
• Works from home
• Married high school sweetheart
• Three-year-old daughter
• Very time-pressed
Goals
• Feed her daughter to make her strong
• Make sure she has enough stimulation
• Get her to interact with other kids
• Spend time with Mom and sister
Behavior
• Does lots of laundry
• Carries a big bag with art supplies, snacks and clothes
• Reads a book each night to son
• Tries to read at night after son’s bedtime
• Pays attention for odd silence in the house
Needs
• New places to make daughter smile
• Child-friendly, go-to restaurant with good food for adults
• Reliable babysitter
• New car seat for daughter
Billy
“Wants to be the ‘cool dad’”
• 40 years old
• Works as a customer rep in construction
• Divorced, with 10 yr boy
• Restoring a classic car
Goals
• Time with son
• Wants to see him delighted
• Wants him to love him
Behavior
• Is in at work 9-6pm
• On his phone constantly with clients
• Researches kid activities for the weekend
• Stops occasionally at the grocery before home
• Goes to gym at 7am 2 days a week
Needs
• Network of other dads for fun ideas
• Restaurants to take son to so doesn’t need to cook when together
• To arrange with wife the logistics of time with son
Journey Map
This tells the tale of a frustrating, three-part search process and social awkwardness.
Opportunities
• Increase relevance of results
• Increase the ability to fine tune results
• Provide the ability to save things that appealed
• Add the ability to connect with people with your same need
DEFINE
User Stories
(CARLA) As a young mother at home with a restless child, I want to find a park (high)
(BILLY) As a divorced dad with my kid this weekend, I want to flag 3 cool things to do (high)
As a parent, I want to rate my experience (medium)
As a parent, I want to read user comments (medium)
As a new app user, I want to sign up for an account (low)
Flow Chart
This initial flow chart would land a user on a home page prepopulated with suggestions based on their stated preferences. It conceived the search function as an option between searching for a specific thing or searching an area.
Sketches
Starting with my notes from the client, I moved to adapting existing search patterns (from DoorDash and Yelp) to this problem. In my second set of sketches below you can see iterations I did on the results detail page which I believe will be the heart of the app, where parents will decide if they want to go there: playing with the placement and size of photos, headlines, ratings, blurb, comments, nearby attractions.
Wireframes
My first set of wireframes laid out the basic flows of my sketches. The landing page was like a personalized selection of ideas based on stated preferences that offered exploration. Then one would search by area and subject to arrive at a selection of pizza options (obviously channeling Yelp and DoorDash).
I ran into trouble trying to as I attempted the filtering function. After making up all the content this far, I felt uncomfortable what I was making up for this screen. So that prompted me develop other pages instead, hoping to approach the problem from a different angle. The time pressure to get to user testing made me focus on creating a workable prototype that would test the ability of users to search and to ‘favorite’. This required learning horizontal and vertical scrolling techniques plus some basic animation while working on deadline.
Insight
While moving ahead full speed with wireframes, I hit a wall in my effort to create the filtering feature to narrow the number of initial search results because it is hard to filter without knowing the parameters of the possible results: pizza and burgers icons from DoorDash were not transferring easily! This is when I doubled back in my process to add research that I didn’t think I had time for in what might have been a one-week sprint.
What started as a target of “filtering for relevant results” became a question of “what is ‘relevant?’” Or from the view of the parents, “what makes a person trust the results of a search?” The ultimate value of any results our app could provide depends solely on whether parents feel confident in them.
I used a survey to ask potential users what made them trust results they get online. And I did the card sort of 120 activities to make sure the app aligned with what parents are thinking.
Usability testing
Hand-drawn paper prototype
I developed a hand drawn prototype with the hope of testing it in person but the pandemic complicated that.
Low-fidelity prototype
Meanwhile I was moving forward in Figma connecting my wireframes into this low-fidelity prototype to employ for testing:
Users tested
I recruited five people among my classmates and family. Meeting remotely, I used zoom to test my prototype and tried out Otter.ai for the first time for transcription purposes which helped greatly.
Tasks
Here are the main work flows I tested for.
1) Finding a park that is within two miles of 123 main St.
2) Flagging an activity for later reference, then find that flagged activity.
Also, I employed a hybrid test approach by including some interview questions to gather more data:
• Sharing their current method of searching for places to go with their kids.
• Naming places they have recently taken their kids and places their kids long to be taken to; this was intended to feed the card sort exercise.
Overall experience during testing
There was great enthusiasm for the app concept -- parents considered it a nice improvement to their current search methods. Testing went smoothly because the users were generally comfortable with the app and the tasks being fairly achievable. We discovered some bumps in the road when mental models didn’t play out as expected during searching. This all provided very actionable steps for the next sprint.
Summary of findings
• Success rate on Task 1 (find a park near an inputted address) was 100% achieved, consistently medium difficulty.
• Success rate on Task 2 (save a result and find the save) was 60% achieved, averaged a medium plus difficulty but varied.
• The separate ‘where’ and ‘what’ searches led to some confusion after they were used. And felt like an extra step.
• There was confusion about the difference between ‘save’ and ‘fave’
• The use of the shopping cart confused people: ‘I’m not buying anything.”
Recommendations based off of testing
• Merge ‘where’ and ‘what’ into one search bar
• Incorporate new content categories
• Develop the account creation process (i.e. preferences vis a vis any search refinement)
DEVELOP
Mood board
Parents are surrounded by products designed for children. Given the target audience we are serving is adults, I looked for inspiration in art that possessed a childlike joy yet had a sophistication that was more appropriate for adults. The sculptor Alexander Calder’s work and the linens of Marimekko really capture that for me in their usage of color and shapes.
Brand name
I brainstormed ideas regarding the key themes surrounding my app:
KIDS, tots, rugrats, kiddos, children, child, youth, tyke, juvenile, young’un, spawn, squirt, brat, kiddie, babe…
FAMILY/PARENTS, tribe, clan, people, kin, brood, blood…
FUN, play, romp, frolic, blast, rollick, riot, entertainment, goof around, good time, games, delight, caper, lark, recreation, joy, delight…
SEARCH explore, hunt, quest, probe, chase, find, pursuit, scout, seek…
ENJOY love, like, relish, fancy, savor, revel…
My initial app name ideas were an attempt to create a memorable fusion those themes:
Kid fun
Kids’ town
Kids a gogo
family fun finder
kid fun finder
frolic
Rollicker
fun quest
good family fun
funtastic
lark
fun scout
and the winner is... fffinder.
As much as I liked frolic and rollicker, I kept returning to ‘family fun’ as a concept and that the fact that this was ultimately a search app. The three f’s was for memorability as well as keeping the name short and snappy.
Style Guide
DELIVER
High fidelity prototype
Putting the branding on the prototype and incorporating changes that were driven by the first round of user testing led to this iteration.
Learnings
Target pivot: My target started as developing a search function and a filter function (since ‘building an information base’ and ‘decision speed’ from the How Might We phase seemed less important.) Subject matter ignorance during a sprint made it difficult to make key decisions about what was important to users.
• Listen to the strategic objectives of the client: Their desire for parents to be connected to activities they trusted pivoted us exactly to the How Might We’s we had ignored (even as we undertook the survey and card sort.) Ironically, parent ratings and comments combined with standardizing the information for the results was the best filter that parents could have compared to their existing search methods online.
• The benefit of failing fast and early: Though my pride was hurt by chasing the wrong target, I have a huge appreciation for how much money at an enterprise level would be saved by learning what I did in one short sprint compared to moving in the wrong direction with a large team for any amount of time.
• There’s tension between freedom and constraint in a search: If one knows exactly what one wants and gets there quickly, then great. But unrestricted results have the possibility of serendipity and a sense of exploration when you stumble on something you didn’t know existed.