- Role: UX/UI Design Lead
- Deliverables: Mockups, Design Specs, UI Animations
- Tools: Adobe XD, Illustrator, After Effects, Photoshop
- Date: November 2017
The Core Problem
Buyerzone.com (one of Purch's subsidiaries) is a lead generation company that collects leads through online forms. Many of BuyerZone's forms exist as a landing page on its site, including their forklifts lead generation form. For this project, my focus was to redesign the Forklifts lead generation form with the intent of increasing form submissions. Due to the bold choice of colors in my design, my team and I affectionately referred to this design as the Slayer design, or Slayer for short.
Design Issue #1
On wider desktop screens, there's excessive whitespace on either side of the page.
Design Issue #2
Outdated Design Elements
Various design elements appear outdated including (1) the forklifts icon, (2) the black rectangle behind the word "Forklifts", (3) the fade on the left of the background graphic, (4) the arrow pointing toward the lead gen form.
Design Issue #3
There's 4 different fonts on the page without a clear hierarchy or purpose for the fonts.
Design Issue #4
Value Prop Location
The value proposition is below the fold. The whole purpose of the value proposition is to motivate the users to complete the form. So if users cannot see the value prop., what motivation do they have to complete the many steps in the form?
Design Issue #5
It's difficult to tell where the boundaries are for the question options. While its clear that users can click the circle representing a radio button, its unclear that the icon, the surrounding space, and the text beneath it is clickable as well.
Design Issue #6
The icons are a good fit for the options they represent; however, they could use an aesthetic update, along with the rest of the form.
Design Issue #7
Varying form height
The form shrinks and expands based on the amount of content present in the form's box, and the amount of content present can vary from page to page. This causes the position of the "NEXT" button to vary constantly.
Design Issue #8
Inconsistent Icon Design
The icons appear as though they are from different places, rather than appearing as components of a single experience.
Design Issue #9
The "I" icon
(1) The information displayed after clicking the "i" icon is lengthy and it pushes the other content down, increasing the height of the lead gen form. (2) The X button on the top left corner of the modal is too faint to see.
Design Issue #10
Absent Hover States
None of the question options have hover states. Not only is this a deviation from a UX best practice, but it's inconsistent as both the "NEXT" and "PREVIOUS" buttons have hover states.
Design Issue #11
Faint Loading Spinner
When submitting the form, users are presented with a loading spinner. The spinner is faint, and is placed in the center of the screen, rather than the center of the lead gen form, further making it difficult to see. Additionally, the spinner could be present on the user's screen for a couple seconds. Users who do not see the spinner could be left feeling that something on the site has broken or frozen.
Design Issue #12
There is only one way for users to navigate backward in the form. Unfortunately, if a user is at the end of the form and wants to review their responses, the only way for them to do this is to repeatedly hit the "PREVIOUS" button until they reach their desired pages, then repeatedly hit the "NEXT" button until they get back to where they were.
After identifying potential usability issues, I jotted down ideas for how to address these issues through changes to the UI. These notes on UI changes evolved into low-fi wireframes. I used these wireframes to convey my ideas when meeting with the front end team to discuss technical limitations.
Font: Muli, RegularThis font was used for headings, labels for text fields, and text in CTAs.
Color: Fire BushI noticed this color was often used on forklifts. As such, I felt it'd be perfect to use on a forklifts lead gen form. I used this color for hyperlinks on the page.
Color: Pumpkin SkinI chose Pumpkin Skin as the color for link active states because it matched Fire Bush, while being different enough for users to perceive the difference between the two colors.
Color: TundoraBecause of its readability, I used Tundra for headings and paragraph text.
Key Design Solutions
Design Improvement #1
Relocated Value Prop
I moved the value proposition to the top of the page and added a jumplink to a section below the fold with more information.
Design Improvement #2
Table of Contents
To address the issues with poor navigation, I added a table of contents that will take a users to any page that they've already visited.
To help guide the front-end team, I prepared design specs with Adobe XD. These specs provided dimensions, colors, font sizes, etc., for every element on the page.
Page load animation.
Hover states, active states, and page transition.
The natural next step would be to test this new design. I’d like to gather data on many performance indicators including:
- Exit rates for each page of the lead generation form.
- The pages where users are spending the most amount of time.
- The overall amount of time users are spending to fill out the form.
I'm looking forward to testing Slayer and gathering detailed data!