Pet Grooming Website

I am completely new to the UX/UI world (attempting to transition from years of freelance 3D animation). I've been following Carlye's "Essential Skills for UX Designers: Resource List" from her "Switch Careers" course (which has been SO helpful in finally giving me some direction - thank you SO much for this!) In considering what sort of projects I would like to work on in order to build up a portfolio, creating a professional landing page for my favorite dog groomer was always one I had in mind. Colleen is a wonderful, one-woman powerhouse of a small business owner, working out of a big shed in her own backyard. She takes amazing care of my doggo every month, but doesn't have a website (she's also a bit older, so may not have much technical knowledge?)



The primary user for this landing page is of course someone who is interested in her grooming services. Let's call him Steve. Steve is a single, 35-year-old software engineer who works hard all day and comes home to a jolly terrier, Rex, every evening. Rex means everything to Steve, so when his previous groomer moved away, he had to reliably find a new one. He asks around in his office, gets a few recommendations, then does what most people around his age in this area do: look them up on Yelp (which incidentally is how I found Colleen as well - yay for technology!)

While Yelp has helped tremendously for both businesses and customers to find each other, it sometimes doesn't have the information that customers need, depending on how much effort the business owner puts into their profile. Sometimes it takes scrolling through countless reviews or photos to find something relevant to our needs. Adding a website with quick access to the most important information really helps. 


Happy Path

Steve's Happy Path can start off in one of two ways: 1) one of his co-workers recommends Colleen and immediately sends him to her website, where all of the information he needs is right there, or 2) Steve finds Colleen on Yelp (whether through the co-worker or just his own research on the app) and clicks on the link to her website within her Yelp profile. Right from the main page, Steve is able to see all of Colleen's services, their prices, where she is located and her contact info in order to make an appointment - the four most important pieces of information he needs in order to make his decision about who should groom his beloved Rex. Less important but still helpful, he can also read testimonials from Colleen's other clients (pulled from Yelp), a gallery of before-and-after photos and a small bio of Colleen herself (how long she's been caring for animals, all her certifications like pet CPR, her business values, why it's called "Lovin' All the Babies", etc.)


Low-fidelity Wireframe


I used Photoshop (with a pen tablet) for everything, simply because I'm so familiar with it, it's like second nature. Colleen is a no-frills kind of gal, so I didn't want to make anything overly complicated. Everything except the FAQ and About sections are on the main page, and the most important features are higher up. The reviews and photo gallery are just fluff and can be completely cut out if necessary.


Medium-fidelity Wireframe


I actually found making the medium-fidelity wireframe to be much faster and easier for me, since I could quickly make shapes, straight lines, text, add colors AND copy/paste elements and make adjustments as necessary. Perhaps I should start making low-fidelity wireframes this way as well, just using the shapes and lines?

The most difficulty I had while creating this was the Navigation Bar at the top, since I replaced the scribbles with actual link text. I thought it looked a bit too crowded, like maybe there were too many links there. Instead of making "Contact" its own link in the Nav Bar, I decided to add a small banner at the top for Colleen's phone number. It's absolutely her most important feature, because it's her main point of communication, and anyone with questions can easily get them answered just by calling or texting her, even if those answers can be found on the website.

As I've stated before, another important piece of information is where she is located, which I have grouped together with her hours in the Business Information. However, I had trouble coming up with a good word to link to this section in the Nav Bar. "Business Information" is a bit long, much longer than the other links in the Nav Bar, as well as kind of vague - I can imagine a user wondering if this is like a "history of the business" sort of page, or a list of employees, etc (I've been reading Steve Krug's "Don't Make Me Think", so this is where most of these questions about vagueness come from). For now, I've kept the link saying "Hours", since her address is contained in the same section, but I still think I need to come up with a better word, since users will come to the page and wonder where she's located but not know immediately where to find that information.

One note on the Testimonials section: Yelp is still one of her primary ways of getting clients, other than word of mouth, so I thought it would be useful to add a button somewhere to take users there. Perhaps I'll also add a little Yelp icon in the footer.

While creating this medium-fidelity wireframe, it also occurred to me that I was missing a few other elements relating to her services that I did not factor into the low-fidelity wireframe: she doesn't groom or care for JUST cats and dogs, but also more exotic animals like guinea pigs, and she offers boarding services at her home as well. I will need to go back to the drawing board to see if I can fit these elements cleanly into the Services section of the page.


Medium-fidelity Wireframe #2


Here is a second iteration of my previous wireframe. The major changes were done to the Navigation Bar. I added a center logo (doubling as the "Home" button), because I figured that the business name would no longer be visible once the user scrolled past the main banner. Since the Nav Bar is persistent, having the logo there will always be visible. I also settled on using "Location+Hours" for the business info section, because the wording is so cut and dry. To adjust for such a long name for a single link, I changed up some of the other link texts slightly to make the overall spacing of the Nav Bar more appealing ("Reviews" turned into "Testimonials" and "Gallery" became "Photo Gallery"). 

Lastly, I added just a small box below the Dog and Cat Services boxes to include extra instructions for Colleen's other services.


Please sign in or sign up to comment.