UI/UX Design

My goal is for users to understand intrinsically what users should do. That means quick iteration and testing.

More coming soon!

My process

How I approach UI/UX design

  • Validated requirements with the design and dev teams
  • Determined options and presented various timelines to set expectations for business owners, designers and developers
  • Generated concepts with design team
  • UI/UX design execution: XD, Sketch, Figma, Photoshop, Illustrator. In all cases, the design was a team effort.
  • Gave specific and clear directions to the developers through interactive mocks
  • Designed, code and launch content pages and changes using HTML, CSS, and SAP Hyrbis CMS impex language
  • Created reusable components to speed project delivery and unify the design of the site
  • Updated site with new or expiring promos

Tirebuyer

Header

Home Page

1. Coded entire page (except auto sizing module), including mobile sliders

Header

Winter Tires

1. Spurred the creation of dynamic pricing and reviews pulled from back-end data.

2. Created sale blurb.

3. Coded entire page.

Header

Wheels Page

1. As with all other pages, fully responsive.

2. Pricing/reviews module that we created.

Header

Installer Signup

1. Simple blurbs highlight the advantages of becoming a Tirebuyer installer.

2. Designed and coded page.

3. Built form using Google Forms and css.

Header

Education Page

1. One of the hundreds of educations pages I built using design components to greatly increase efficiency.
2. Pods at top (vehicle sizing) right, and bottom all all include individuals, reusable components.

3. Effort increased SEO by 800k visits in 6 months.

previous arrow
next arrow

Tire Pros Redeisgn User Flows

The world of tires is (or was to me) surprisingly complex. You have to have a hollistic view of the user experience so you can account for every scenario on the path to purchase. Here are examples of many of the scenarios we had to account for.

Accomplishments

  • Complete redesign of the site
  • Played instrumental role in the company continuing the UI/UX work during a time of massive transition
  • Coded every static page on the site
  • Created template for Learning Center, including repeatable components
Header

Scenario 1

1. User has not entered vehicle
2. Displaying reviews tab

Header

Scenario 2

1. User has not entered vehicle
2. Manufacturer rebate
3. Reviews tab

Header

Scenario 3

1. User has entered vehicle
2. TP rebate
3. Warranty tab open

Header

Scenario 4

1. User has entered vehicle
2. Available sizes tab open
3. 1 size without rebate, one size with rebate

Header

Scenario 5

1. User has entered vehicle
2. Different sizes front/rear
3. Review tab open

previous arrow
next arrow

Mocks and iteration

I’m never afraid to spin out possibilities. That’s part of the fun!

Header

Recommended installers V1

1. Mocks built in Figma

2. Firm display of a massive amount of information

3. Bold colors but they seem like more of a distraction

Header

Recommended Installers V2

1. Moving the map colors to a smaller position to make the colors stand out more.
2.Looks less like a clown show than V1.

Header

Recommended installers V3

1. I think this one is my favorite. Clean with strong CTA.
2. Do over? Yes please. Those map pins look funky.

previous arrow
next arrow