SparkFun Support Re-Design
The Challenge
The global pandemic of 2019 changed a lot of things, including how customers contact companies that had moved to remote work. With many employees working from home, SparkFun, a robotics company out of Boulder, CO, made the choice, like many companies, to disable phone services temporarily.
The resulting challenge to SparkFun was two-fold:
How do we try to encourage the customers to use email since phones aren't a practical option right now?
How do we reduce the current amount of spam emails as we make it easier for customers to contact us over email? At the time it took a few days for customer service to get back to people because there were so many spam emails coming through, it was hard to tell which emails were important.
The Parameters
The goal of the project was not to overhaul the whole site, but rather make the biggest impact with the fewest changes. Another hope was to find a way to combine both Order Support and Tech Support on one page under a general Support umbrella. I needed to adhere to the current design regulations, add a section for Order Support, a second Section for Tech Support and use my knowledge of information architecture to help organize the FAQ section.
ResearchÂ
I sat down with representatives from Tech Support and Order Support to talk about how to best help the customers. It was important to see how Support -wanted- customers to contact them so I could help funnel the customers in that direction. The exsisting page made it diffitult to get ahold of the right representitive and often the customers had to go through a few hands to get to the right person, which cost time and reduced customer satification.
Another aspect I looked at was: whether customers needed Tech Support or Order support more often. Using heat maps and talking to the support teams led me to believe that Tech Support was most important for customers. Since this company works in many complicated and technical electronics parts, this made sense. I gave the highest priority to Tech Support and it's subsequent information.
Using my knowledge of information architecture, I worked with some of the senior members of SparkFun to organize the FAQ section. It was important that it was intuitive, so the customer can more easily scan the sections, but also that the titles weren't misleading. After a little internal and external testing, as well as looking at competitor FAQ sites to see how the competition stacked up, I created a rough draft to share with stakeholders.
After taking in-depth notes, I went to talk with the head of UI/UX as well as the head of the Engineering team. I wanted to get information on the nature of the beast. During this process, I was able to add Markdown to my tool best as I had to learn that language to create the new page. Once I had the pain points, the parameters, and the expectations from the internal research I set to work on the first wireframe
Initial Design
The original layout of the support page was only directed at Order Support, so I started by creating two columns so I could add in Tech Support information as well as Order Support at the top. These were the two most important things that customers came to this page to use. Under that I laid the FAQ section names out in a horizontal pattern (as opposed to the previously vertical pattern) so that much of it was still visible above the fold. I was told that many of the requests they got from customers were easily answered in the FAQ section.
Conclusion
After a few meetings with the stakeholders, UI/UX, Engineering, and the support teams, we iderated through design options. We looked into tabs, drop down menus, and links for the FAQs and decided to keep it simple. We finalized a design that combined the two halves of support, added a form to help reduce the amount of spam, and created a clear roadmap for the customers to find an answer to their questions.
We reduced time to resolution by 66% as well as reducing spam by 70%
