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.
Navigating FetchFind.com was like visiting four different websites. Fonts and colors changed, and navigation menus disappeared.
Hero section was an autoplaying video, making the FetchFind logo difficult to see when there wasn't enough contrast.
Logo enlarged and navigation menu disappeared
Font changed from Source Sans Pro to Merriweather Sans and Lato.
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.
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.
Harri jobs page
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
New Worthee site
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.
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.
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
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.
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.
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
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.
— Melanie Jansen, Web and Media Director, FetchFind
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
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
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