Design Challenge Project
Create a high-fidelity prototype for a cat grooming app's booking page within 48 hours. The screen should allow users to provide cat details, select a date and time, choose services, and include navigation elements. Mobile portrait dimensions should be used, and the mockup should showcase fonts, colors, and button styles.
Throughout the design process, various aspects were considered and decisions were made to create an engaging and user-friendly experience for the HairCats app. These decisions included exploring different navigation options, designing distinctive icons, prioritizing quick bookings, and optimizing the "Choose Your Pet" page. The payment process was streamlined with a QR code for convenience. Customized design guidelines were established to infuse personality into the app, and low-fidelity wireframes were used for iteration and refinement. The final design choices were based on usability and user preferences.
After conducting research, I found two prominent competitors in the market: Petco and PetSmart
The Petco mobile app offers a user-friendly interface with a wide range of features, including convenient shopping, grooming appointment scheduling, loyalty rewards, personalized recommendations, pet medical records, and pet adoption. It aims to provide a seamless and convenient experience for pet owners, catering to their various needs and enhancing their overall pet ownership experience.
The PetSmart mobile app provides a user-friendly interface with a wide range of features, including convenient shopping, grooming services scheduling, exclusive deals, pet training sessions booking, and a comprehensive pet care library. With its intuitive navigation and adoption feature, the app aims to enhance the overall pet ownership experience, offering valuable resources and connecting users with adoptable pets in their area.
Both Petco and PetSmart mobile apps provide a range of services and features tailored to pet owners. However, there are some notable differences between the two. Petco's app places a strong emphasis on pet medical records and adoption, offering a more holistic approach to pet care. On the other hand, PetSmart's app focuses on providing a comprehensive shopping experience, along with grooming, training, and adoption services. In terms of user experience, both apps are well-designed with intuitive navigation and user-friendly interfaces.
Overall, Petco and PetSmart apps are strong competitors in the pet retail industry, each catering to the unique needs of pet owners. The choice between the two apps may depend on specific preferences and requirements, such as the importance placed on pet medical records, adoption options, or shopping convenience.
The task diagram represented the sequence and flow of user interactions within the app and booking process.
The diagram visually presents the optimized quick booking process, highlighting a substantial time-saving advantage for both personas. By addressing the concerns expressed by the personas regarding the importance of time, the diagram demonstrates the successful achievement of a faster and more convenient booking experience.
While the research phase was not mandatory for this challenge, I decided to conduct an analysis to gain insights from industry norms. With a focus on the first requirement of creating the navigation, I approached the challenge with a well-informed perspective.
I explored four ideas for the main tabs, (1) including blending colors, (2) using contrasting colors, (3) incorporating a bubble bath shape, and (4) adding bubbles for visual impact, to create a distinctive and memorable app identity.
I explored four options for the quick bookings cards, prioritizing either quick bookings or new users and incorporating different levels of pet information, to determine the most effective configuration for presenting organized information.
I focused on creating a memorable "choose your pet" page by testing different approaches, such as emphasizing pet images with a relocated button in Option 1, prioritizing convenience by placing the button at the top in Option 2, and exploring a different grid system in Option 3.
The "Create an Appointment" process for new users involves four steps: filling in pet information, selecting a location, choosing a service package, and picking available dates. Alternatively, users can use the Quick Booking feature for a streamlined experience.
The payment process consists of three pages: purchase confirmation, payment option selection, and QR code generation. The QR code simplifies sharing pet and appointment information with the front desk, improving the user and groomer experience.
To stand out from competitors, the design guidelines infused a fun and engaging personality using a variation of the Arial font and incorporating blues and purples aligned with the bubble bath theme and created an engaging visual experience.
Due to time constraints of the challenge, I only created custom icons for the main five functions by sketching cat-related ideas on paper and translating them digitally using Figma.
Home Icon: I searched for cat beds and found one that closely resembled my initial concept. In its inactive state, the button remains gray with an empty center. However, once activated, a small cat appears, and the icon turns purple.
Notifications Icon: It was a straightforward choice to use a cat collar bell. When activated, the icon changes color and rotates to indicate new notifications.
Bookings Icon: This was a crucial icon, so I experimented with different ideas until I found the right one. In its gray state, the icon represents a bathtub, symbolizing a bubble bath. When activated, the cat appears again, similar to the Home Icon, creating a visual connection between the tabs.
Search Icon: Similar to the notifications icon, the gray and active states are similar, with the only difference being the color and rotation of the monocle.
Profile Icon: I wanted to personalize the common "profile icon" by incorporating the same cat silhouette seen in the other icons, adding consistency throughout the design.
After finalizing the design guidelines, I began iterating with low-fidelity wireframes.
The initial challenge was to determine the appropriate color usage, so I tested various configurations until I found the right combination that aligned with the brand's identity.
I finalized design decisions for the bookings page by combining elements from ideas 2 and 5, prioritizing quick bookings for efficiency and placing the new appointment button higher for convenience.
I merged elements from multiple ideas to create the "Choose Your Pet" page, aiming for a visually appealing and user-friendly interface for easy pet selection.
A high-fidelity prototype of the HairCats app was created using Figma, incorporating insights from the UX process. The prototype showcases a captivating animation of rising bubbles in the "Bookings" tab, enhancing the user experience with a playful and immersive element. The prototype serves as a tangible representation of the design decisions made and invites users to interact and engage with the app.
I created a high-fidelity prototype of the HairCats app using Figma, incorporating insights from the UX process. The prototype showcases an engaging animation in the "Bookings" tab with rising bubbles, adding a unique and delightful touch to the app. Feel free to try it out!
