PETKIT

UX UI
Brand
Role- Product Designer.
Deliverables- App Design- First user flow.
Overview
In this self-initiated project, I designed a dog well-being app that integrates with a smart collar via Bluetooth, offering pet owners real-time insights into their dog's health and behavior. The app features include activity tracking, health monitoring, and location-based services. To ensure sustainability, I developed a strategic monetization plan.

This case study highlights my role as a product designer, presenting wireframes for the initial user flow and core screens, showcasing the seamless integration of technology and pet care.

The Process

Research and analysis
Problems and Goals
Ideation
Competitor Analasis
User Persona
Information Architecture
Wireframe
UI Design

User Pain Points

Embarking on a user-centric design journey, I conducted insightful interviews with dog owners to delve into their daily routines and challenges. Questions probing a typical day, health monitoring practices, behavior concerns, and instances of difficulty finding their dogs revealed rich qualitative data.

Problems

  1. Time Apart: The owners are not with their dog all day, which makesit difficult to track them.
  2. Tracking Changes: It is difficult to follow changes in the dog'sbehavior that may indicate medical problems.
  3. Multiple Pets: Treating several dogs at the same time makes it difficult to monitor the needs of each one of them.
  4. Multiple Owners: In many cases there is more than one owner for each dog. The division of responsibility between the owners makesit difficult to monitor the care  of the dog.

Goals

  1. Monitor: the app will provide a reliable and accurate data, ensuring that users can easily monitor their pet’s well being at any given moment.
  2. Overview: the app will develop a multi-dog dashboard that allows users to see all  information in one place at the same time.
  3. Collaborate: the app will enable collaborative features for shared responsibility among multiple owners.

Ideation

Based on the input data, problems and goals of the product, i created a conceptual product idea list that generaly describes the product.
Documenting the ideas is important at this stage, and I return to them at an advanced stage of the process to recall all the ideas that came up at the beginning and to think about which ones to use and which ones not to use

Competitors Research

My research included two direct competitors, focusing on smart collar apps with live location and dog monitoring features. Additionally, I studied two indirect competitors, unrelated to app content but offering valuable parallels. This approach provided a well-rounded perspective, allowing the integration of diverse features and enhancements for a more innovative and user-friendly product.

Competitors analysis

  1. Map as the Core Component: The research reveals that the map is a dominant element in competitor apps, indicating its significance for users. The real-time location tracking feature is evidently crucial for pet owners.
  2. Solution For Multiple Pet Owner: A gap identified in the competitor landscape is the lack of solutions specifically tailored for multiple pet owners. This presents an opportunity for our app to stand out by addressing the unique needs and challenges faced by users with multiple pets.
  3. Confusing Navigation Bar: Placing the profile of the pet and the user account next to each other can be confusing. Streamlining this aspect in our app's design can enhance user experience.
  4. Combine Map & Dashboard: A distinctive finding is the absence of a dashboard as a main component, together with the map, in competitor apps. Leveraging a dashboard layout, similar to these in the 'Find My', can provide users with a centralized view of all relevant information, enhancing usability and convenience.

User Persona

In the research phase, I figured out three main types of users, each showing different ways they might use the app. These user profiles help shape the design to meet the varied needs of our users.

First User Flow

Information Architecture

Wireframes

started with simple sketches on paper to plan how things should be arranged (low-fidelity). As I moved to the detailed design (high-fidelity), I made things more accurate in terms of how everything is organized. Putting in the actual content also led to some changes in the layout.

UI Design

In shaping the application's design, I crafted a language that aligns seamlessly with the brand, especially the physical collar.
Color palette: Employing three primary colors and three functional ones, I established a visually unified palette.
Typography: I opted for a modern font versatile enough for both titles and running text, ensuring maximum consistency across the information-rich application, facilitating quick scanning. Distinctions primarily rely on hierarchical arrangements.
Photos: The photo design features a round mask, placing the dog at the focal point to create personalized profiles.
Icons: Utilizing full icons enhances information accessibility, with the active page highlighted by a solid icon in the navigation bar, while others maintain an outlined appearance for clarity.

Next steps

Iterations- Make necessary adjustments to improve initial design according to feedback from clients and colleagues
Usability Testing- Observe how users interact with the design, and note any pain points, confusion, or areas for improvement.
Prototyping- Develop an updated prototype reflecting the changes made during the iteration process.
Handoff to Development- build an MVP version of the product.
Next Project