UI / UX Snap-on Website redesign:

Role: UX/UI Designer

Wireframing, UI Design, User Experience, Developer Handoff, Content Management

During my internship at Snap-on, I was selected to design the wireframes and user experience for the new SBS website. I developed both low-fidelity and high-fidelity wireframes, created detailed interaction specifications for development, and collaborated with the lead developer throughout implementation.

My role:

Designed website wireframes and page layouts in Figma
Planned user flow and site navigation
Created low-fidelity and high-fidelity wireframes
Developed interactive design specifications for developers
Collaborated with the lead website developer
Managed website content through Contentful after development
Provided placeholder content and imagery for design direction
Documented hover states and visual interaction behaviors

Existing Website Analysis:

Goals for Improvement

Modernize the visual design
Improve content hierarchy and readability
Strengthen calls-to-action
Create a more engaging homepage experience
Enhance overall navigation and usability

Before beginning the redesign process, I evaluated the existing SBS website to identify opportunities for improvement. This analysis helped establish priorities for navigation, content organization, visual hierarchy, and overall user experience.

Project Goal

The objective was to create a modern website experience that effectively communicated SBS products and services while providing clear navigation and strong calls-to-action. Since there was no existing design reference available during the planning stages, I was responsible for establishing the site's structure, content hierarchy, and overall user experience from the ground up.

Lofi Wireframe Mockups:

To begin the design process, I developed low-fidelity wireframes in Canva to establish page structure, user flow, and content hierarchy before introducing visual design elements.

Because there was no existing redesign concept available as a reference, I focused on building intuitive layouts that incorporated key website components such as navigation, hero sections, calls-to-action, service information, and page hierarchy. This stage allowed me to quickly explore ideas and validate page structure before moving into high-fidelity designs.

High-Fidelity Wireframes & UI Design

After establishing the site's structure, I created high-fidelity wireframes in Figma that served as the foundation for development.

The designs included:

Complete page layouts
Navigation design
Hover-state interactions
Hero banner concepts
Visual hierarchy improvements
Transparent navigation treatments
Drop-shadow specifications
Placeholder imagery and content references

I also explored the use of a moving hero video background to create a more dynamic and engaging first impression for users.

Although much of the text and imagery were placeholders, these elements provided direction for development and were later updated through Contentful.

Below is the wireframes, view the prototype link for the best viewing experience.

SBS Home page

EPC 5

*The GM Parts connect page needed to be their branding

One iteration includes a video background for the hero section.

GM Parts Connect #1

GM Parts Connect #2

One iteration includes a video background for the hero section.

ProPackage #1

ProPackage #2

PartsManager Pro #1

PartsManager Pro #2

PartsManager Pro Contact Form Page

Support & Resources page

Key Design Decisions

Interactive Navigation

Navigation designs included hover-state behaviors and subtle transparency effects to improve usability while maintaining a modern aesthetic.

Dynamic Homepage Experience

I explored motion-based design concepts, including a video hero background, to create a more engaging landing page experience.

Visual Hierarchy

Content was organized to guide visitors naturally through each page and highlight important information and calls-to-action.

View Prototype

Once the designs were finalized, they were shared with the lead developer for implementation. My Figma files served as detailed development references, including page layouts, interaction behaviors, and visual specifications.

This collaborative process ensured the final website closely aligned with the original design vision.