COMPANY

FetchFind

FetchFind is a B2B company that provides a network for finding jobs in the pet industry and includes online courses concerning pet related information.
PROJECT

FetchFind website re-design

​After recently acquiring a competitor, FetchFind needed screens for the new features while maintaining their logo. ​This project was completed in three weeks. 
MY ROLE

UI Designer

TEAM
2 UI Designers & Art Director

Problem Statement

Aligning the visual elements with the business goals

Our client wanted to provide a service that makes users feel they are taken care of, instead of providing infinite amounts of information as an expert company in the pet industry. ​This was functionally done by filtering the information displayed on the website.​

Visual inconsistency and the lack of visual hierarchy

The Icons currently being used were inconsistent, and the texts over the blurred images were hard to read. 

Solution

Establish casual and friendly but also authoritative visual brand

Incorporate design elements to be visually more interesting, with intentional use of photographs and colors.

Improve UI to be more clear and easy of use. ​

Visually communicate to users more clearly and effectively.

Challenges

Satisfy both different user types with different goals

Pet Owners and Pet Business Owners are two targeted types of users.

​Pet Owners come to the FetchFind website to look for information about their pets and services, while Pet Business Owners come to advertise their services or to look for pet related jobs.

Driving focus information with less content

We needed to find solutions on text-heavy content to visually digestible UI to guide users to find the answers they are looking for.
 

The Design Process

Getting acquainted

Visual object to the website

Specialized business in pets industry makes personable side in brand significant. Our client did not want to look too playful and childish but simply engaging.

In order to tailor the business needs of presenting themselves as a trustworthy website, we decided to focus on the elements that speaks to the brand.

Competitive Analysis

We looked into websites in the pet industry and non-pet related websites that shared similar functionality as FetchFind.
​
​We also looked into how these companies used their design elements to provide their brand experiences for their users.

Style directions

 ​In order to convey a welcoming and friendly feel while maintaining professionalism,

Style-tiles

STILE TILE 1
STILE TILE 2
STYLE TILE 3

Final Style-tile

​My style evolved into a different look from the process of iterations.

Since other pet service companies emphasize conventional playfulness in their brand identity, using subtle navy blue color separated from the per service competitors.
Use photographs of the pet that shows the face in order for the user to feel more engaged.

Have a white background to be easy on eyes while maintaining a professional look.
 
Use a toned down base with highlighted colors, to visually support the context of the website.

Make sure to create a  clear hierarchy within the space, specifically where there are various types of information.
​
Use rounded buttons to feel more friendly and intuitive icons to support visual communication.

User testing

​My team conducted desirability testing in order to gain insights on the user's specific goals and determine whether the design aesthetics are in alignment with core brand values.

​Our primary users were pet owners, and secondary users were pet business owners.

​On the second week of the project, we tested eight pet business owners. On the third week of the project, we tested six new pet owners and return pet business owners from the second week.

Visual updates from user testing

THE FUNCTIONALITY OF "FETCHFIND APPROVAL"
​
​The concept of FetchFind approval was confusing to users who said that they would assume anything up on the site would be already approved.

​They questioned what would be the difference of having approved articles or information that was not approved. Users were also confused by the standard of approving.
The way to present an approval system for articles and information was challenging because the simple notification had to be intuitive over the layer of other visual elements. After exploring different styles of applying the badge or the stamp on buttons, the final solution was a paw icon with the text of FetchFind approved.
PLACEMENT OF THE SPONSORED ARTICLES​
​
FetchFind wanted to make sure users notice the articles that are sponsored. Based on testing, users did not notice the articles. Instead of having the buildings as card style, I changed to list style to save space and be visually more organized.​
​THE USAGE OF AN APPROPRIATE PHOTOGRAPH
​
​The learning experience of choosing the right photography was significant during user testing. The pet experts easily caught the abnormal behavior of dogs in photographs and this was distracting for them.
​The instant feedback was almost inevitably about the photograph. For example, the photograph on the left side picture below was not the best considering the dog was not showing the character of FetchFind brand.
INDIVIDUAL BUSINESS PAGE
​
​​Below is the pet business page with the change of the original wireframe with better organization of the space and positioning of elements based on user testing. I moved the name of the business to the middle and increased the size of the picture to create better visual organization.
BLOGS AND ARTICLE PAGES

​The progression from the initial state to wireframe then final mock-up. I got rid of the picture on the side articles because we had multiple users feedback that it was distracting to read the main article. I also changed the position of buttons that were placed on top of the title to the bottom in order to visually make more clear that the buttons are for the article under the title.

The style-guide

​As the website needed a lot of changes and more user testing, I made a style guide for the purpose of delivering the style successfully for future designers and developers.
​I focused on providing FetchFind design rules specifically the restriction of the colors and typefaces. I explained the design principles and the brand attributes in the introduction as my style is based on them. I also showed the redlining in great detail, such as the gap sizes in buttons and in between the icons to make sure that my style maintains the consistency.

What I learned

  • That user interface design can be powerful and meaningful only with the strong usability and functionality. Because desirability comes after when the design is understandable especially when FetchFind users are looking for specific answers or looking up the information in an emergency situation, being able to navigate fast and easy is important.

  • Considering user interface design is in between the stage of user experience wireframe and the development, UI design shares the responsibility to make the better user experience.
​
  • Understand the subject matter, FetchFind is pet service company and yet, a lot of elements were only focused on dogs. This may lose potential clients who owns other pets so be mindful of using various pet photographs.

After the project

​After working with FetchFind for the previous project, I did freelance work with FetchFind. This was creating pitch deck for 8 minutes speech for over 10,000 investors in 2017 at Washington University. My client shared the draft of speech and context. I created slides that contain information and focused on visually supporting the context of the speech.

Since you're down here, check out my other projects