RACHAEL HYLAND
Example Hi-Fi screens I created of the onboarding flow and other initial screens.
Pet911 is a mobile-first website that has been reuniting people and their pets since 2017. Next on this company's to-do list is reaching a wider, more international audience by creating their own app. Their main competitors are other lost and found pet services and social media platforms, with the latter being more popular. To lure users away from the "one-stop shop" of social media, my team created streamlined, appealing app flows that integrate with social media.
DURATION
1 month (40 hrs total)
(Feb - March 2021)
PROJECT INFO
Freelance project
Team of 3
TOOLS USED
Sketch
Figma
MY ROLE
UX Writing, UX Research, Sketching, Usability Testing and Mid-Fi Wireframing
Defining the Challenge
The Challenge
Pet911 is a website that enables users to post lost and found pet listings. It relies on optional paid services that can boost a pet's listing on social feeds and/or notify area residents and shelters of a lost pet for the majority of its revenue.
Mission:
-
Create an app based on the existing website
-
Gain a wider user base via the app
-
Increase the usage of paid services on the app
Issues:
-
Existing website contains usability issues
-
Website is entirely in Russian and designed for Russians
-
Clients want to create a generic template that could be adapted to any country's language and cultural norms w/o user research
Our Solution
As our time for this project was limited, we couldn't build out an entire app as the client had first requested. So, we honed in on the website's most important processes: posting lost and found pet listings.
These processes also happened to be where the core function of the website, posting listings, and the main revenue generator, paid services, intersected.
Our solution was to create two English-language flows informed by the American pet market. We chose this market as we were the most familiar with it and hence felt we could serve its users most effectively via user research as opposed to creating a generic template that wouldn't rely sufficiently on user research.
Anthony Tran on Unsplash.
Project
Timeline
Week 01
Define
Project Plan
Research Plan
Week 02
Research & Analyze
Week 03
Ideate & Test
Heuristic Evaluation of Website
Competitive Analysis
Personas
User Stories
Lo-Fi Sketches
Usability Testing
Week 04
Design & Evaluate
Mid-Fi Wireframes
Final Presentation
Define
Deliverables
Project
Plan
Research
Plan
Understanding
the Problem Space
In our first video call with our clients, the founder of the company and his assistant, we endeavored to understand the impetus for creating the company, any user research they had already conducted on demographics and existing site usability issues, their goals for this project and expectations of us and their preferred mode and frequency of communication moving forward.
Using this information, we formulated a Project Plan and Research Plan to keep us accountable and on track moving forward as the work we had ahead of us was significant while our timeline was short.
Research & Analyze
Methodologies
Heuristic Evaluation
Competitive
Analysis
Desk Research
Secondary
Uncovering usability issues with heuristics
To create two successful app flows for posting listings, I analyzed the existing website for usability issues using heuristic evaluation. This was an important step in the research process as we would be using the website as a template for creating the app flows and wanted to improve upon the existing website's processes rather than reproducing its issues. We chose heuristic evaluation over other methods because it was a relatively efficient way to analyze the existing website in detail and discern the root of some of its usability issues. To view the table below in more detail, click here.
By analyzing the listing flows according to 10 Nielsen Norman Heuristics, I discovered the issues we needed to resolve, which included the following:
-
Lost and found pet flows weren't separate or distinct
-
The emotional state of someone who has just lost a pet is distinct from that of someone who has just found another's pet. This consideration alone should motivate us to meaningfully differentiate these flows.
-
Paid services section was chaotic and confusing
-
Six different options for paid services were offered, which weren't differentiated well from free services.
-
Recommended services were at the end of the list.
-
Recommended services were selected by default, effectively forcing the user to pay for these services.
-
If the user managed to find the "post for free" link, despite its lack of visibility, they would then be presented with two pop ups in a row.
How other people did it better #goals
Next, we analyzed several direct and indirect competitors to try to identify intuitive solutions that we could implement in our own app flows. While analyzing the existing site was helpful in determining what current features were working/not working, it didn't provide us with much inspiration for new features and strategies for tackling common problems and a broad sense of the competitive landscape. Therefore, we set about analyzing our competitors.
Apps we analyzed:
-
Pawboost
-
Finding Rover
-
Petharbor
-
Dogo
With this analysis, we focused on these apps' ease of use, aesthetic choices and accessibility.
We took notes on what worked and what didn't and devised action items we would consider in the creation of the Pet911 app flows.
-
Facebook
-
Nextdoor's lost pet feature
-
Offerup
Direct Competitor Analysis Takeaways
Pros:
-
Vibrant Visuals. An energizing and hopeful yet accessible color palette, cute imagery and clear icons.
-
Streamlining the Experience. Making certain fields optional and limiting the number of options so that the experience is less mentally taxing and the flow is streamlined.
-
Enhancing Control. Ability to edit a listing after it's been posted and go back at any point in the flow to enhance users' control and flexibility.
-
Location, Location, Location. Allowing coarse locations rather than specific locations to enhance user privacy.
-
Communication is Key. Helpful and clear copy that makes tasks easy, gently nudges users to complete tasks that will make their lives easier in the long run and humanizes the deep bond between people and their pets.
Cons:
-
Freedom & Flexibility. Users aren't always informed as to where and when their listing will be posted and these apps don't give them the freedom to choose other platforms to post to.
-
Making Progress. A progress indicator is needed so that the process never feels overwhelming or time-consuming.
-
Privacy is the Best Policy. The user isn't always provided the option to type in their location if they would prefer not to give the app access to it.
-
Call Me. Make certain the user knows how they can be contacted in case someone finds their pet.
-
Keep it Simple, Stupid. Avoid making the process overly long and confusing by restricting each screen to one task or a small number of related tasks and keep the info required to the bare minimum.
Indirect Competitor Analysis Takeaways
Pros:
-
The Perks of Being a Social Butterfly. The social aspects of the social networking platforms we studied were appealing as you could engage in other activities while on the app and felt sure that your post would reach more people who could then react to, comment on and share your post.
-
CTAs, Buttons and Fabs - Oh My! Easily noticeable and simple to use CTA buttons and FABs make the process more intuitive. On a related note, pairing icons with text creates more clarity and accessibility for the user.
-
Map it Out. Providing default maps where the user can drop a pin in addition to a search bar makes finding your location easy.
-
You Sure, Bro? Clear and appropriately timed permissions requests make the user more likely to accept them. And, if they deny them without thinking, a follow-up pop up that asks them "Are you sure?" makes them more likely to accept and instills trust in the user.
-
Pay to Play. Paid options do not initially mention price and are devoid of language that refers to paying, payment, etc. so that users are more likely to click on these options and stick around when they do.
Cons:
-
Cut Down on the Noise. Social media platforms are devoted to many other functions besides posting lost and found ads, so oftentimes there is a lot of noise and burying of these features so they're difficult to find and use.
-
Give Me the World. Users aren't typically able to post from any screen, which cuts down on a user's efficiency, flexibility and freedom.
-
Give Me All the Deets. Because social networking apps aren't exclusively devoted to lost and found pet listings, they sometimes skimp on information required in these posts; for example, there is no specific date or contact info section.
-
Easily Overwhelmed. Cognitive overload easily occurs because the user is overwhelmed by the sheer number of features and groups within the app and may not easily understand which group to post in and how to appropriately word a post within that group, which also results in a lot of duplication of work.
On a Treasure Hunt for Data
To get a better sense of who our users would be, we conducted desk research on the demographics of our potential users. Because we now understood the existing product (i.e., the current website) better and its competitors, it was time to investigate potential users so that we could build app flows that would best serve their needs while achieving our clients' business goals of an expanded user base and more revenue from paid services.
In addition, we reviewed the analytics data the client shared with us on the usage of their existing website.
Although our clients wanted our flows to be aimed at an international audience, due to the huge variety that exists in cultural norms country to country, we felt it would be wiser to concentrate on a pet market we were already familiar with: that of the United States.
We hoped that, by sticking to what we knew, our product would serve our potential users better. In addition, data on "international pet ownership" is much more difficult to find and more general in nature than research based on a particular country, as we found out while conducting research.
Desk Research Takeaways
The (tiny) gender gap.
According to US data, men and women have almost identical levels of dog ownership: 54% for men and 48% for women. As for cat ownership, 40% of cat owners are men, whereas 38% are women (1).
Age is more than a number.
The average pet owner in the United States is 47 years old (2).
Millennials or spendthrifts?
Although many millennials in the US haven't reached their peak earning capacity, they are significant spenders on pet products and services and make up about 27% of pet owners (3).
Rolling in it.
People of all income levels own pets; however, in the US most pet owners reported higher household incomes than the total US household population (4).
Lost, dazed and confused.
These are the most common ways pets get lost, according to US-based data: 1) Open doors and gates, 2) While traveling, 3) Mistaken for a stray, 4) Startled or scared and 5) Illness or injury (5).
Lost and found.
According to a study of 1,015 participants who had owned a dog or cat within the last five years, about 14% of dogs and 15% of cats strayed at least once during those five years. Out of that number of lost pets, 93% of dogs and 75% of cats were recovered (6).
An international enterprise.
Argentina, Mexico and Brazil have the highest percentage of pet owners worldwide, followed by Russia and the US (1).
Conceptualizing Our Target Users
With our research phase in the rearview, we decided to conceptualize our users in the form of two personas so as to concretize our user vision and to create an artifact to refer to while designing and articulating our vision to our clients. We figured that two users would better illustrate the broad appeal of a product like the Pet911 app as well as the realities of pet ownership.
As we'd learned while conducting our research, millennials are a sizable minority of pet owners and are willing to spend a considerable amount of money on their pets.
Our second persona would be a GenXer, the more common demographic user of a product like Pet911, who is often willing to spend a significant amount of money with such a product as they tend to be less tech savvy than their younger counterparts.
Insights
At this stage, we drew up a list of our major findings from the define and research phases of this project. We knew this would be important to refer to while creating our wireframes and explaining and justifying our design decisions in our final presentation to our clients. Our findings were as follows:
-
Pet ownership is widespread and losing a pet is a common problem. Pet owners are a diverse group. Pet911 needs to take into account the diversity of its potential users to better meet their needs.
-
Pet911 needs to anticipate users' needs and reduce cognitive load by creating an encouraging platform that has the following:
-
An aesthetically pleasing design with accessible, consistently designed elements
-
Messaging specific to the user’s journey and emotional state (i.e., separate lost and found flows)
-
A clear posting flow so that users can achieve their goal of posting a listing quickly with minimal effort
-
Pet911 needs to give users a sense of control throughout the listing process by doing the following:
-
Helping users understand what steps to take, why they are taking them and how to take them
-
Control over their privacy and preferences
-
A clear indication of where they are in the process
Ideate & Test
Methodology
Lo-Fi Sketching
Usability Testing
Ideation: Lo-Fi Sketches
At this point, we used the insights gained from research and synthesis to begin ideating via a Crazy 8s exercise, the ideal method for creating a wide variety of solutions in limited time; then, we selected the most promising ideas and began creating lo-fi sketches based on them.
Found a Pet Flow
Lost a Pet Flow
Usability Testing
Next, we conducted three, in-person moderated usability tests to determine these users' overall reception of the flows, their ability/inability to complete the flows easily and quickly and any other suggestions they had to improve them before presenting the final flows to our clients. We conducted these tests with participants between the ages of 30-69 who have had experience as pet owners and/or finding pets that belong to others. Our test participants were recruited amongst friends and family. We asked each participant to perform the entire lost and found pet flows via our lo-fi sketches.
This is an optional onboarding flow to reassure users with our mission statement (1), a description of the listing process (2) and a cute illustration paired with encouraging statistics (3).
The "Found" flow begins with the where and when of how you found the pet because we reasoned this information would be more important than the pet's individual details for someone unfamiliar with the pet.
To account for a variety of realistic use cases, we gave users the option to select "with me" (map), "at a shelter" (where you can type in the shelter's name) or "still on the run" (map).
In this flow, the "take a photo" option appears above the "upload a photo" option to account for the more realistic situation of taking a photo of a pet you've just encountered for the first time, while still giving users flexibility if they already took a photo.
To encourage users to select paid services, we used positive copy that frames them as helpful "boosts" and avoids words like "pay, paid and payment."
We reasoned that a person who had just lost a pet would be focused on the individual pet over the "lost event" because of their emotional attachment to the animal, so we began with the "photo" section.
Some users expressed puzzlement with the "take a photo" option. However, in tests with older users, we noticed some confusion with the process of selecting a photo from their gallery - it would be far easier for such a user to take a photo of a printed picture or a flyer.
Although we received pushback from our clients about adding the pet's name because of a cultural perception that knowing a pet's name makes it easier to steal him/her, we added an optional name field because not doing so would appear cold and unnatural in markets like the US.
Design & Evaluate
Deliverables
Mid-Fi Wireframes
Google Slides Presentation
Designing Mid-Fi Wireframes
Testing the sketches gave us valuable insight into usability issues that we could solve in our mid-fi wireframes.
We created a synthesis document outlining the specific issues and then ideated solutions we could implement in the wireframes.
Onboarding
Original
-
Interface is overly dark, which doesn't give users a hopeful feeling and isn't accessible
-
The brand doesn't have a cohesive, unique visual style because there is no logo or distinctive typography
-
Search field isn't demarcated from the background, making it difficult to notice and use
-
When you click on one of the CTA buttons, the action brings you to a location lower down the page rather than to a new screen
-
Copy is cold and statistical, doesn't give the user a feeling of warmth, friendliness or hopefulness
Our Version
-
Onboarding aims to reassure distraught users that this app is trustworthy and effective
-
Layout is simple and open with a clear CTA
-
Short, clear description of the listing process prevents users from feeling overwhelmed. Copy is always friendly and helpful
-
Users can completely bypass the flow if they wish by tapping the "x" button
-
Three button scroll establishes transparency with users as to the length of the onboarding flow
Account Creation
Original
-
Redundancy: two different screens ask, "did you find or lose a pet?"
-
It's unclear that users must select the "cat" or "dog" button
-
There is no progress indicator
-
The lost and found flows are clearly interchangeable (as is evidenced by the placeholder text, "date of loss/finding")
-
Many dissimilar tasks are grouped together on one screen, which may leave the user feeling overwhelmed and may lead to drop off
Our Version
-
Home/posting screen is simple and easy to use, with only three elements in the bottom navigation and clear CTAs
-
Steered clear of "blaming" a user for a lost pet and instead used the word "missing" to refer to such a pet
-
We updated "I want to help," which was in our earlier lo-fi sketches, to "I want to volunteer" for maximum clarity
-
Our clients insisted that we add an "account creation" screen so that users' data could be saved in case their posting flow was interrupted
-
Ensured that lost and found flows were completely separate and that there was no redundancy in the flow
Type of Pet
Our Version
-
We improved upon the original by making "type of pet" a clear CTA
-
We also improved upon the original by including only one task per screen or very similar tasks grouped together on the same screen so that the flow was more logical and we could avoid inducing cognitive overload
-
We employed a progress bar so that we could avoid overwhelming the user, the user would feel in control of the process and there would be complete transparency as to how much has already been accomplished and how much of the flow remains
-
User has control and freedom at every step of the process with the addition of a back button and "x" button
Add Photo(s)
Original
-
Again, the absence of a progress indicator makes it difficult for the user to judge where they are in the process
-
Many different tasks that are not logically related are located on the same screen, forcing the user to scroll, which wouldn't work on mobile
-
Users aren't given a choice to "upload" or "take a photo," and it's unclear how many photos can be added
-
Photos can't be edited, they can only be deleted
Our Version
-
The order in which "select photo(s)" and "take photo(s)" appear depends on whether you're in the "lost" or "found" flow - this was our attempt at customizing the options to fulfill the needs and mindsets of people in these differing situations
-
We made sure the add photo screen is consistent with a user's mental model and current design trends
-
We made sure there was flexibility in the use cases we took into account so that all users could proceed intuitively
Pet Details
Our Version
-
Lost and pet flows should be separated, as explained above, due to the differing needs and mindsets of the users in each flow; by extension, the types of questions asked and their wording should also be distinct
-
Followed the original's lead by offering an optional description box with placeholder text to give users an idea of what they should write. Our clients tested including separate boxes with different criteria in each one (size, breed, age, etc.) but this performed poorly with users
-
Included a "not sure" option for the gender of a pet on the found flow to account for this realistic use case
When & Where
Original
-
Calendar doesn't display dates accurately and consistently
-
"When" and "where" details aren't grouped together logically
-
Location finder and map don't give the user the option to hide their exact location, which may be a privacy concern
Our Version
-
Multiple location options (especially in the found flow) and the option to hide your location cover most use cases
-
Calendar pop up makes date recall easier
Contact Information
Original
-
Order of information doesn't follow a logical flow
-
"I want to become a volunteer" should appear at the end and only for those in the "found" flow as those in the lost flow would be too distraught to consider this option
-
"Hide my phone" and "hide my email" have similar functions yet are not displayed similarly
-
Flow doesn't give the user the option to post to more than one social media network simultaneously
Our Version
-
Labels appear above text fields, not as placeholder text, so users will not forget the task they are working on
-
Copy makes it clear that you can pick and choose which contact info you would like display to afford the user privacy, flexibility and control
Paid Services
Original
-
Six different options for paid services could easily overwhelm users
-
Copy describing each service should be succinct and clear
-
Recommended services should appear at the top of the list, rather than the bottom
-
Services should not be auto-checked
-
Two pop ups in a row after completing the paid services section (one not pictured) would irritate users, especially after an arduous posting flow
Our Version
-
Limited the number of paid services to prevent cognitive overload
-
Differentiated between paid and unpaid services while encouraging rather than forcing the use of paid services through positive messaging
Published Post + Push Notifications
Original
-
Confirmation top sheet appears, saying that your post has been published and services have been applied, but you can't see your own post - it has been buried in your personal account
-
Published post is a bit cold, doesn't mention the dog's name and contains a confusing array of colors that are not aesthetically pleasing
Our Version
-
Your published post is immediately presented to you in the feed to make it clear that it has been published successfully
-
User has the option to share the post on other platforms
-
"Edit" option is clearly visible and easy to access
-
"Mark as found" option makes it easy for a user to take the post down
-
Push notifications sent to the user's phone from the app notify them that their "boost(s)" have been successfully applied, which builds trust
Final Presentation
The final stage in our process was to deliver a presentation to our clients outlining our entire process from start to finish (project planning phase to final mid-fi mockups) in a condensed format so that they could easily refer to it later for high-level insights. We left plenty of time at the end for feedback and Q&A and, as you'll see in the next section, were overwhelmed by the positive reaction we received from our clients, who had initially believed that UX research should take a backseat to design.
Next Steps
With such a condensed timeline, my team had to figure out FAST what we could accomplish that would satisfy the clients' wishes and result in a high-quality product.
This project offered invaluable lessons in compromising with outsize client expectations. In the end, we produced the two major flows on which the business depends and mid-fi fidelity screens that could still serve as a trusty template that could be built into high fidelity later. Thus, we fulfilled the clients' desire for higher fidelity screens while still conducting robust research that we could use to justify our design decisions every step of the way.
Ours was indeed an interesting scenario because not only were we challenged to create a large amount of work in a limited timeframe, but we were also handling language and cultural differences that had the potential to, at times, make communication more challenging.
In the end, however, seeing the seamless flows we had created, the clients admitted that, even though they had been anti-research initially, they were now fully supportive of the process we had employed because it had led to such stellar results. They even commented that they had previously hired a professional UX designer to design the app and that his results, sans research, were far inferior to our own. This was a huge win for us and validated our methodical process and results even further. After our deliverables had been handed in to the client, I took the initiative to design some example screens of what the app would look like in hi-fi (displayed at the top of this page).
Some ideas for further iterations include:
-
Enabling a caption feature for photos
-
Adding the time of day a pet went missing or was found
-
Ability to be contacted by SMS (Whatsapp, etc.)
-
Tailoring requested info based on cultural norms
-
Rewriting copy
-
Adding or removing culturally informed fields
-