State of Mind Customs: Website
ROLE: Product Designer (Research, Interaction Design, Visual Design, Content Strategy, Project Management)
CLIENT: State of Mind Customs (SOMC) (Freelance Client Project)
DURATION: April 2020-May 2020
“Working with Leah has been such a positive experience for us as business owners. From the start, she clearly communicated the step-by-step process needed to achieve the outcomes we were looking for. We loved how she was able to engage our previous customers in the user testing so we would know exactly what our future customers were looking for in order to select us for their restoration project. Leah kept us on task with her 'asks' and shared her progress and 'aha' moments along the way. Her enthusiasm, design experience, and project management skills gave us the confidence to know that we would have a beautiful end product. The customers who were engaged with her in the user testing were just as excited as we were to see the new site. We would highly recommend her services to anyone looking for a great website!”
—Owners, State of Mind Customs
THE CHALLENGE
Create a website for State of Mind Customs that provides customers with the information they need to hire SOMC for their automotive restoration project.
THE RESULT
A new website for State of Mind Customs that is accessible on any device and includes detailed information about services offered, projects completed, and the experience and credibility of the owner and staff. A year after the new website launched, it resulted in:
61.2% increase in visitors
110.5% increase in mobile visitors
412.6% increase in visitors to the new website's Projects pages over the old website's Gallery page
BACKGROUND
SOMC describes themselves this way: "State of Mind Customs provides a full range of vintage vehicle and classic car services from chassis-off restorations to repairs and insurance claims on your vintage or classic auto. From complete restorations to floor pans and wheels, your project is not too big or too small for SOMC." The first SOMC website was not responsive. You can view some of the website pages here. SOMC asked me to create a new responsive website, and I gladly accepted the challenge.
Research and Discovery
Methods: Competitive Analysis, Survey, Google Analytics
USER SURVEY
To learn more about what's important to vintage car owners, I created a survey and asked the owners to put together a list of potential survey takers who were current customers, former customers, or employees. I surveyed 6 customers and 2 employees of SOMC. Participants were females and males ranging in age from early 20’s to mid 70's. You can view the survey here.
"I was interested in the quality of the vehicles they restored and the types of work and services they offer."
"I liked the gallery the best."
"While looking at the website on my phone the text was extremely small."
MARKET RESEARCH
I worked with the owners of SOMC to create a list of competitors. From this list, I chose East Coast VW Restorations, Motorworks Restorations, and Skinner Classics. I visited each competitor's website and conducted a competitive analysis, focusing on the Home page, Services page, and Gallery page. You can view the full competitive analysis here.
GOOGLE ANALYTICS
I also reviewed the Google Analytics statistics for the existing website from April 2019-April 2020, and discovered some interesting facts. For example, the website was viewed mostly on desktop, followed by mobile. The majority of users visited the Home page first, the Gallery page second, Services page third, and Contact page last. The first channel through which users came to the website was Direct, followed by Organic Search, followed by Referral, and finally, by Social Media. Users stayed on the website for up to 3 minutes. The majority of users visited up to 5 pages.
Defining the Problem
Method: Empathy Map
INSIGHT INTO USER NEEDS
After completing the user research, I created an empathy map to synthesize the information that I gathered. I looked for patterns, themes, similarities, and contrasts. Doing so helped me uncover insights and begin to define user needs in greater detail.
KEY FINDINGS
The Google Analytics statistics correlated with the two pages visited most by the survey takers: Gallery and Services. Many users said that their favorite part of the website was the Gallery. However, users reported that since the site was not responsive, the text, images, and navigation were too small on mobile devices. Users wanted a more detailed explanation of projects and more photos of these projects. Users wanted a more detailed explanation of the services offered. Customers who've worked with SOMC in the past are very satisfied with their level of service and the shop’s expertise. They only have high praise and trust for SOMC. However, most users believed that the website could feature the shop's expertise more prominently and in more detail. Users liked how simple the website was and how easy it was to navigate.
Strategy
Methods: Project Goals, Product Roadmap, Site Map, Content Strategy
PROJECT GOALS
Moving from research and into the next stage of defining the new website, I considered the overlapping goals of SOMC and its potential users. I discussed and confirmed these goals with the owners.
PRODUCT ROADMAP
Utilizing my research and knowledge of business and user goals, I created a chart with features presented in order of priority, along with proposed metrics to assess their impact and effectiveness.
SITE MAP AND CONTENT STRATEGY
After creating a site map of the existing website, and reviewing the research and goals, I created a new site map showing the new information architecture. The new website pages are highlighted in yellow below.
As I presented my research to the owners, I explained that users wanted to see more projects, a wider variety of projects, and the projects themselves in greater detail. We decided to add more projects, add greater detail to each project, and recategorize them. This meant showing 39 projects instead of just 13, which we hoped would attract a wider range of customers. We also hoped this would help prospective customers find projects like their own more quickly.
The existing site had very little information on the services offered. I explained to the owners that their customers were looking for this information, and wanted more details on it. The owners agreed to write more content about the services offered and their general process. By adding this content, we hoped to attract new or returning customers, leading them to contact the shop.
Finally, I explained to the owners that users wanted to learn more about the owner's background and certifications. The owners agreed to include testimonials from past customers and write a more detailed biography of the owner and staff. We hoped that this new content would increase user trust and help convert prospective customers into customers.
Interaction Design
Methods: User Flow, Crazy 8's (Brainstorming), Sketching, Style Tile, Wireframes
USER FLOW
Using my research and new site map as a guide, I created a user flow of how a potential customer may interact with the new SOMC website.
BRAINSTORMING
To begin the brainstorming process, I used the Crazy 8's brainstorming technique to generate ideas within a short time frame, focusing on some key screens. You can view the Crazy 8's here. Referencing the user flow and site map, I also sketched key screens.
MID-FIDELITY WIREFRAMES
Using my sketches as a reference, I created mid-fidelity wireframes in Figma. I referenced the Google Material Design Guidelines for inspiration and best practices. I sent the owners of SOMC the mid-fidelity wireframes and user flow for approval. I explained that I chose to focus on these key screens because according to my research, these pages contained the information that users wanted the most.
STYLE TILE
Since the owners wanted to keep their original logo, I didn't want to deviate from the strong branding that they used for years. The owners emphasized how they wanted a very clean and simple website. To further expand on the existing branding, I created a style tile.
HIGH-FIDELITY WIREFRAMES
After the owners agreed to move forward with the wireframes, I created high-fidelity wireframes in Figma. Using my knowledge of Bootstrap and HTML/CSS, as well as device-specific grid systems and breakpoints, I designed screens for desktop, tablet, and mobile to ensure that they worked in a responsive environment.
Usability Testing
Methods: Prototype, Testing Script, Affinity Map
PROTOTYPE
I created a prototype in Figma that I could share with users. You can view a video of the prototype below.
USER TESTING
In order to begin user testing, I created a script with 2 tasks for users. You can read the user test script here. The test focused on these 2 tasks:
1. You own a VW Dormobile Camper and you want to have it restored. Walk me through how you would visit the site to learn more.
2. You decide to contact the shop. Walk me through how you would contact the shop.
I tested the prototype with 3 current or former customers via video chat. Participants were males ranging in age from mid 40’s to mid 60's.
"I like how it’s not a sea of text and how everything is concise."
"You can see the quality of the work that was done in detail here."
"Details about his background are a positive thing to have before you decide to talk to him."
AFFINITY MAP
I took the results from my user tests and created an affinity map that included pains, gains, and observations. After sharing it with the owners, we agreed on areas for iteration.
TAKEAWAYS
On the Services page, one user suggested adding that SOMC fabricates its own parts. One user was confused by the “Parts Restoration” header on the Services page, and wondered if it could be worded better. On the Home page, one user said that if he sees a photo above a quote that enticed him, he wants to click on it to learn more, but was disappointed that he couldn’t. Each user wanted to visit the About page first, and looked for it higher up in the navigation menu.
Overall, users were very satisfied with the photos and text on the website and the way the content was organized. Users found the site easy to navigate and intuitive. They liked that the content was concise, yet gave them the information they needed. Users appreciated the level of detail that went into the Services, Process, and About pages, since they felt that gave them the information they needed to contact the shop. Two users even mentioned that the Services page made them think about returning to the shop to have more work done. On the Projects page, users liked how the photos showed the full timeline of the project from the beginning to the end, the brief history of the project, and the customer quote.
Iteration
Methods: Wireframes, Prototype
While referencing my affinity map, I revised the wireframes once again. On the Home page, I added buttons below each quote so the user could view the quoted person's restoration project. With the owner's permission, I rephrased “Parts Restoration” to “Parts.” On the Services page, I worked with the owners to add new text about the shop's custom fabricated parts. Finally, I moved "About" to the top of the navigation menu.
I created a new prototype in Figma from the revised wireframes. You can view a video of the prototype below.
Live Website
Method: Squarespace Content Management System
The owners wanted to maintain the website themselves after it was built, so they chose Squarespace for their content management system. I used Squarespace to implement the design. You can view the site here: stateofmindcustoms.com.
A year after the new website launched, it resulted in:
61.2% increase in visitors
110.5% increase in mobile visitors
412.6% increase in visitors to the new website's Projects pages over the old website's Gallery page