01

The pet industry, connected

Launched in January 2016, FetchFind.com offers e-learning courses, a blog, and job board for the pet industry. They recently acquired a reviews site called PawedIn, 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. You can skip to see my final mockups and prototype if you’re strapped for time. Otherwise, keep reading if you want to learn more about my design process.

skip to deliverables

CLIENT

FetchFind

DURATION

Three weeks

SKILLS DEMONSTRATED

Competitive analysis
Responsive web design
Prototyping

User testing
Style guide

FetchFind

02

My teammates and I evaluated the old Fetchfind.com

Navigating FetchFind.com was like visiting four different websites. Fonts and colors changed, and navigation menus disappeared.

Homepage

Hero section was an autoplaying video, making the FetchFind logo difficult to see when there wasn't enough contrast.

Blog

Logo enlarged and navigation menu disappeared

Font changed from Source Sans Pro to Merriweather Sans and Lato.

Job board

Green used in header seen for the first time

Logo moved to center-align

Navigation menu is different, with no way to navigate back to the homepage, or blog

PawedIn was just acquired by FetchFind, so it was visually inconsistent. We focused on evaluating its UI.

Business reviews

Place holder paw icon did nothing to visually distinguish one business from the other

“Sign in to link your pet” button is heavy giving it too much affordance

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.

03

Then we conducted competitive analysis research to identify qualities conveying professional and personable

Clean organization conveys professional

Successes

Consistent organization and whitespace convey a sense of ease and comfort on Rover and OpenTable.

Rover

OpenTable

Failures

Excessive copy with inadequate leading looks amateur on HappyGoMobile.

Repeating images and inadequate margin spacing make the page feel busy on Harri.

HappyGoMobile

Harri jobs page

Happy photos and bright colors convey personable

Successes

Large candid photos of happy moments feel warm and inviting on the old Worthee site and Harri's homepage. Simple color palettes convey trust.

Old Worthee site

Harri homepage

Failures

Dark colors and a hero image without people or pets feel cold and uninviting on the new Worthee site. Excessive whitespace feels unfinished.

Excessive colors and outdated patterns like carousels and busy background images lead to an amateur feeling on Wild Things.

New Worthee site

Wild Things

04

We synthesized our research and defined our design principles

Professional

Personable

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.

05

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.

06

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.

I renamed this “Featured Article of the Week” to make it clear this is curated by FetchFind

I renamed this “Recommended for You” to make it clear these are based on what articles a user reads and saves

I simplified this by displaying articles in grid view, giving the entire page greater consistency

I improved the hierarchy on the blog article page

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.

I simplified this section to two type treatments and reduced the number of elements

I increased leading of opening hours and spacing of icons to improve readability.

I grouped related sections and added lines to give better visual separation

I left aligned the icons to give the eye an easier path to follow

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.

My teammates’ designs used icons in a single color, so another reason to use photos was to give our clients an alternative

I added a hover state to get the best of both worlds: personable pet photos, and the bright CTA color

07

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 just a sample from the Typography section. Check out the whole document here.

Having trouble viewing the prototype? You can also view it on the proto.io website

Prototype

08

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.

The FetchFind project was about designing a friendly and familiar website design. My next clients, BiBi, wanted something very different: a mobile iOS app that was “hip” and “edgy.”

back to top

Voluntopia

© 2017 by Felix Poon | All rights reserved

Felix Poon Instagram Felix Poon LinkedIn
“
“
“
“
“
“
felix poon design logo
“
“