Webflow Web Design

Lexip Gaming Mouse

Lexip Website
Lindsey sitting in the woods wearing a hat and sunglasses looking to the side in black and white

the process

The team behind Lexip is much broader than just a gaming company. They are a holding company to a variety of other gaming and tech-industry innovations. The goal of the project was to bring together an overarching website, and design out each website underneath of the holding company brand.

research

Market research and analytical data was conducted by a lead strategist on the project, followed by my design focused research and a competitive landscape analysis that was presented to the client prior to getting our hands dirty.

Moodboards were created for each segment within the holding company. We generalized them into three categories, traditional marketing, b2b sales, and gaming. The similarities between some of the companies allowed for a more streamlined process throughout the whole project.

gaming moodboard

images gathered into one single artboard to convey the new lexip aesthetic direction before working on UI elements

wireframe first

Once the moodboards were finalized, we immediately moved into an extensive wireframe layout.

The first step was to generate a list of components that could be used across a multi-layered system of websites. You heard that right, 6 different websites needed to use the same component library. Lexip was just one of those 6 websites. The holding company had a small team of people updating the content across all the platforms, so making it easy to switch from site to site and understand the functionality with ease was of utmost importance

After the component library was generated that incorporated both e-commerce site components and marketing site components, the next phase was to create a homepage mockup.

Utilizing Webflow, we created a project that housed the six different lines of business within the holding company. We then created a style guide for each line of business before diving into the web design.

wireframed black and white components of hero space options
webflow wireframed component library of ux elements before ui is applied showing 4 column cards with and without images
webflow wireframe in black and white outlining the blog component

in-medium design

After the finalization of the wireframes to nail down the general architecture and structuring of components, we moved into the design phase.

Utilizing Webflow, we created a project that housed the six different lines of business within the holding company. We then created a style guide for each line of business before getting into the actual template designs.

The primary focus for the team was to focus on Lexip first. It had only lived on a kickstarter website, and was in dire need of its own platform to spread the message. With that in mind, the templates for Lexip were created. First was a unique homepage, followed by a few interior templates that would have their own layouts that wouldn't fit within the existing component library, either because they included elements being called in through a third party service, or they were one-off pages that needed special attention.

three sections of the homepage displaying a large hero with an orange gradient overlay, and two half and half highlight components that alternate style

component-based design

The other goal of this project, beyond creating style guides that would easily transition between brands, was to ensure a component library was being utilized for future build-out of pages and content as the company grows and evolves.

A component library was built in Webflow accompanied by a brief description on how to use it as a content author, and handed off to the client for the use of templatizing interior pages, as well as utilizing the components for other websites.

beyond the homepage

The homepage wasn't the only piece of the website I focused on within Webflow. Utilizing the component library, I built out a few more templates for the development team to implement the design within Drupal. Focusing on specific templated layouts such as blog and news feeds, detail pages, and contact pages with unique components like stylized maps and tabled product specifications.

after launch

The project is not yet complete, but the build-out of the Lexip website has completed and the next phase of the project, focusing on another line of business, has begun. Utilizing the style guides already created, the design team is able to use the component library from Lexip, and the style guide pre-built in Webflow, to generate layouts for additional websites.