jm_white
Slayer
Web App Redesign
Project Details

  • 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.

My Approach

Here's an outline of my design process, with jumplinks to each corresponding section.

1: Design Evaluation

I evaluated Buyerzone.com's forklifts lead generation form for weaknesses and user experience issues.

2: Wireframes

I created wireframes for design concepts that addressed the UX issues I found during my evaluation.

3: Style Choices

Here's how my designs addressed the core issues facing Buyerzone.com's lead generation form.

4: Final Designs

My final designs for Buyerzone.com's forklifts lead generation form.

5: Key Design Solutions

My rationale behind the colors and fonts I used when redesigning Buyerzone.com's forklifts lead generation form.

6: UI Animations

I created UI animations to help communicate the web app's intended behavior.

Design Evaluation

Below are screenshots of key problem areas I noticed on Buyerzone.com's Forklifts lead gen form. Pro tip: Click on each image to view a larger version.
Wireframes

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.

Style Choices

Here are the colors and fonts I chose for this project.
Aa

Font: Muli, Regular

This font was used for headings, labels for text fields, and text in CTAs.

Color: Fire Bush

I 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 Skin

I 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: Tundora

Because of its readability, I used Tundra for headings and paragraph text.

Final Designs

Here are the final design concepts I created for Buyerzone.com's forklifts lead generation form.

Final design concepts for a new Buyerzone.com lead generation form.

Key Design Solutions

Below are my solutions to the bigger issues I noticed in Buyerzone.com's forklifts lead gen form. Pro tip: Click on each image to view a larger version.
Design Specs

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.

UI Animations

To illustrate the app's behavior, and to help guide the front-end team, I created some animations.

Page load animation.

Hover states, active states, and page transition.

Form submission.

Next Steps

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!




Questions about this project?