Innovation
Network

Join the Snap-on user network, where you can be inspired by the brilliant work of others, get the most authentic feedback, and enjoy the most detailed tips on how to use our tools and exclusive discounts!

Project Overview

— Design Goals from Client

During the summer of 2021, our team was put together to work for Snap-on Incorporated, the highly successful tool manufacturing company that has been around for more than 100 years. The goal of this collaboration was to:

Create a book highlighting makers and fixers who work at Snap-on manufacturing.

Improve and refine the current Makers and Fixers website.

Develop a new online community to strengthen the connection between the brand and consumers.

Create a new logo for Makers & Fixers’ website.

Problem Statement

Lack of connection between the user and the brand

Existing community cannot effectively attract new members

Lack of professional assistance for users

Current brand communities based on social media platforms are too similar

Our Solution

A virtual community website that provides

Personalized customization

Professional product usage guidance

Ways to strengthen the relationship between the brand and the consumer

Innovation Network

This community is designed for Snap-on’s unique community – The Makers and The Fixers. By providing an engaging digital experience, users see value in a community that elevates innovation in a professional way and strengthens their social connections.

Login/Sign up

Users will access the Innovation Network panel on navigation bar of the Snap-on website. The site requires users to log in to their account, or if they do not have one, they may create one by filling in their email address and password.

Choose Topics

Following registration, users will select some topics they are interested in by clicking on the corresponding image, and these topics will appear on the home page as recommendations.

Loading Page

Once a user has selected the topics of interest to them, an animation of the network's exclusive logo will appear, generating a personalized home page for the user.

Home Page

A banner on the home page (Hero Image) will suggest related works based on the topics the user is interested in. Users can also upload their own work at a click of a button.

In order to present the information and create a visual focus for the community, we incorporated a local navigation with four sections, including text and icons to help provide content for the users with a quick overview of its main features. Additionally, users can click on any of these four components to jump directly to the corresponding area to further explore relevant information.

Browse Featured Projects

The first section is titled "Featured Projects." Users will be able to see the pieces with the most traffic and interest on the main page, while clicking on the "All Projects" button in the upper right corner will allow them to access specific pages to see more creative works made by the Makers and Fixers of the Snap-on community.

Gain Professional Feedback

In the “Share and Grow Knowledge” section, users are given the chance to share their knowledge, experience, and information with each other. Hundreds of Snap-on experts are available online to provide professional and valuable answers, allowing users to grow with the brand.

The Newest Event

In this section, users can find Snap-on's latest events celebrating milestones of the community.

Tool Tips

In “Tool Tips” users can find Snap-on's training videos. These videos are linked to Snap-on's YouTube channel, where users can access professional guidance on how to use the right tools to get the job done.

Exclusive Discounts

Through “Discounts”, users should be able to take advantage of special discounts that are exclusive to you. The more active you are in the community, the more points you will gain allowing users to earn discounts over time.

Contact Us

Find Snap-on's contact information, send a direct emails to the company, or access the most frequently asked questions about Snap-on's services from other customers.

Profile

More engagement in the community will allow users to earn points and exclusive discounts that can be accessed through the Profile page.

Design Process

Our project is developed using the design thinking process methodology, which is divided into five stages: Empathize, Define, Ideate, Prototype, and Test.

Empathize

Opportunity

How might we utilize design thinking to strengthen Snap-on's relationship with Makers and Fixers through engaging digital experiences?

Research Methodology

In order to understand Snap-on's brand positioning and target audience, we used three research methods.

User research

Target user group

Blue-collar, lower-to-middle-income group

Snap-on buyers are primarily males

Technicians

Franchisee

Handyman or hobbyist

Shop Owners and managers

Schools & Students

Competitive Analysis

While analyzing competitors in the market, we compared different brands' visual styles and customer marketing strategies. It is common for brands to use social media to promote their brands, advertise, and interact with their customers. However, on these social media accounts, the content is often focused on event and company culture promotion, not unique to the users needs. This leads to weak engagement within the community and questions posted by the users are often left unanswered. As a result, these online communities tend to be homogeneous, lack character and leave users hanging for answers.

User Interview Insights

We conducted 12 in-depth interviews with a wide range of Makers and Fixers from mechanics, to shops owners and set designers. A discussion guide was created focused on gathering feedback and insights from these members of the Snap-on community. Through these interviews we were able to have a better understanding of Makers and Fixers’ needs and painpoints.

Define

Affinity Map

We collected 306 data points through our research and then affinity mapped our data to consolidate the high common ideas and condensed them into 11 final insights.

Persona

Based on the target user groups and all the information collected through the research, we developed two fictional personas that represent the target user group for the website. By defining our target audience, we had a solid foundation to move forward with ideation and prototyping.

Key Finding

Based on the affinity map and personas, we realized that customers:

Ideate

Design Criteria

Based on our research finding, we concluded 5 design criterias for ideation.

Personalization

Users should have the option of browsing relevant creative projects based on interests and needs, and be eligible for additional discounts.

Navigation with high efficiency

Users can easily access the main features of the website, gain a quick overview of content they're interested in, and achieve their goal efficiently.

Creative content

Users have the ability to share behind the scenes of projects so that other users can also be inspired by the community.

Professional training

Experts will answer questions from the community with professional guidance, and enhance users' sense of brand identity and loyalty.

In the loop

Keep customers informed of the brand's latest news and events to drive customer engagement.

Prototype

Information Architecture

Based on the five design criteria identified, we mapped out the information architecture and user flow to illustrate our website's structure and functionality.

User Flow

Wireframe and User Testing

Having planned the user flow, we began to develop the wireframes of the site’s main section. After which, we conducted user testing to gain feedback from our users and iterate the Hi-Fi design.

Reflection

This collaborative project was a very different experience than regular classes. Designing a solution for a company requires consideration of the needs of the user and  the client, as well as how to provide the best user experience while also considering the limited budget.

Put the user's needs first

Think from the perspective of users, and take human-centered design into account

Clear brand design guidelines

Understand the brand's market position and visual style before starting the design,ensuring that the design language of the website is consistent with the brand's design language.

Communication

Communication is a vital part of a collaborative process. Take the time to learn effective communication techniques and listen to effective feedback throughout the design process.

Next Step

1. Consider enhancing the content types and content forms of tooltips.

2. Besides price discounts, we may also consider offering other forms of rewards more engagingly and interestingly.

3. Adding support pages to the project will improve the integrity of the project and provide a more diverse way of interacting with consumers.

4. Inform customers about nearby store activities and special offers based on their location.

5. Standardized the design system, unified icon types, and established spacing size prior to handover.

01 Project Overview02 Final Design03 Design & Research04 Ideation05 Reflection