Three weeks
Competitive analysis, Responsive web design, Prototyping, User testing, Style guide
Summary offers e-learning courses, a blog, and job board for the pet industry. They recently acquired a reviews site, and their business grew rapidly. But they had a problem. Their website was hastily cobbled together, making it a disjointed experience. FetchFind approached us for a solution. Like a lot of companies, they wanted a website that balanced professional and personable.
My teammates and I evaluated the old
Navigating was like visiting four different websites. Fonts and colors changed, and navigation menus disappeared.
Left: The Homepage (1) The hero section was an autoplaying video, making the FetchFind logo difficult to see when there wasn't enough contrast.
Left-middle: The Blog (1) The logo enlarged and the navigation bar disappeared. (2) The font changed from Source Sans Pro to Merriweather Sans and Lato.
Right-middle: The Job Board (1) Green seen for the first time (2) Logo moved to center-aligned (3) Navigation menu was different, with no way to navigate back to the homepage or the blog.
Right: The Acquired Pawed-In Site (1) Place holder paw icon did nothing to visually distinguish one business from the other (2) “Sign in to link your pet” button was heavy making it too prominent (3) White space on the right side was underutilized
Our challenge was to create a professional and personable design that brought consistency to the FetchFind brand identity in only three weeks. Our strategy was to deliver mockups of the blog and business reviews section to demonstrate the redesign, and include a style guide for the remaining pages.
Then we conducted competitive analysis research to identify qualities conveying professional and personable
Clean organization conveys professional
Left: Consistent organization and whitespace convey a sense of ease and comfort on Rover and OpenTable.
Middle-RightRepeating images and inadequate margin spacing make the page feel busy on Harri.
Right: Excessive copy with inadequate leading looks amateur on HappyGoMobile.
Happy photos and bright colors convey personable
Left: Large candid photos of smiling pets and people feel warm and inviting on the old Worthee site and Harri's homepage. Simple color palettes convey trust.
Middle-RightDark colors and a hero image without people or pets feel cold and uninviting on the new Worthee site (formerly hosted at Excessive whitespace feels unfinished.
Right: Excessive colors, outdated patterns like carousels, and busy backgrounds lead to an amateur feeling on Wild Things.
We synthesized our research and defined our design principles
FetchFind’s website follows standards for clean contemporary web design. The layout is well-organized with consistent spacing of elements and ample whitespace; the typeface is modern and easy-to-read.
FetchFind uses candid-style photography of happy pets either looking at the camera, or interacting with a person. People are secondary, preferably in the background. We use colors that communicate feelings of trust and comfort, and UI that feels warm and inviting.
I explored three divergent style directions following our principles
Style tile 1
Ample whitespace and cards provide consistent spacing and organization
Modern serif typeface (Tsukushi Round Gothic) for headers conveys authority; Lato for body copy is easy to ready
Orange CTA gives this style an energetic personality; green evokes nature and the outdoors
The blog author profile picture and large thumbnail photo of the dog inject a personable element
Style tile 2
Springboard icons are playful; rounded buttons convey high quality
Orange CTA contrasts with dark teal navigation bar, balancing warm energy with trustworthy calm
I used gray lines to provide content organization
Proxima Nova for headers and body copy is easy to read and conveys a modern style
Style tile 3
I used a brighter shade of Greenery (Pantone's color of the year 2017) to evoke energy and nature
Ample whitespace and cards provide consistent spacing and organization
Photos for springboard instead of icons give a more reality-based style
Lato for headers and body copy is a modern and easy to read alternative to Proxima Nova
Our clients liked different elements from each style. They preferred the clean tile organization, rounded corners and sans-serif type, and playful icons for the pet services navigation. They loved the photo in the second tile of a happy pet looking at the camera, with the person blurred in the background. So I combined these elements and designed high-fidelity mockups.
My teammates and I conducted user testing and found four areas for me to iterate my designs
I simplified the blogs and articles page
Users were confused by what the difference might be between the (1) Featured Article section and the (2) FetchFind Recommended Stories section. Compounding this confusion was the use of three different display styles: (1) list view, (2) grid view, and (3) list view embedded in grid view. I improved the usability of this page by making the headings more meaningful, and simplifying the UI.
(1) I renamed this “Featured Article of the Week” to make it clear this is curated by FetchFind
(2) I renamed this “Recommended for You” to make it clear these are based on what articles a user reads and saves
(3) I simplified this by displaying articles in grid view, giving the entire page greater consistency
I improved the hierarchy on the blog article page
(1) Users were distracted by the suggestions along the right side of the blog article. The large photos pulled too much attention, so I made them smaller and displayed them in list view. The second round of user testing validated that this was successful.
I improved the organization on the content-heavy business review page
Users felt overwhelmed by the density of information on the business review page. I made simple but effective changes that improved content organization.

(1) I simplified this section to two type treatments and reduced the number of elements
(2) I increased leading of opening hours and spacing of icons to improve readability.
(3) I grouped related sections and added lines to give better visual separation
(4) I left aligned the icons to give the eye an easier path to follow
(5) I reduced the photo size and displayed Articles by WellPups in list view to better balance the page hierarchy.
I pivoted my approach to the homepage
Originally I designed the pet services springboard menu with icons because that’s what our clients wanted, but test users didn't respond with much enthusiasm. I decided to pivot my approach and chose to use photos instead. This more closely aligned with our research findings that good pet photos convey personability.
Left: My teammates’ designs used icons in a single color, so another reason to use photos was to give our clients an alternative
Right: I added a hover state to get the best of both worlds: personable pet photos, and the bright CTA color
These were my final deliverables
Taking user feedback and client reception as our indicators, my teammates and I were overwhelmingly successful in our FetchFind redesign.  The top four adjectives used to describe my design were “friendly,” “clean,” “professional,” and “personable,” which means that I met our design principles. Our clients were also very happy with my design.

We had very high expectations going into the process; even so, we were blown away by the depth and quality of the final product...Felix was very adroit at understanding and improving upon both our spoken and unspoken wishes throughout all of the design sprints.
—Melanie Jansen, Web and Media Director, FetchFind
High fidelity mockups
I used dark teal in the header and footer for a balance between calm, professional, and energetic; in the remaining mockups screens I omit showing the header and footer.

I used a flat minimalist design throughout the website to achieve a modern feel, and user generated profile pictures and testimonial preview text to convey a sense of trust and credibility.

I used icons to organize the content in the left and right columns, and headings as well as thin lines to organize the content in the middle.

I used a left and right arrow for a more modern method of horizontal scrolling, rather than a generic scroll bar.

I used pull quotes in a warm teal Merriweather Italic, and large photos to achieve a modern blog look and feel.

I gave the same flat and minimalist design treatment to the user and business profile pages.

Users can edit pet information in My Pets by clicking a pet profile picture, or add a new pet by clicking the add button.
Style guide
This is a sample from the Typography section. Check out the whole document here.
These are my final thoughts
This was the first client project of my design career, and it taught me a lot about myself as a professional designer. Coming from a background of ten years in international education, I was able to utilize my strong communication and organizational skills to take a lead role on my team. I served as the primary contact with our clients and our test users, and I led our team in the creation of our user testing materials.
I also learned that teamwork is important to design. We had discussions and debates about the initial research, and what to take away from our two rounds of user testing. These were instrumental for writing our design principles and making the right decisions and iterations.
Back to Top