thePuddy

You’re starting a small business focused on promoting healthier homemade treats for cats and dogs. As you look to scale, you realize it’s challenging without the right platform and a strong community. After sharing your frustrations with a few business-minded people, an idea is born: thePuddy Hong Kong.

Project Overview:

thePuddy (a combination of "Pets" and "Buddy") is Hong Kong's first online platform dedicated to handmade pet products, designed to help local brands enter the market and expand their customer base.

Objective:

Develop an intuitive e-commerce platform for buying and selling local handmade pet products with customizable seller pages. Create a modern logo and branding for the 20–40 age group. Optimize user flows for a seamless experience and design a UI that aligns with the brand. Ensure a smooth handoff of design assets to developers for seamless implementation.

Role:

UX/UI Designer

Research

Methods:

  • Secondary Research

  • Competitive Analysis

How Can We Improve the E-Commerce Experience with thePuddy?
The research aimed to understand the industry landscape and identify ways to create small, delightful experiences for users.

Findings:
While there are no direct competitors in Hong Kong, small local businesses present indirect competition. We can differentiate by crafting a unique and enjoyable experience through strong branding and convenience.

User Task Flows
I created task flows to identify potential gaps or issues in the client’s vision. One key finding was the process for new sellers submitting for administrative review. The question is whether we create a new page or button and what details need to be captured.

Task Flows:

  • Buyer:

    • Purchase a Product (Happy Path: outlines the steps/pages the buyer follows)

    • Add to Wish List

  • Seller:

    • Create an Account (Identified issue: how new sellers submit for administrative review)

    • Fulfill Order

Design

Logo & Branding

The logo design was an iterative process, refined based on client feedback until it felt just right. I started with a mood board reflecting the clients' vision for thePuddy, then presented four logo concepts, narrowing them down to two for further refinement. Continuous feedback was key to ensuring the branding aligned with the desired modern, simple, and appealing aesthetic for the target audience.

Wireframes

I began by sketching a few pages to visualize the layout, then developed mid-fidelity wireframes to review with the client. I presented two options: one that closely followed the example the client provided, and another with a more modern design featuring card layouts and a hero section. The client ultimately chose the latter.

UI Concepts

After presenting the wireframes to the client, I guided them through each prototype, gathering valuable feedback to identify areas for improvement. Using their input, I iterated on the designs, refining the user experience and visual elements.

At this stage, color selection became crucial to enhance the overall brand identity. I presented two color variations: one with the original palette and another using a deep blue accent. This allowed the clients to compare and evaluate how different color schemes impact the tone and aesthetic of the website, helping them make an informed decision on the final look and feel.

View Prototype for the Buyer Flow

Seller Flow

As part of the iterations for the seller flow, I refined the messaging that appears after each task or section completed. This ensured that the communication was clear, concise, and easy to understand, guiding the sellers through the process smoothly.

View Prototype for the Seller flow

Style Guide

To wrap up the design process, I developed a comprehensive style guide for handoff to the development team. This guide included all the essential design elements—such as typography, color palettes, button styles, and spacing guidelines—ensuring a smooth transition from design to development. By clearly outlining these details, I provided the developers with everything they needed to implement the design, maintaining consistency and a high-quality user experience across the final product.

Insights & Reflections

Reflecting on this project, I wish I could have followed it through the development phase to guide the team and better understand any technical limitations that might have impacted the design. Although the user experience was relatively straightforward, I still identified areas for improvement and enjoyed the opportunity to bring creativity to the logo and branding. This project taught me the importance of setting clear expectations early on and ensuring that feedback is received in a timely manner to keep the process on track. Overall, I’m excited about the potential of the final product, and the client was aiming for a mid-2022 launch.