THE DESIGN CHALLENGE
ROLE
UI Designer — self-initiated project
CONTEXT
PetJoy — pet care company (concept)
TIMELINE
2024
METHODS
Visual System · Wireframing · UI Design · Prototyping · Responsive Design
The project revolves around the development of a responsive website tailored for a distinguished pet service company, specializing in dog walking, pet sitting and pet fostering. The website aims to seamlessly connect pet lovers with the services they need.
This is a UI project rather than a UX one. The service model was already defined, so the work was about giving it a visual identity and a page structure that carries a visitor from “what do you do?” to a submitted application without friction.
User-friendly navigation — three destinations, always in the same place, on every page.
Service-specific information — each service gets its own page with pricing and tone of its own.
Company profile and values — mission, values and team stated plainly on the home page.
Testimonials for authenticity — real-sounding reviews attached to each individual service.
Simplified application process — one long form broken into six short, single-purpose steps.
Everything starts from one decision: a saturated amber background instead of white. It is the warmest colour a brand can stand on, and it does the emotional work before a single word is read.
From there the sticker sheet fixes the rest — Nunito for its rounded, friendly terminals, a soft blue as the only counter-colour so calls to action can never be missed against the yellow, and cream cards to lift content off the background without introducing a hard edge.
fig. 01 — Sticker sheet: type scale, colour palette and surface tokens.
Before any colour, each page was blocked out in grey to settle the order: what does a visitor need to see first, and how much can be asked of them before they leave.
The home page was drafted as a long single scroll that moves from introduction to who we are, then proof, then advantages, so that a first-time visitor can arrive at the services with the company already established.
fig. 02 — Home page wireframe: the full scroll, top to bottom.
fig. 03 — Services overview.
fig. 04 — Service detail with pricing and reviews.
The high-fidelity build applies the visual system to every page in the flow. Cut-out photography of dogs mid-jump breaks the grid on purpose: the layout is orderly, the animals are not, and that tension is the personality of the brand.
A single scroll that introduces the company, states its mission, values and team, backs them with numbers, then closes with four advantages. Organic blob shapes carry every section heading so the eye has something to land on between blocks of text.
fig. 05 — Home page, full scroll.
Three services presented as equals, with the same card, same photo treatment and same call to action, so no option is visually favoured. Each detail page then carries its own pricing table, description and testimonials.
fig. 06 — Services overview.
fig. 07 — Dog Walking detail page.
The contact page places two cards on one row: Contact Information, in amber, holding phone, email, address and social links, and Send Us a Message, in cream, holding the form. Cut-out dogs frame the section from both edges. Below, the Follow Us on Instagram strip pulls real photos from the company's own account, so the page closes on actual animals the business has cared for rather than stock imagery.
fig. 08 — Contact page with Instagram strip.
The application is the one place where this project behaves like a product. Rather than one intimidating form, it is six steps on a single card: personal information, pet details, service choice, frequency, schedule and emergency contact. Each asking for one thing at a time, with the step number always visible.
fig. 09 — Step 2: Pet Details.
fig. 10 — Step 5: Schedule Creation.
fig. 11 — Step 6: Emergency Contact, closing the flow.
The desktop layout leans on horizontal space, with cards beside photographs and blobs bleeding past section edges. On mobile that composition has to be rebuilt rather than squeezed: cards stack, the cut-out dogs shrink to punctuation between sections, and the services become a single column so each one still gets a full-width photograph.
fig. 12 — Home.
fig. 13 — Services.
fig. 14 — Contact.