Rebranding LXD

a case study by Morgane Santos

visual design, branding, illustration, web development


LXD makes custom LCD screens for a variety of industries. They came to thoughtbot wanting to revamp their website and make it visually distinct from their competitors. They were worried that they didn’t stand out in the industry and that their website didn’t showcase their expertise.

I worked for 6 weeks with 1 other designer and 1 developer. Given the small team size and the short timeline, we narrowed the scope of the project to focus on high-impact changes. Specifically, I focused on rewriting LXD's copy, drawing custom illustrations, and redesigning key UI.

Project prioritization

So why these three actions items?

LXD’s original website had extraneous copy and content that didn’t highlight their value. By dramatically cutting back on content we could focus on what makes LXD a smart choice.

LXD custom illustration

The illustrations were a practical decision: there was no budget for high-quality photos. We also hypothesized that illustrations would look more impressive than stock photos and would reinforce the idea of customizability.

Finally, LXD had a crucial user flow that was confusing to use. Be reworking it, they could bring in more clients and get more sales.

Getting started with research

Before we started designing anything though, we did our research.

We spent a few days meeting with our client and looking at competitor websites to better understand the industry. We wanted to make sure we understood everything about this niche market. We learned all the acronyms, the differences between the various kinds of screens, and who LXD’s clients were.

Process

Very early iterations. We kept it greyscale with stock images to focus on hierarchy and layout, not the details

LXD’s UX challenges

LXD specializes in making custom LCD screens in bulk and their clients do not use the website to place orders. Instead, they contact LXD, explain what they need, and start a conversation that way. This meant that rather than selling anything through the website, we instead had to funnel people to a contact form.

Contact form detail

Contact form detail. This was intentionally designed to feel quick and easy to scan

Most people looking at the website are engineers with a lot of domain knowledge. We had to speak their language rather than appealing to a broader audience. A few pages on the website required long, dense tables with an almost overwhelming amount of data. For LXD’s audience however, these tables are extremely important and no content could be left out.

I iterated on table design, exploring different ways to make them visually easy to read while still containing all the information engineers would need. Slight variations in color contrast and a scannable monospace font ended up being key to this design.

Iterating on different styles

Iterating on different styles

Page for graphic module displays

Page for graphic module displays. We designed the table to be dense with information, but easy to read

Iterating on the visual design

Once we understood the problem, I iterated over several different layouts and visual styles. I worked on freshening up the logo, making it bolder and simpler to better match the redesign. Finally, I drastically stripped down the amount of information on all the pages, using solid, playful colors and streamlined text to make the overall site easier to scan and navigate.

Exploring colors and layouts

Exploring colors and layouts

The visual design is inspired by the colors of LCDs themselves, and I made heavy use of these basic colors throughout the site. The modular design and blocky layouts are likewise a callback to the modularity of the devices themselves; “building blocks” are a central theme to the visual design.

Keeping it fun, simple, and accessible

Keeping it fun, simple, and accessible

Illustrations

We first considered illustrations when we saw that every LCD website used lackluster stock photos that were usually Photoshopped. These images did little to convey the quality of the products, and thus couldn’t be trusted. We thought about taking high-quality photos of the screens ourselves, but quickly ruled that out due to time and budget constraints. Instead, we looked more at the manufacturing diagrams themselves, and were heavily inspired by the clean, isometric illustration style. We decided to capitalize on this and created similarly isometric drawings of all the general types of products.

I created all the illustrations myself in Illustrator, getting regular feedback from my team and the client. This helped keep the style consistent, and the drawings accurate!

Details

Small details like the width of the legs could not be overlooked!

In conclusion

By the end of the project, we had designed and built a modern, responsive website. It stands out strongly against the competition, and better showcases LXD’s services.

“The thoughtbot team was able to build a highly aesthetic website for our unusually restrictive use case. We needed the LXD website to have an eye-catching modern design, while also continuing to clearly present the long product lists that our customer’s require. We are very happy with the results.

- Tim Harrison, LXD

If there’s one thing I would have done differently, it would have been to push for more user testing with LXD’s clients. LXD’s budget and time constraints didn’t make this possible, so we didn’t validate our work to the extent I’d be most comfortable with. While we did test with people outside the LCD industry, it would have been invaluable to get feedback from the people who actually order these custom screens.

However, after talking with Tim a few months after the project, we were happy to hear that traffic has gone up on lxdinc.com and the business is doing well!