FBS Distribution Website - CASE STUDY
Web & UX design (and many additional graphic elements)
Project Description
When I started working at FBS there was an existing brand, but it was in need of some modern updates. After completing a refresh on the brand design, it was time to fully develop a new website. Below, I will discuss my design process, and subsequent user experience studies to ensure that my designs functioned efficiently for the brand.
Featured pages below ↧
BRAND DESIgn
My first task at FBS was somewhat self assigned. I noticed there was no consistent use of any particular blue for the logo, and the choice of fonts and design styles across FBS products was somewhat all over the place.
I created a brand guide, cleaned up the logo, and chose a more modern font to compliment the brand.
style guide
Research
Before beginning work on the site, I analyzed similar brands and competitors in the market, to see where FBS could stand out.
Findings
- Competitors such as 3M are much less specialized.
- Many alternative brands are large conglomerates who don’t necessarily research the needs of individual mechanics or custom car painters in shops.
- FBS stands out by understanding & researching their specific audience, and only focusing on the products in their line.
- Most companies in the automotive, marine & industrial spaces do not have modern websites, and some have no website at all.
- By making the FBS website clean, modern, and user friendly, FBS will already stand out from similar brands.
Design
There was already a rather long list of sites that my company liked & was inspired by, so I began collecting elements from each one to create some initial layouts.
In this process, I also simplified a few menu items, reducing the site map to only the necessary pages.
Here are my initial draft sketches and ideas, then my final homepage sketch -> to mid and high fidelity mockups using Adobe XD.
Site development
The existing FBS site was created with WIX, which I felt was limiting in some capacities for what FBS needed. I made the decision to switch to WordPress to open the option of having plugins rather than wix’s toolset. (We don’t have a developer on our team so a custom site was not an option).
A key piece of the website’s success was to make sure the website remained familiar to our users, while only updating the design.
existing (now previous) website
Click to see larger view & descriptions
Testing
Testing for this site included interviews with some of the target audience, as well as tracking user behavior once the site was up and running using Google Analytics.
I was most interested in making sure the users were able to find key information in an efficient way.
Main Calls to action
- Search the Chemical Compatibility Guide to figure out which chemical to use with a sprayer
- Use the Dealer Locator to find the nearest store
- Access the product catalog or product page to view all FBS products
SECONDARY
- Find info about FBS
- Contact Us for questions
Important data
By tracking user engagement to the new site, I was able to see a direct increase in the amount of time users were spending on the Chemical Compatibility Guide. This, paired with a decrease in the use of the “Contact” page, led me to understand that users were now more easily able to find the information themselves rather than calling in or using the contact form when they were confused.
I also found it helpful to track traffic acquisition by source, which helped FBS find user forums and discussion groups that were sending people straight to the site.
With this information, I was then able to reach out directly to customers with relevant advertising on products they were interested in.
Overall, there has been a steady growth of user activity since launching the site (with a slight decrease during the Christmas holiday for obvious reasons), with over 2.3K new users and counting.
Overall, there has been a steady growth of user activity since launching the site (with a slight decrease during the Christmas holiday for obvious reasons), with over 2.3K new users and counting.
Biggest Challenge
It was difficult to find a metric to measure success for this website, since FBS does not sell direct to consumers. I couldn’t track the direct growth of sales, or the number of inquiries about products.
Final WEBSITE
Solution
I instead focused on user behavior and engagement with specific pages.
A main goal was to provide information about chemical compatibility with FBS sprayers, and locations where users can buy these products. Using a mix of user testing and studying user behavior with Google Analytics, I was able determine that users were now more easily able to access the information they needed, as well as understand how to use these tools by designing them in a familiar way.
Other takeaways
Something I would love to do in the future is to have more opportunities to interact with customers directly. Many of the users of FBS products are mechanics and custom painters located outside of my region, so I was limited to speaking with clients that our sales team was able to put me in touch with.
I also would have loved to be working on a team to have others to bounce ideas off of, and somewhere to receive more direct feedback about my designs.
Final WEBSITE
Thanks for reading!
Check out more of my projects below ↧