Duration
12 weeks, Mar - May 2024
UX/UI Designer
My Role
Noble K9 Flagship & Ecommerce Website🛒
As a UX/UI Designer on the Noble K9 project, I collaborated closely with a cross-functional team including product managers, developers, and technical writers. Our goal was to redesign the flagship website and enhance its e-commerce functionalities. I designed a customized booking solution, offering visual tools to monitor appointments and review past services. I also curated an e-commerce system that showcased the best offerings, enhancing the shopping experience and facilitating informed purchasing decisions. Check out the live website @ https://www.noblek9.ca/ !
For additional information on this project, contact me at ahme2527@mylaurier.ca
The Challenge 💪
The Noble K9 project is set on a transformative journey to redesign and enhance their flagship website and e-commerce functionalities. The primary challenge was to move away from an outdated system and create a more interactive and accessible platform that better served the evolving needs of their customers. This transition aimed to significantly improve user engagement and accessibility.
Initial Website & Goals
Initial Noble K9 Website 01Website Usability
The current Noble K9 website was inaccessible, missing classes and services, and needed a more interactive experience. Our goal was to improve usability by enhancing accessibility, updating content, and making the platform more engaging.
Boosting online bookings
We first identified the target demographic as women in their 30s-40s. To boost online bookings, we then redesigned the Noble K9 website to align with this audience, updating the visual design, refining the content, and incorporating relevant testimonials to better engage and attract them.
How might we transform the Noble K9 website by improving accessibility, integrating a comprehensive e-commerce system, and creating an engaging, user-friendly experience to better meet the needs of the target demographic, increasing user satisfaction, and driving revenue growth?
Research Insights 🔍
In our research phase, we focused on gaining a deeper understanding of the user demographic by conducting interviews with three women, as the company’s initial data suggested this group—women in their 30s-40s—was the primary audience. Through these interviews, we explored preferences for website layout and accessibility, and performed usability testing to observe how users interact with the current booking system. Feedback highlighted various preferences, including a clear preference for layout and ease of access, as well as differing opinions on online versus in-call booking options. An additional insight revealed that users desire a personalized profile feature where they can view and manage their upcoming and previous trainings and classes.
Pain Points & Opportunities 🎯
Automated Booking Options Management is facing challenges with time management and long wait times because they must handle all bookings by phone, as the website does not support online reservations for all classes and services. They require a unified system to manage all training and service bookings efficiently.
Service Management
Managing and tracking services and training classes for multiple pets is challenging, making it difficult to keep an organized record of past and upcoming activities.
Overwhelming Package Information Users find the presentation of training service packages overwhelming and confusing, highlighting the need for a more organized and user-friendly approach to displaying package information.
Users need a website that offers a streamlined experience for booking and managing services, with clear and organized information about packages.
DESIGN CONCEPTS FOR BOOKING / SERVICES
Service Booking Flow
First possible solution was to allow users to book within the service description page that allows users to book available dates through a visual calendar after pressing the book now. button
Service Booking Flow
Keep It Simple…
Wireframes🎞️
SIGN UP INFORMATION
Checkout Page
Clear and simple layout for an easy checkout process.
Focuses on key details, minimizing unnecessary steps.
Easy navigation to review and adjust bookings effortlessly.
Initial Noble K9 Website 02Integrating E-commerce
The Noble K9 website only allowed users to add training classes to their cart. To boost revenue and offer a one-stop shop for pet equipment, our goal was to develop a comprehensive e-commerce system that includes products like leashes and equipment.
Interview Questions:
How easy is it for you to navigate the current website? Are there any specific areas where you experience difficulties?
How do you currently book services or classes through the Noble K9 website? Can you describe any challenges you face with this process?
What functionalities would you expect from such a profile to make it most useful?
Second possible solution was to allow users to view all services at once and trigger a pop-up window when they decide to book a service. The pop-up window allows users to book through a calendar that provides available dates.
Third possible solution was to allow users to view service descriptions. Upon clicking book now, users are directed to a new page which allows users to book through a list of available dates and view class details and price details. This option also had breadcrumbs to allow users to easily trace back.
After evaluating three different booking flows, I found that the third option was the most intuitive and effective. This flow offered a streamlined booking experience by presenting information in a well-organized layout, which prevented users from feeling overwhelmed by unnecessary information. It also featured easy navigation, allowing users to access previous pages effortlessly. This design not only improved the user experience by making the process smoother and more manageable but also addressed the need for simplicity in booking services, ultimately enhancing overall user satisfaction.
User Journey🗺️
Usability Testing Insights📝
SIGN UP INFORMATION
Through user feedback, we discovered that 80% of users preferred booking online rather than on call, given that all necessary information was provided during the booking process. Furthermore, 75% of interviewees who had previously booked services found it overwhelming to manage their bookings and class times.
Initial
Final
We discovered that 45% of users abandoned their booking due to feeling overwhelmed by the extensive information required during sign-up. Analyzing this feedback, we proposed a solution to the founder to streamline the process. Our approach involved reducing the number of questions to only the most necessary ones and introducing a guest mode, allowing users to purchase services seamlessly and effectively. This compelling evidence convinced the founder to adopt these changes, which resulted in a significant 25% increase in creating accounts.
Initial
Final
Initially, the client was unsure how they wanted the design system to come together, specifically the colour palettes, theme, typography, and logo. It took one month of trial and error, usability testing and customer/client feedback to get to the final design system. The final website provides a unique take on a dog service website and does a good job of conveying the message and tone of the brand while catering to the target demographics’ preferences.
Home Page
Visually appealing and easy-to-navigate layout.
Interactive components and clear CTAs guide users smoothly.
Provides a seamless experience for all users regardless of their technical expertise.
🌡️
Another key takeaway was understanding tech limitations. When designing interactive elements, I worked closely with developers to ensure the outcome closely matched the design drafts. I had to consider feasibility and make sure everything was compatible with aspects below the line of visibility, such as backend functionality and performance constraints.
Log-In Page
Streamlined login for quick and easy access.
User-friendly account management for seamless updates.
A clear booking dashboard shows past and upcoming sessions.
The end…but not really
Takeways & lessons learned
🏃♂️➡️
I leaned on the crawl, walk, run approach to future-proof the design. In the "crawl" phase, I focused on the essentials—clean, responsive designs and easy booking functionality. The "walk" phase added deeper customization, like improved navigation and client feedback integration. The real fun part was planning for the "run" phase—this is where the product shopping experience will come in once they have the resources. By keeping this in mind, I left room for future scalability, so when they’re ready, it's all set to evolve seamlessly.
🤝
MVPs are your best friend when you're on a shorter timeline. At the start, the client wasn’t really sure about the design system—color palettes, typography, and even the logo were all up in the air. After a month of trial, error, and a ton of usability testing, we landed on a final system that balanced what the brand wanted with what the target demographic actually liked.