top of page
read full case study
PROJECT OVERVIEW
Founded in 1985, Buzz Box Liners is a Canadian company that sells vehicle and trucking accessories. My role in this project was to help them re-brand and establish a digital presence by re-designing their logo and developing a fully functional e-commerce website that could host over 450 individual products.
Overview
SUMMARY
Responsibilities
Product Management
UI/UX Design
UX Research
Brand Strategy
-
Helped develop and establish the company's overall branding and digital presence.
-
Sourced and onboarded the appropriate talents to help develop the project.
-
Managed the end-to-end process, from visual design, to prototyping, to interaction design, research and ensuring quality for final delivery.
Team
Myself as the project lead and uiux product designer in collaboration with two software engineers in charge of implementing custom codes
Deliverables
the problem statement
The company had been around for over 30 years with a well established offline client base but they had a very low online presence with an outdated website that was purely informational with no e-commerce capabilities and was not mobile or tablet optimized. In addition, the rise of the Covid pandemic was a threat to their business, so they needed help building and establishing a strong digital brand.
Problem
Development
development process
agile methodology
brand guidelines
logo design
color palettes
typography
The following are used as main fonts to reflect the overall company's brand identity:
The following are used as secondary fonts to complement primary types and support the overall typographic design system:
The following are used as tertiary fonts which ensures design consistency for body texts:
iconography
Brand guidelines
exploration
S.W.O.T
Conducted a competitive analysis in order to come up with an overall UI/UX design that stands out from the competition:
-
Competitor Strengths: good visual design and well established offline brands
-
Competitor Weaknesses: all using similar red tone palettes that can make it hard for consumers to distinguish one company from the other
-
Market Opportunities: very few industry competitors have a fully functional e-commerce site where products can directly be purchased online, most are purely informational or lead generation sites
-
Market Threats: the rise of the pandemic could lead to a sudden rush of new e-commerce market entrants due to the need to shift to an online digital business model
initial sketches
initial prototype
exploration
iteration
project scope
Initially, the website was supposed to be designed to mainly showcase all categories and be oriented towards lead generations but after the initial prototype, the company decided they wanted to update the project scope and develop a full on e-commerce site that would now allow their customers to also purchase products directly from their website. As a result, the new user flow design became much more complex:
iteration
solution to the problem
In order to establish the company's digital presence, I helped develop an e-commerce website optimized for User Interface (UI) and User Experience (UX). In addition, the final site is comprised of a modern layout, members login area, payment integrations, live chat, email triggers and notifications, along with desktop and mobile optimization.See below an overview of the live site:
Final WEB design
MOBILE OPTIMIZED design
accessibility TESTING
The final site was also tested for accessibility towards people with disabilities to ensure it meets the Web Content Accessibility Guidelines (WCAG 2.1 Standards). The results came back with high score to compliancy:
conclusion
challenges
constraints and limitations
As the project progressed, a major issue turned up regarding setting up shipping rates as the real-time quotes generator software that the company wanted to use was not yet compatible with the hosting that the site was being developed on.
A development sandbox documentation for the rest API along with development environment credentials was provided and it seemed that for the time being, the rest API was only available for integration for sites based in the U.S and therefore couldn't provide real-time shipping for stores selling items within Canada.
trade-offs
After brainstorming multiple solutions and even trying to integrate other API's that had similar purposes, the same issue continued to arise, location still remained an issue. At last, I went back to the client to discuss the issue at and proposed that we integrate the following method in order to solve the problem:
Leverage Google Sheets to gather the height, width, length and weight of each of the 482 products that were to be added on the site.
Then, go into the real-time quote software and manually add and assign a category for each Canadian province into the Shiptime Box Library (found at shipping > boxes). For this step, decimals had to be removed and rounded up because the system only allows whole numbers and requires upgrading the input to the next size up.
Note that each category has also been split into sub-categories 9(1), 9(2), 9(3), ect...This was strategically done because the next step involved gathering a centrally located postal code for each province, then manually gathering individual quotes based on box sizes and weight. In this case, the postal codes are being used in order to generate the cheapest rate for each option.
Finally, the average for each category had to be calculated in order to input onto the website. Although it is not real-time shipping quotes, each product now offers the best rates possible based on the constraints.
impact
The website was launched and delivered and as a result the company was able to establish their online presence and increase their revenue through online sales, the site successfully launched in Summer 2021.
Measuring success
As of January 2022, the company website has showcased an average of 22.9% conversion rate since the launch of its site. The formula used to determine the conversion ratio is as followed:
WHAT I LEARNED
Every project that I work on always teaches me something new and valuable...
In this case, I had the opportunity to collaborate with engineers while managing the overall end-to-end process of developing an advanced e-commerce site, along with being able to improve my overall UI/UX design skills and work on a project that required the development of a complex user flow. In addition, the challenges, constraints and limitations related to the API integration taught me to how to be more adaptable and come up with solutions as things don't always go as planned in the design world. Being able to embrace challenges, solve problems and come up with creative solutions are my biggest takeaways from working on this project.
challenges
solution
impact
bottom of page