Project
Spidertech
UX · Information Architecture · Wireframing · Branding
Overview
As a contractor, my partner and I (Cameron Fong) took on this project to solve Spidertech’s problem of an old website with ineffective SEO and laggy/confusing page layouts. Ultimately their goal was to increase sales and understanding of their products.
💼 Role
End-to-end designer, User Research, Wireframing, Prototyping
🎯 Mission
Redesign the brand and website to heavily focus on a B2C model in addition to their existing B2B model
⏰ Timeline
May 2019 - Sept 2019
Existing website and issues
Spidertech’s website was last redesigned in the early 2000s, at the time the company was focused on advertising every product they offered for other businesses to purchase tapes in bulk. This meant users were primarily other businesses who already knew what they needed. As Spidertech’s had a stronger presence on social media, they had a strong household brand that was consumer friendly. This shift meant that Spidertech would need to focus on a few things: better information architecture for those simply browsing, a display of their advantages in relation to their competitors, and a brand that understood social media activations.
Stakeholder interviews
To align our scope with both the customers and business we started by speaking to the CEO, CMO, and those working directly on the kinesiology tape itself. My partner Cam focused on speaking with fitness trainers, physicians, and athletes to get the perspective of our customers. The most informative part of this process included getting a walkthrough of the facility and a tutorial on how the tape is applied (their real advantage). Our key findings included:
Spidertech
- Priority was converting customers from social media activations into recurring customers
- Focusing on how easy the tape was to apply (their advantage over competitors)
- The different tape applications for focusing on different parts of the body
Potential Customers
- Spidertech wasn’t present on social media, people knew who they were but didn’t know what their competitive advantage was
- There was a sharp drop off the moment folks attempted to navigate to the shop
- After showing their website to a few folks (and conducting a heuristic eval.), we found it was hard to navigate and find the product they were looking for
Competitive Analysis
While we had the existing website to work with, it was important to understand the best way to communicate the different ways Spidertech’s tape could be applied, and the existing mental models for navigating/purchasing kinesiology tape.
IA/Heuristics Evaluation
This led to our work on the IA, we did this by conducting a card sort with both internal teams such as marketing and external partners/customers. This gave us a great idea of how to streamline Spidertech’s offerings for their website.
Feedback for Old IA
- Main navigation menu items aren’t clear about where you’re headed
- Some “important” pages like Blog are buried under a lot of clicks
- The way products are split up doesn’t make sense because filtering through products is prioritized as apposed to viewing products off the bat
Prototyping
Our next step was to test some of our wireframes, and get some feedback on layouts. We did this with the marketing team at Spidertech to get a better idea of what they would like to prioritize as far as sales go! We also tested with potential customers like purchasing staff at physical therapy clinics. This is also when we began to add complexity with interactions on a higher fidelity prototype.
After multiple rounds of feedback on wireframes, we designed our high fidelity mockups using Sketch! Throughout this process we were looking for feedback and working with developers to ensure our designs were feasible as well.
Delivery and Handoff
At this point we had completed the designs for their new website and began discussions on styling. This meant a new font, new logo, and colours. We chose to stick with the Spidertech black & blue but added a grey & white for transition colours. In conversations with developers we agreed to use ReactJS as our base framework with customized components.
We then simplified their logo by using a modern font that was more playful and less tech-y. This also carried into our design for the website. Ultimately improving the logo’s recognition at scale and ability to work with other logos in activations. This also meant using new icons, we chose the material icon pack as it was the most comprehensive and complimented our font well. Once this was complete we handed off our sketch document and co-ordinated with the development/marketing firm Spidertech was working with to build the website. This was an extremely smooth process as we had provided documentation on interaction flows, icon libraries, and SEO structure. As a bonus, it was really exciting to see our rebrand on activations with the franchised Call of Duty team Seattle Surge. Earlier in the project, my partner and I had a chat with the team over at Spidertech about the reach an esports activation could have in addition to the benefits the product would provide. It was really interesting to see this in action!
Outcomes
Our client was satisfied with our work, and the direction of their rebrand. After closely monitoring the Google Analytics, it looked like there was an increase in sales, especially the click through rate from social media. If I was to do the project again, I would monitor user behaviour on the site after launch and use that data to inform other design changes.
Credits
Cameron Fong - Project Partner Athavan (Arthur) Thevadasan - Project Coordinator
