Blade HQ Ecommerce
- Brandon Porter
- Jul 25, 2019
- 6 min read
Updated: Oct 3, 2024
BladeHQ is the #1 knife retailer in America. They sell camping, fishing, tactical, everyday carry and many other types of knives. Although they have a huge presence in the knife world, their site is outdated and not mobile friendly. In order to maintain their #1 standing on Google and stay ahead of their competitors Knife Works, Knife Center, Blade Ops and Amazon, the company decided to invest in reworking their site for the first time since 2003.
My Role
I was hired on January 1st 2018 to be the UX designer for Blade HQ.
The purpose for hiring me was to optimize and redesign their site for mobile and desktop devices. This project was meant to be a redesign from the ground up. I was given a timeframe of 7-8 months to redesign and restructure their site a without hurting their ranking on Google. The site is expected to be rolling out in September 2018.
The Research Phase
In order to rebuild the site I needed answers to the following questions:
What was the purpose of their site?
What was current state of the site?
Who was their target audience?
Why were they redesigning the site?
Who are their competitors?
What separates Blade HQ from other companies?
What were did they want fixed on the site?
What will make this redesign successful?
and many other questions......
Pain Points
During my research I discovered the site had several issues such as: bad category structures, slow loading times, a lack of informational hierarchy, inconsistent designs, no optimization for mobile devices and hundreds of products that they no longer wished to sell. With the companies budget and approval we discussed the timetable and features we wanted in the new site redesign. Plans were made to restructure the navigation, create a design system,provide a strategy to for all of the learning and youtube content on the site.
Additional Research
I was able to obtain these answers through several means including creating site maps of the old site, interviewing stakeholders, working with product managers to understand products better, and diving into analytics to understand our user audience. I was also given much instruction and training about the different types of knives they sold. After understanding more about what needed to be done, the stakeholders and I began to identify our target audience.
Understanding our User Types
As I began to talk more with stake holders, it became apparent that there were several types of users we were dealing with. Using Google Analytics as well as data from several of our social media groups we identified the following:
95% of our users are male.
The primary age of our users is 25-34.
Around 60-70% of our users view our sites on their phones.
Iphones is the top device used.
While this research was a good beginning to understanding our users, further information was needed in order best know who to build the site for.
Selecting our Target Audience
After further questions and interviews, we concluded that there were three main types of users who use our site: the knife fanatic, the knife researcher, and the knife noob.
The fanatic and researcher are the primary users that come to Blade HQ. While their reasons may be varied, these are the top reasons that they choose us over our competitors:
Knife experts
#1 spot on google ( easy to find)
Sell custom and exclusive products
Huge social media presence (over 200,000 followers on youtube)
Quality products
New product arrives weekly sometimes daily
It became clear that the company was doing a good job at meeting the needs of their primary user. Several times the company expressed how they wanted to do a better job at educating the knife noob. We decided that we would target the knife noob for our site redesign. In order to understand what makes a knife noob tick, we created a well researched persona to remind us of our objective audience. See persona for more details.
Restructuring the Navigation
In order to restructure the navigation I had to get an idea of how many products and product types Blade HQ had. I proceeded to consult with the product manager and other stake holders to merge, consolidate, and group the thousands of products they sold. Many decisions were made by how much product the company carried or plan to carry. Some products were the remainder from previous ad campaigns and needed to be eliminated. Once we had cleaned up the product types I began to group the product types based on research we had previously done.
Testing the New Nav.
The process of grouping items together and testing went hand in hand. Multiple tests were done both at the physical store front and online with users. For the store front tests I ran a card sorting method. A set of index cards representing the new navigation was placed before the test subject.
Subjects were asked a series of tests to see if they could find an item. The subject was asked to explain their thought process. As the person selected the card they believed was the right one the data was recorded. This testing went on for several sessions with multiple changes being made to the nav structure. The same testing was done online for some of our social media users. Instead of index cards they were given access to a working prototype where they would state their answers via video chat. Eventually we landed on a final solution for the new navigation.
Creating a Design System
With our new solid foundation for our navigation it was time to help establish design standards that would allow us to have a consistent look across the website. Once again I started with what we had. In collaboration with our graphic designer we sat down and did a visual inventory of all of our assets. We looked at everything ranging from color schemes, typography, button styles, and the building blocks of the site. It became apparent that there was a lack of consistency on several of the pages. Due to this inconsistency that we created a style guide that our developers and marketing team could create a consistent look for our brand.
Wire Frames/ Prototypes
With the design system in place I began to gather business requirements for each page. From there designs were first hand sketched either on paper or on a whiteboard. High fidelity mockups and wireframes were then built in Sketch. I used Invision's prototyping software in order to prototype, test and communicate my designs to stakeholders and developers. I created mobile and desktop wireframes for the following pages:
Product Detail Pages
Product Catergory Pages
Login Screens
Cart and Checkout
Home page
Knife Educational blogs
Customer services pages
and many more pages...
To view my prototype click here https://invis.io/86N9PP3RQXJ
Content Strategy
When I started the project there were over 25+ links in the main navigation. After cleaning up the categories and testing the new nav with users, we ended up with 8 items in the navigation. With the creation of new pages there was a need to create content for all these pages. By working with the photographer, the copy writer, and the marketing team we created a working Excel sheet to manage content and set deadlines in order make sure every page had consistent content.
Lessons Learned
While redesigning Blade HQ's website I learned a lot about designing for an e-commerce site. I learned that building a successful website is like baking a cake all the ingredients must come together, be baked at the right temperature and frosted just right in order to be desirable. If a cake looks good but it tastes awful the cake is bad. If the cake tastes good but looks terrible it may deter people from eating it. This is the case with web design functionality and looks must go hand in hand to create a good product.
When I started this project I discovered bad category structures, slow loading times, a lack of informational hierarchy, inconsistent designs, no optimization for mobile devices and hundreds of products that they no longer wished to sell. By asking the hard questions I was able to uncover a these problems. I was then able to take that information and create a solid foundation of functionality, design and a content strategy.
These foundations aloud me to create a interface that was visually pleasing and functioned properly. It could have been alot easier if I had just chosen to give the site a brand new look and leave the functionality alone. Had I done that many the site could have survived but the same problems before would have crept back up. It is my belief that functionality and visual design must go hand in hand to create a product users will love to use.
Comments