Linbit

Increasing sales leads for a cloud storage company

The makers of a suite of open-source cloud software, Linbit needed to organize its products and present them as part of a fresh new identity that spoke to the company's core values. My role as lead designer was to develop this new visual identity and apply it to an array of deliverables including a visual style guide, logo, web pages, and exhibition booth graphics.

Jump to Section

Problems

Linbit home page as it appeared in April 2022 (Wayback Machine)

Linbit home page as it appeared in April 2022 (Wayback Machine)

In need of fresh approach to web UX/UI

Linbit needed a style guide to standardize the design of its website, but more importantly the company wanted to think the UX of the website to boost sales inquiries.

Logo

Issues with legibility and style prompted work on a new version of Linbit's logo. Management wanted to stay with a word mark, though changes were needed.

Separate symbol from letters
The hexagonal symbol should be removed from the word mark, allowing them to be used independently.

New symbol
The symbol would be redesigned, but remain a hexagonal shape.

New letterforms
The word mark would be redrawn to sharpen the 'L' and improve kerning.

Exploring symbol and word mark possibilities

Exploring symbol and word mark possibilities

From more than 70 symbols, we narrowed it to 3 directions. Variations were created from these directions. The best 3 symbols were then paired with the refined word mark for color testing.

From more than 70 symbols, we narrowed it to 3 directions. Variations were created from these directions. The best 3 symbols were then paired with the refined word mark for initial testing with color and presented to the senior executive leadership team.

Symbol variations and color testing

Symbol variations and color testing

The final logo lock-up solves the problems of legibility and brand-resonant style that we resolved to address. Whether seen as an abstract geometric shape or beams of light knocking an 'L' out of the hexagon, the symbol successfully communicates brand values and aesthetics.

• Improved legibility by separating symbol from letters

• Sharper corners communicate stability, precision

• Restrained application of color

Variations of final lock-up and symbol

Style guide

Since there had never been a style guide created for Linbit. Keeping the system simple was key.

• Three defined breakpoints and layout grids

• Refined color palette

• Dynamic typographic hierarchy and styles

• Simple, accessible button and link styles

• Icon library curated from Material Design 3

• Optimal input field specifications

View Style Guide in Figma

Since there had never been a style guide created for Linbit, we were working tabvla rasa—with a blank slate. Keeping the system simple and focused on atomic elements was the approach. Changes to the color palette were extensive, particularly the addition of a darker orange for interactive components to ensure WCAG AAA standards for contrast and the de-emphasis of blue.
• Three defined breakpoints and layout grids

• Refined color palette

• Dynamic typographic hierarchy and styles

• Simple, accessible button and link styles

• Icon library curated from Material Design 3

• Optimal input field specifications

View Style Guide in Figma

• Three defined breakpoints and layout grids

• Refined color palette

• Dynamic typographic hierarchy and styles

• Simple, accessible button and link styles

• Icon library curated from Material Design 3

• Optimal input field specifications

View Style Guide in Figma

#111111

#666666

#FFFFFF

#F79133

#E17510

#AAAAAA ⇨ #FFFFFF

#E17510 ⇨ #FFDCBC

Primary

Secondary

Inline link

Partial icon library

Spot illustrations

Spot illustrations

Web Design

With a style system developed, it was now possible to address the crowded navigation bar and awkward home page layout. We started by constructing a site map to reorganize the page hierarchy, which in turn would allow for a decluttering of the navigation bar. Turning to the home page itself, we drafted an information hierarchy diagram of the sections to be housed on the page. Wireframes were then built from the specifications noted in the information hierarchy.

Partial site map

Information hierarchy (left) and wireframe of Linbit.com home page (right)

Bringing it all together

With the completion of several iterative passes on the information hierarchy and wireframes, we created final comps for the home page featuring a cleaner top-level nav bar with dropdown menus that appear on hover, fresh global footer design, and full embrace of the new brand aesthetics across a variety of section layouts.