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.
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.
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.
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.
Home page
Icons are inconsistent, in terms of strokes and filled ins. White text over the photographs is distracting. |
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. |
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. |
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.
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. |
Search page
Users preferred card layout styles but the list layout can be more functional in terms of quickly finding the information. |
Business page
Heavy information with a lot of text, need to find the way to organize to create a natural visual flow. |
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
|
|
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.
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.
|
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.
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.
|
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.
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.
|
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.
|
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.
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.
|
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.
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.
|
Wireframe
|
Wireframe update
|
Final mock-up
|
Mock-ups
|
|
FetchFind today
My client has implemented the color and the typeface I delivered on their website.
My client has implemented the color and the typeface I delivered on their website.
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.
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.
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.
|
|
- 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.
