LiftGateMe
Home Page Redesign
The Product
LiftGateMe is one of the largest single source distributors for America's leading liftgate brands.
The Problem
LiftGateMe needs a homepage redesign to broadcast their brand presence, help their users discover new product offerings, and ultimately, convert those users to paying customers.
The Goal
Redesign the home page to build a funnel that will attract, guide, and convert visitors.
-
ROLE
Solo UX/UI Designer redesigning the homepage for LiftGateMe
-
TOOLS
Shogun Page Builder
Figma
-
DURATION
August 2023 - September 2023
2 weeks -
DUTIES
Paper and digital wireframing
Designing a sticker sheet
Conducting usability studies
Accounting for accessibility
Iterating on designs
Maintain brand identity
Understanding the User
Summary
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. I also interviewed LiftGateMe’s Founder to understand what outcomes he desired from a homepage redesign.
Research surrounding use of the landing page identified specific barriers for the user including confusion in the product layout, locating appropriate CTAs, and accessibility of the secondary buttons. Additionally, LiftGateMe Founder requested an improved and uniform brand identity.
Usability Study
I conducted an unmoderated usability study on the pre-existing homepage before beginning my designs. The purpose of the study was to determine where users struggle when navigating the landing page and identify possible design solutions to address these pain points.
8 people were interviewed and the major findings are listed below:
62.5 %
Users who expressed frustration over the disorganized layout in the product section
62.5 %
Users who had difficulty reading the CTA buttons identifying liftgate brands sold
37.5%
Users who were unable to identify that the blog post titles were functional links
User Persona: Douglas
Problem Statement:
Douglas is the primary owner of a truck maintenance and repair shop who needs access to an online source for ordering liftgate parts because his busy schedule does not allow for him to wait on hold for manufacturers to place orders directly from the warehouses.
Starting the Design
Digital Wireframes
Digital wireframing allowed me to focus closely on the organizational aspect of LiftGateMe’s homepage and existing design. I wanted to concentrate on improving the layout of the best selling liftgate parts to improve the user’s experience scanning through the products by removing the haphazard display. I also made sure to rework the existing buttons since I noticed sizing varied based on text length.
Features:
Card layout used for best selling parts to provide structure and consistent proportion.
Equal sized buttons are used to indicate similar functions and establish order.
Accessibility Considerations
The color of the buttons when inactive were not easy to read making them a major pain point for most users.
The disorderly layout led to confusion and made it difficult for a screen reader to dictate appropriately.
The buttons were also of varying sizes which resulted in inaccurate displays of visual hierarchy. I modified sizes to maintain order.
Finalized Designs
Keeping in mind all key issues shared by the participants, I moved on from digital wireframes to create mockups for the new homepage. I set my primary focus on establishing order within each section of the landing page and making sure that all buttons were usable.
As seen below in the before images, the buttons identifying manufacturers varied in size and were extremely difficult to read due to the color palatte. Modifying the design and allowing for color contrast helps to reduce eye strain and provide a better experience for the user looking to shop by brand. Once that piece was complete, I aimed to ensure all links were shaded blue to ensure their function was recognizable to all users.
Along with the theme of color, I noticed that different shades of black, gray, and blue were used through the homepage with no true consistency. I created a sticker sheet to confirm all elements on the page would be cohesive and help promote brand identity.
Sticker Sheet
Before usability study
After usability study
Key Takeaway
What I learned
Going through the design process for a preexisting website allowed me to get a realistic view of how iteration is such a key component of the design process. Although the original homepage was functional, some minor changes made such a big impact and improved accessibility.
“LiftGateMe is ecstatic to see the progress made in our homepage in only two weeks and cannot wait to measure the click through rates of site users.”
Next Steps
1
Conduct another round of usability testing to assess resolution of primary pain points identified in the first usability study.
2
Relocate blog articles to a separate page with a navigation bar link to draw user’s attention to the best selling products and convert visitors.
3
Modify the navigation bar and footer of the page in order to increase LiftGateMe’s logo and improve design consistency. The header and footer were unable to be changed in this redesign since Shopify controlled those aspects.