top of page
Meva-06.gif
buzz blue.png

#design

E-COMMERCE WEBSITE 

1d6d3f5165f50fdf01de8e36467a9995.png

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

agile final.png

brand guidelines

logo design

portfolio design_edited.png

color palettes

COLOR PALETTE.png

typography


The following are used as main fonts to reflect the overall company's brand identity:

primary fonts.png

The following are used as secondary fonts to complement primary types and support the overall typographic design system:

secondary fonts.png

The following are used as tertiary fonts which ensures design consistency for body texts:

tertiary fonts.png

iconography

incons.png
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

competitive analysis.png

initial sketches

Copy of Search - Canva.png

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:  

UI Design User Flow final.png
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

website.png

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:
 

test1.png
testresult.png

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.

shipping list.png

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. 

IMG_2099.jpg

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:
 

conversion rate formula.png

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