PROJECT
FetchFind website re-designAfter 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 DesignerTEAM
2 UI Designers & Art Director |
Problem StatementAligning the visual elements with the business goalsOur 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 hierarchyThe Icons currently being used were inconsistent, and the texts over the blurred images were hard to read.
SolutionEstablish casual and friendly but also authoritative visual brandIncorporate 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.
ChallengesSatisfy both different user types with different goalsPet 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 contentWe needed to find solutions on text-heavy content to visually digestible UI to guide users to find the answers they are looking for.
|
Getting acquainted
|
Style directions In order to convey a welcoming and friendly feel while maintaining professionalism,
|
Style-tilesSTILE TILE 1
|
STILE TILE 2
|
STYLE TILE 3
|
Final Style-tileMy 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 testingMy 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 testingTHE 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-guideAs 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
|
After the projectAfter 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.
|