Collarful
Mobile App
- University Class Project
- My Role: UX & UI Designer
- Deliverable: Fully Redesigned Website
- Time: Spring 2017 - 3 weeks
Collarful is an app that brings local pet owners and pet-sitters together. It’s a friendly community of pet lovers based on safety, trust, ease of access. First design of the app focuses only on cat and dog owners to establish a foundation for further development.
Research
The project began as a class project back in 2017. The goal was to design a mobile application that helps pet owners find local pet-sitters (first phase only cats and dogs) through a safe and easy process, and book a service. I procured a survey to understand what are the challenges that pet-owners or pet-sitters face, and surveyed 10 classmates and a few staff members at California State University, Fullerton. After analyzing the data, I identified four major problems that should be addressed:
Safety
As there is potential for misuse, safety is the main concern among all users.
Reliability
We care about our pets. It's essential to know we can establish reliability and trust when finding a service provider through this app.
Alternative Optionbs
Pet owners can use many alternative options such as pet hotels and other service providers.
Efficiency
It is important to devise a streamlined process where users can find all the information they seek easily, and can access tools for effective communication and booking within the app effortlessly.
User Personas
Two user personas represent two common types of patients: First a middle-class mother who is seeking a trustworthy dentistry for her family and second one represents an actor who wishes to perform cosmetic dental procedure.
User Category
Define
After identifying the problem, we can define the goals and ideal outcomes for the project by asking seven questions and use the answers as a framework of our process.
What is the purpose (goal) of the design?
To create a memorable brand that can communicate the benefits and core values of the client, and a website that is user-friendly, SEO optimized and can deliver value.
Who is the audience?
Young adults, students, single pet owners, parents, families with multiple pets, pet foster homes, people with disabilities or special needs, people with time and space to take care of pets, frequent travelers, wealthy people.
What message needs to be communicated?
The user should feel comfortable using this app knowing he/she can utilize the features in the application to find a trustworthy pet sitter. The user also should feel comfortable using the app so the navigation and booking process must be streamlined and easy to use.
What is the competition and marketplace?
There are websites and applications for finding dog sitters, however they are usually a service provider. They have focused on creating a mutual trust between the sitters and owners and making sure sitters are vetted and reliable: Rover, Dogvacay, Petsitter, fetch, care.
What is the context?
Collarful will be an Android and iPhone mobile application, the user will download the app to use and find other owners or people who are willing to take care of their cats or dogs for a period of time.
What is the voice?
Compassion, care, discipline and professionalism. A clean look and feel which is welcoming and presentation of the content in a way that is informative and logical.
What kind of response is desired?
Trust and passion. We wish to cultivate a community of pet lovers that mutually benefit each other, and ensure a mutual sense of trust and ease of use is always present.
Ideate
Now that we have a clear understanding of the goals and objectives, we move to create a user category and extract some user personas from the user chart that would represent typical users of this app. Then we can anticipate their journey through the app and track how these features could help them successfully achieve a goal.
User Narrative
User Flow
Wireframe
Onboarding
During the user-research and ideation process, it quickly became apparent that users would benefit from a quick and efficient welcoming guide. This quick onboarding experience could help users get started with using the app quicker and also increase their trust in using the app.
Design
After creating paper prototypes and low fidelity wireframes, it was time for some initial user-testing.
After user-testing the wireframe changes were applied to the wireframes before they are turned into high-fidelity wireframes and final UI Prototype. After testing, a major problem was unearthed: location privacy of pet-sitters who enlist their profile. Therefore, their location on the map was removed from the search result list. Only their general location will be displayed after pet-sitters and pet owners finalized a service. Now is the time to develop the visual language of the app. The fun part begins!
The final wireframe and prototype is developed based on rules and guidelines of Google’s Material Design.
Graphic Elements, Type, color & Logo
Header Typeface:
Roboto Bold/Black
Body Typeface:
Roboto Regular/Medium
HEX
#555499
HEX
#7E7DCE
HEX
#BA9AC5
HEX
#E8D1A3
Final UI
Iterate
Empathy is the Key
One pattern that kept emerging throughout the process was addressing the concerns and pain points of the users. Going through the design thinking process helped me to keep my focus on one keyword: empathy. Empathy means going through the journey through the eyes of the user, to feel their emotions and address their concerns. Even-though this was a simple student project, it was a turning point for me to discover my passion for becoming a digital product designer.
Thanks for Checking this Project!
Share this page
