Lancer Tactical
Product catalogs are often the first interactions between a potential customer and the product. The importance of that interaction lies more in eliciting the right emotions and creating a lasting impression, less in encouraging and facilitating an immediate sale.
THE PROBLEM
Lancer Tactical, a California based designer/manufacturer of airsoft and military training equipment and weapons. had a brand but it did not have a strong identity that people associated with, or related to. My goal was to drive brand recognition by using a consistent style guide and stunning visuals to foster relationship and community building.
RESEARCH
The brand was already well-known in the industry to enthusiasts, but it did little to attract new customers and grow the brand’s fan base. Interviewing the stakeholders revealed needs to improve its catalog layout, navigation, but most importantly a long overdue makeover.
The biggest challenges were to keep the site informative but also a breeze to navigate while relying on mainly visuals to do the brand’s storytelling.
REDESIGN & PROTOTYPES
Like for Airsoft Megastore, I went ahead and established a design system/components library for the brand focusing on colors, fonts, as well as a list of photography style guidelines.
While building the color palette and defining fonts and spacing, I was able to explain the importance of web accessibility to the team. In nurturing team-adoption and acceptance, I was able to define our new design system assets to the accessibility standard of WCAG level AAA.
Sketching different versions of the new site and eventually prototyping them on Figma, I was able to select the best option given the visual assets we had, with valuable opinions and insights from the marketing team.
DEVELOPMENT
I eventually built the full site in Webflow focusing on different states of buttons, animations, transitions and most importantly responsiveness across different viewport sizes and platforms.
It was a great experience to polish up my html/css knowledge while giving the site a new look.
Check out the live site and original live prototype. (Subject to change)
Visual Story Telling To Leave The Right Impressions
A picture is worth a thousand words. It is no different when it comes to branding. The home page now starts with stunning visuals that occupy the entirety of the screen real estate. Instead of saying who we are, the visuals in the background with consistent colors and fonts from the style guide does the talking for us, eliciting the exact impressions and emotions we would have on a mood board.
Reputation & Community Building Through Support For Both Returning & New Customers
Considering our new and existing customers' goals, I added a “where to buy” section and a resources section for warranty registration and Q&As which were previously buttons that redirected to other sites. The goal was to minimize frustration through efficiency in helping them complete their tasks.
A section highlighting social media posts and testimonials with our hashtags should help build a sense of community for our customers. I believe the best experience doesn't stop when the purchase is made, so that we foster not just a transaction, but a relationship that builds the brand's reputation.
Fluid & Efficient Catalog Navigation
I came up with a layout that is simplistic, easy to navigate, and most importantly displays information efficiently. Continuing with the theme of visual story telling, I wanted to only display the most important pieces of information like price and product name through hover animations over product thumbnails, while the rest is available through a light box that does not redirect the user to another page for more information. This allows me to allocate screen real estate based on hierarchy of information, and to fast track the users' browsing process. With the new catalog navigation, they no longer have to click the back button over and over again to view multiple products' details.
LOOKING BACK
In hindsight, I would have acquired even more robust data. If time allowed, I would have iterated on the survey and interview questions and conducted additional rounds of user research. Some findings from the first round of research left me with more questions than I started with. The 3rd persona also made me wonder if it should have been incorporated into the previous two, or broken down into an additional two since there were many overlapping use cases and scenarios.
Ideally, I would finish the rest of the site’s pages in order to conduct user testing. I would have given users a list of tasks to complete similar to the ones used during user research, to see if the changes made really made a difference. Tracking time taken to complete the task could product good data. Doing a think aloud again would also be valuable to iterate on the design. “Wizard of Oz” might be useful to test some of the more complicated and robust functionalities/features. Ultimately, tracking bounce rate on Google Analytics and even our sales conversion rate would be a good benchmark for the improvements my research brought.
Unfortunately the project had to be cut short before its completion to focus on a more urgent assignment. Nonetheless, it was still extremely rewarding as the stakeholders were happy with the work done and I got to impact not only the website but also other aspects and departments of the business. I got a first real glimpse into the effects my research can have outside of design. Leading the effort to establish style guides and design systems and communicating the importance to other teams meant that the marketing team now worked more closely with other departments to keep our branding materials consistent and photographers followed by establishing their photo guidelines. Stakeholders were now coming up with new business strategies targeting specific channels that appealed to specific personas I established. I also understood the importance of other team members' responsibilities in a multi-functional team as I was responsible for budgeting, project proposal and some aspects of project management.
I place a heavy emphasis on research in all the work I do. It always made sense to me that design is not just opinions, but rather a scientific process and effort backed up by data acquired systematically and at times creatively. This was a perfect opportunity to do the kind of work I believe in.