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!
— 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.
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
A virtual community website that provides
Personalized customization
Professional product usage guidance
Ways to strengthen the relationship between the brand and the consumer
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.
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.
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.
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.
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.
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.
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.
In this section, users can find Snap-on's latest events celebrating milestones of the community.
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.
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.
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.
More engagement in the community will allow users to earn points and exclusive discounts that can be accessed through the Profile page.
Our project is developed using the design thinking process methodology, which is divided into five stages: Empathize, Define, Ideate, Prototype, and Test.
Empathize
How might we utilize design thinking to strengthen Snap-on's relationship with Makers and Fixers through engaging digital experiences?
In order to understand Snap-on's brand positioning and target audience, we used three research methods.
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
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.
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
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.
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.
Based on the affinity map and personas, we realized that customers:
Ideate
Based on our research finding, we concluded 5 design criterias for ideation.
Users should have the option of browsing relevant creative projects based on interests and needs, and be eligible for additional discounts.
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.
Users have the ability to share behind the scenes of projects so that other users can also be inspired by the community.
Experts will answer questions from the community with professional guidance, and enhance users' sense of brand identity and loyalty.
Keep customers informed of the brand's latest news and events to drive customer engagement.
Prototype
Based on the five design criteria identified, we mapped out the information architecture and user flow to illustrate our website's structure and functionality.
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.
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.
Think from the perspective of users, and take human-centered design into account
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 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.
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.