Black Jack Lighting

Style and Substance takes form in a fresh and easy to update website built in Webflow.

View project

Overview

Blackjack Lighting’s website was about to become unsupported and needed an upgrade. I was hired as a user experience designer to bring this new website to life. After the user research and mockups were completed it was time to build and I had chosen to build the new site in Webflow. The finished product is a sleek and unique website propelling the overall brand forward.

Timeline

2019 - 2020

My Role

Lean UX, User testing and research, UI Design, Web Build.

Tools

Figma, Webflow

How might we design and build a sleek and easy to use website that not only showcases Black Jack’s products well but propels the brand forward.

This is the previous Black Jack site and together with the main stakeholders we took a look at the site as a whole and what we found was that overall, the site had good bones, it was simple, and served its purpose. The content was very out of date and the site was hard to manage and update being on an old WordPress template. Overall, the website would benefit from an uplift so that Black Jack's current story and personality could shine through.

The previous Black Jack Lighting homepage and product page layout
Initial mockup designs

Talking to others and considering potential options

In order to get a good perspective about how the next iteration of the website should look, feel, and function I conducted a competitive analysis for five outside competitors and followed it up with some user interviews. Some characteristics that the competitors had in common were that they were bold, clean, had great photography, and easy functionality. User interviews also reflected the desire to have a larger visual experience and be inspired. People come to Black Jack to get a taste of outside-the-box design, and the website should reflect that. I took all of this feedback in and created a layout and experience that would be airier with large hero images and an information hierarchy that would better tell the stories of the products.

Well, doesn't that look a bit brighter!

The final website was built on Webflow following my mockups. Some pages went through a few more iterations than others but overall I leveraged Webflow's powerful CMS to create dynamic cross-platform layouts that achieved not only a fresh look for the brand but helped the goals of the business. In the lighting industry, there are a lot of technical documents and this iteration of the site saw a massive reduction in document requests and a rise in almost perfect product orders being placed as a result of the revised information architecture; sales representatives and customers alike were able to access this information more easily and quickly.

Finalised product page
The previous Black Jack Lighting homepage and product page layout

How might we design and build a sleek and easy to use website that not only showcases Black Jack’s products well but propels the brand forward.

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.
‍
You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Initial mockup designs

Talking to others and considering potential options

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.
‍
You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Finalised product page

Well, doesn't that look a bit brighter!

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.
‍
You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Some things I learned,

The Black Jack Lighting website was a project with a lot of firsts for me, one of them being it was my first time learning and building on Webflow. It was a steep learning curve but overall it was the best choice for the project because of its fantastic CMS system and endless options to customize. Being able to guide my stakeholders through a lean UX discovery phase was very informative and helped gain the insights we needed to be able to create a better representation of the website and the business as a whole.

Want to see more? Check this out:

Study TogetherView project

Tea time anyone?

Like what you see and want to have a cup of tea? Lets chat! I'd love to help you with your next project.
Let's chat

Want a copy of my resume?

I've had the opportunity to work with some awesome companies. Please feel free to take a copy of my resume if you would like to learn more.
Download resume