Haley House Mobile App
Haley House Mobile App
Haley House Mobile App
Haley House Mobile App
Haley House Mobile App
Haley House Mobile App
Project Overview
Project Overview
PiggyBack Network Mobile App
Transitioning an existing website for a parent-driven carpooling service to an intuitive native mobile app
Project overview
PiggyBack Network is a parent-driven carpooling solution that helps local parents match, meet, and schedule shared rides for their active kids to help make life a little easier.
Project objective
This project had a timeline of three weeks in which the goal was to transition the current web app to a native mobile app design, working directly with the co-founder and CTO of PiggyBack Network. Throughout this sprint, it was also crucial to uncover current pain points on the website and optimize the process of signing up and requesting / offering rides to create a better user experience.
Timeline
3 week sprint
My role
Team Lead
Product Designer
UX Designer
Collaboration
PiggyBack Owners
Stakeholders
3 UX Designers
Tools
Figma
Figjam
Adobe Photoshop
Notion
The process
Persona
Problem Statement
How Might We's
User Flows
Secondary Research
Stakeholder Interview
Contextual Inquiries
Competitive Task Analysis
Competitive Feature Analysis
Comparative Analysis
Child Safety Research
Sketches
Mid-Fi Wireframes
Mid-Fi Prototype
Usability Testing (Round 1)
Design System
Hi-Fi Wireframes
Usability Testing (Round 2)
Hi-Fi Iterations + Prototype
Next Steps + Recommendations
The current website user flow
After speaking with the PiggyBack stakeholder about assumptions and pain points users were experiencing from the current website, it was important to do a deep-dive into the current flow users were being sent through to better understand where though pain points may exist.
This flow will be referred to as the 'Get Started' funnel which is shown below.
The 'get started' funnel
Sign Up
Add Locations
Add Routes
Offer Rides
Request Rides
Takeaways from the current website?
Conducting contextual inquiries helped reveal current pain points users had with the 'Get Started' funnel. 4 individuals who were unfamiliar with PiggyBack Network were observed and the findings were put on an affinity map to create insights.
Four key takeaways were created from these findings.
1
Safety & privacy concerns
Users’ safety and privacy concerns were not eased due to the way in which information was prioritized on the website.
Because of this, first-time visitors became quickly wary that the information they needed to feel comfortable sending their kids with other drivers was hard to find on the current website.
2
Functionality issues
There were a few areas where users expected different functionalities to occur based on the current copy and titling of the navigation, buttons, pages, etc.
For example, two users clicked “Get Started” to sign up for the app, but didn’t realize they needed to click that same “Get Started” button after signing up to start the process of entering their locations, routes, and offers.
3
Naming confusion
All of the users got confused about how to name their locations, routes offers, and requests when prompted to do so.
This was largely due to a lack of suggestion prompts
4
Too many buttons
There are too many buttons at the bottom of the Locations, Routes, Offers, and Requests pages which caused confusion among users about which buttons to click in the process.
Competitive analysis
For our competitors, a task analysis and feature analysis were conducted using the apps Uber Teen, Zum, HopSkipDrive, and Kango as they all offer similar ride-share services for children and teens, and therefore compete with PiggyBack for the same customer base and market share.
After analyzing the steps it took to book a ride through each of these apps, there were two main key takeaways.
.png){kind=logo}
Key takeaways
1
All of the apps, except for PiggyBack Network, have very similar steps in a similar order, and there appeared to be an industry standard for the process of signing up, scheduling a ride, and structuring payments.
2
PiggyBack Network is the only app that doesn’t create a separate profile for child and teen riders in addition to the adult profiles.
View thecompetitive feature analysis
Comparative analysis
The comparators selected were the babysitting apps SwishBoom, UrbanSitter, and Sittercity since, like Piggyback, all require a background check for their users.
The primary focus was the account and profile creation processes, when and where these apps conducted background checks, and how they went about collecting the necessary information from users.
Key takeaways
1
PiggyBack is actually the only app that doesn’t require its drivers to pay for their background checks, which is a HUGE incentive for drivers to complete the application.
2
All of these apps had separate account and profile-creation processes for a babysitter and parent. This was also the case with our ride-share apps which required a separate driver and parent sign up as well.
This was definitely something to keep in mind as we moved forward into the design phase.
Who is our target audience?
The first step in the design phase was to create a proto-persona to represent the target users of PiggyBack Network. Rosie was created through target user information provided by our stakeholders, combined with secondary research that focused heavily on current parent/commuter statistics.
With a better understanding of Rosie’s day-to-day, needs, wants, goals, and frustrations, it was time to define the problem that needed to be solved.
Defining the problem
Problem statement
Rosie needs a simple and safe mobile app where she can request rides from and/or offer rides to others in her community in order to reduce the amount of time she spends transporting her children to their schools and events.
How might we
How might we craft an onboarding and request/offer experience for Rosie that is succinct, informative, and in line with industry standards?
The pivot point
With the problem statement and how might we defined, the next logical step would be to create a user flow to map out how Rosie would navigate through the app. This became a bit more complicated due to conflicting information from our research and the business wants/needs.
Need to test the current flow
There was not enough information to fully determine if users would have a better or worse experience going through the “Get Started” funnel in a mobile format.
PiggyBack wants the current flow kept the same
PiggyBack stakeholders prefer for offers to be made at the same time as requests to encourage reciprocity; however, our Comparative Analysis showed that the industry standard is to divide up the process for riders and drivers.
No storage of minor's personal information
PiggyBack had several constraints within the current web app that conflicted with our Competitive, Comparative, and Secondary Research. For example, PiggyBack prefers to not store a minor’s information in their database, but our Competitive Analysis with other industry-leading apps showed this feature may not be avoidable
The only way to know was to test it!
The decision was made to test the current “Get Started” funnel in a mobile app format and see if it was even possible to move forward without implementing some of those large changes stakeholders were wary about.
The resulting user flow was an optimized-for-mobile version of the “Get Started” funnel from the website
From sketches to wireframes
That optimized user flow then transitioned into sketches from a design studio where each team member drew their idea for the app design, then a final design was created based on the best features and layout.
Those sketches were then turned into mid-fi wireframes which were prototyped and used for the first round of usability testing.
Mid-fi wireframes + prototype
_gif.gif)
Mid-fi usability test results and hi-fi updates
It was time to put those mid-fidelity wireframes to the test with 3 users who were already familiar with the PiggyBack platform, and the feedback received was clear.
1
Separate requests and rides
“I would probably never request a ride and offer a ride at the same time. Those are two very different things.”
- Debbie
Which means Rosie does, in fact, prefer for the Requests & Offers functions to be separate so she can do one or the other at any given time.
Mid-fi
Hi-fi update
2
Add child profiles
“[Making a request] should start with a profile for each family member instead of jumping right into the details for a specific ride."
- Sabreena
This also confirmed that Rosie actually prefers to enter her children’s information into the app so their schedules are easier to manage, and the driver is aware of who they are picking up.
It was important to be able to include information like the child’s name, age, common locations, booster seat needs, and front-seat vs. back-seat preferences – all of which are common preferences and information that are required by other apps that involve children.
Competitors
Hi-fi update
3
More detailed onboarding
"Maybe give a tour of the app from the home page - Arrow for where to create an offer.. arrow for where to create a request, etc..."
- Sabreena
And finally, because she no longer has the website or walkthrough YouTube videos for supplemental information on how to complete the "Get Started" funnel, Rosie now needs a better description of the overall purpose of PiggyBack, its approach to safety, and how each of the features within the new mobile app function.
Current website
Hi-fi updates
Hi-fi wireframes + prototype - version 1
PiggyBack design system
When moving our of mid-fi wireframes it was important to develop a well thought out design system containing components, variants, and other necessary design elements to move more quickly into the hi-fi design and prototype.
Hi-fi usability test results
The results from the second round of usability testing were extremely promising, with an overall System Usability Score of 81.87%.
Rosie really liked…
-
The simplicity of the onboarding.
-
The clean, minimal design.
-
And the ability to save her routes so that she can quickly make a request or offer in the future.
Naturally, there were some areas that could still be improved as well.
Rosie still wants...
High priority
To be reminded that she had an opportunity to meet or chat with a match when requesting or offering a ride, before that ride is confirmed
An even simpler functional onboarding
Low effort
High effort
A place to learn more about the Points System
For the opening onboarding to swipe in addition to having the option to click "next"
An opportunity to learn more about PiggyBack's safety measures
Low priority
...ALL of these changed were incorporated in the hi-fi iterations
What are the next steps?
The mobile app is starting to take shape and the feedback from both users and stakeholders was incredible. To keep the momentum going as this project was handed off to start being built, there were several next steps and recommendations that would help improve the current version and the next versions immensely.
First, while continuing to build out the app and full process, it is extremely important to finish building out the Points System and Safety Info pages to give more clarity on the process and focus.
Many questions and concerns regarding these two features were continually brought up by users throughout the design process, and it is crucial to the business to address as many of those concerns as possible.
Safety and points system development
In-app background checks
The second priority is to explore possible app integration for the mandatory background checks through Checkr or other platforms.
Users are currently having to leave the PiggyBack app in order to complete their background check applications. It is not only best practice to keep users in the app to reduce bounce rates but also falls in line with the way the majority of the competitors currently handle administering their background checks.
Focus on accessibility issues
Finally, it is highly recommended that PiggyBack explore color contrast to make the current color scheme more accessible.
Feedback from Contextual Inquiries illuminated several pain points users were having with the contrast and legibility when interacting with certain areas of the website. This led to testing the accessibility of the current website, revealing that the current green and orange do not meet accessibility standards.
