Tracy Cheon UI Designer
  • Portfolio
  • Me

FETCHFIND


Background

FetchFind is a company that provides a network for finding jobs in the pet industry and includes online courses concerning pet related information. After recently acquiring a competitor, FetchFind needed screens for the new features while maintaining their brand identity. This project was completed in three weeks.
​

FetchFind was open to rebranding their design apart from their logo, so my team explored different color palettes and typefaces. We approached this project with the discussion of how to visually communicate the FetchFind brand, which is casual and friendly, but also authoritative, as an expert company in the pet industry.

Initial state

FetchFind was married to the logo but they were opened to change other design elements such as colors and typefaces. Below is the logo and the screenshot of their initial website.
Picture
Picture

Design goals

After the kick-off meeting, we defined the character of FetchFind. Our client wanted to provide a service that makes users feel they are taken care of, instead of providing infinite amounts of information like Yelp and Facebook. This was done by filtering the information displayed in the website.​

FetchFind has two targeted types of users: pet owners and pet business owners.  Owners come to the FetchFind website to look for information about their pets and services, while business owners come to advertise their services or to look for pet related jobs. A business goal for this project was to design a platform that satisfies both owners and business owners.
​The usability goal for this project was clarity and ease of use. We wanted to make the text heavy content visually digestible to help the users to find the answers they are looking for.

Initial state

Below are examples of original screens from Pawedin, the company whose functionality was being transferred to FetchFind. I analyzed some design elements that could be improved.
Picture
Home page
Icons are inconsistent, in terms of strokes and filled ins. White text over the photographs is distracting.
Picture
Search page
​This page felt distant from other pages and needs more hierarchy. It can incorporate other design elements to be visually more interesting such as photographs and colors.
Picture
Pet business page
​Blurred image as a background not only distracts from the text, but confuses the purpose of the use of image because it is not visually clear. There is no visual flow in this screen because of lack of hierarchy.
Picture
Blogs and articles page
​
There is no visual hierarchy overall and unnecessarily amounts of text in boxes is distracting. Background gray color is not consistent with other screens. Strong distinction between boxes looks outdated and clutters the space.

Wireframes

The previous UX team provided us with wireframes.
Picture
Home page
Main buttons shows on the wireframe have text over image. This also gives the room to be creative with the use of icons or photographs.
Picture
Search page
Users preferred card layout styles but the list layout can be more functional in terms of quickly finding the information. 
Picture
Business page
​
Heavy information with a lot of text, need to find the way to organize to create a natural visual flow.
Picture
Blogs and articles page
The featured articles on the side can distract users but it needs to be there. 

UI Design process

Competitive analysis

In order to convey a welcoming and friendly feel while maintaining the professionalism, we looked into websites in the pet industry as well as 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.
Picture
Yelp is a huge corporation that has similar functionality to FetchFind, presents a large amount of information for anybody, had clear visual organization.
Picture
Pet smart also is very functionally successful and easy to navigate with strong clarity.
Picture
Dog Gurus has some interesting visual elements such as the logo, but lack of spacings and heavy texts makes the website look overwhelming.
Picture
Worthee had inconsistent placements of typefaces. Photographes were poorly treated and images made the website look inconsistent.
Picture
FetchFind’s brand is specialized in one particular subject: pets, which make its personable side significant. Being too minimal and modern did not match the brand. Our client also 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.

Style directions

Picture
Style tile A
Dark boxes with sharp corners give modern and professional look. I used orange and mint as primary colors to give optimistic impression. This style received feedbacks from our client that it looks too corporate and too modern.
Picture
Style tile B
Rounded buttons give friendly and the colors gives playful impression. The background photographs may affect the overall impression. Our client liked colors and looks but they were not clear whether this was suitable for FetchFind brand.
Picture
Style tile C
Circular photographs with slightly rounded corners make overall impression less rigid. A clear definition of full fill in boxes highlights a clear indication of selected states. This style received positive feedback from designers and negative feedback from the client. 
My style evolved to a different look from the process of iterations. From the process of iterations, I focused on,
  • Have a white background to be easy on eyes while maintaining professional look.
  • Use a toned down base with one highlighted color, 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 photographs of the pet that shows the face in order for the user to feel more engaged.
  • Use rounded buttons to feel more friendly and intuitive icons to support the visual communication.
Picture
Final style direction
Since other pet service companies emphasize conventional playfulness in their brand identity, using subtle navy blue color already separated this design within the pet service market. This supported the intention to build the impression of professionalism. Choosing the right photography for each page was also a significant matter because depending on the type of the picture that was being used, the overall impression of that page changed.

User testing

My team ran desirability testing in order to gain insights on 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 seven pet business owners. On the third week of the project, we tested three new pet owners and return pet owners from the second week.
Picture
Picture
Visual updates from user testing
Functionality of FetchFind approved​
The functionality of FetchFind approval itself confused 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.
Picture
Wireframe
Initial mock-up
Final mock-up
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 an paw icon with the text of FetchFind approved.
Placement of 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.
Picture
Initial mock-up
Final mock-up
Use of appropriate photograph​
​The learning experience of choosing the right photography was significant during the user testing. The pet experts easily caught the abnormal behavior of dogs in photographs and this was distracting for them.
Picture
Initial mock-up
Final mock-up​
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.
Picture
Initial mock-up
Final mock-up​​
Blogs and articles page
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 feed back 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.
Picture
Initial state of website
Wireframe
Final mock-up
Business page
​
Below is the pet business page with 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.
Picture
Wireframe
Wireframe update
Final mock-up

Mock-ups

Picture
Picture
FetchFind today
​
My client has implemented the color and the typeface I delivered on their website.
Picture

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.
Picture

Further thoughts

If we had more time, 
  • The layout of the “FetchFind Recommended” vs the “Featured” vs the “Browse Stories” was confusing for many users. Considering we did not have enough time to execute the new wireframe, I sketched out how I would have changed it for future consideration. Users were also confused about what the FetchFind approved icon means in relation to the Recommended and Featured stories, because not all of the Recommended and Featured stories were FetchFind approved. Users were confused about this inconsistency.
Picture
Picture
  • I would like to change the layout of the wireframe by moving the sorted by section from the left side to the top and test.
  • I would also like to explore a better solution for the layout of the blogs and articles page in order to be more intuitive and visually clear for the users. 

FetchFind taught me,

  • 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.
FetchFind was my first client project at DESIGNATION. I learned the importance of making design decisions not based on our client's preferences but on their brand identity and goals of their target users. I also acquired skills on preparing design presentation decks and presenting my work efficiently and effectively. Working under the constraint of time and limited communication with previous UX team who handed off wireframes, taught me to be more responsible with time framing and to focus on user's point of view and complete tasks on time.

After the project

After working with FetchFind for the previous project, I did freelance work with FetchFind. This was creating pitch deck for 8 minute speech for over 10,000 investors in 2017 at Washington University. My client shared the draft of speech and context. I created slides that contains information and focused on visually supporting the context of the speech. This was completed in 2 days.
Picture
  • Portfolio
  • Me