UI/UX Design
My goal is for users to understand intrinsically what users should do. That means quick iteration and testing.
More coming soon!
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
Home Page
1. Coded entire page (except auto sizing module), including mobile sliders
Winter Tires
1. Spurred the creation of dynamic pricing and reviews pulled from back-end data.
2. Created sale blurb.
3. Coded entire page.
Wheels Page
1. As with all other pages, fully responsive.
2. Pricing/reviews module that we created.
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.
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.
Tire Pros 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
Scenario 1
1. User has not entered vehicle
2. Displaying reviews tab
Scenario 2
1. User has not entered vehicle
2. Manufacturer rebate
3. Reviews tab
Scenario 3
1. User has entered vehicle
2. TP rebate
3. Warranty tab open
Scenario 4
1. User has entered vehicle
2. Available sizes tab open
3. 1 size without rebate, one size with rebate
Scenario 5
1. User has entered vehicle
2. Different sizes front/rear
3. Review tab open
Mocks and iteration
I’m never afraid to spin out possibilities. That’s part of the fun!
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
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.
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.
My process
