Lisk Redesign

The Lisk Redesign Project aimed to breathe new life into the brand's visual identity, aligning it with the core values of accessibility, innovation, and trust. Through a comprehensive design overhaul, the project sought to create a cohesive and engaging visual language that resonated with diverse audiences, from technical experts to newcomers in the blockchain space, in a wide variety of touchpoints.

As Lisk’s Head of Design, I led the project and steered my skilled team through the entire journey, ensuring a cohesive, impactful, and timely redesign.

COMPANY
Lisk
YEAR
2019
TYPE
Brand

Key challenges

Reinventing Lisk.

The brand redesign had to capture Lisk's evolution while reflecting a refreshed, engaging, and accessible identity. The new visual identity needed to embrace the brand's legacy while embodying a forward-looking perspective, showcasing Lisk's commitment to innovation and the nature of blockchain technology.

Simplifying the complex.

Making blockchain accessible to a wider audience was Lisk’s mission, and the guiding principle and the main challenge of the creative process. The brand system needed to be versatile enough to convey diverse degrees of difficulties, offering opportunities to present intricate blockchain concepts in a simplified and approachable manner.

Winning developers' hearts.

The brand had to resonate with developers and foster a sense of community without compromising the project's technical aspects or alienating non-technical audiences. Striking the right balance between accessibility and technical accuracy was crucial for success.

Achieving cross-platform consistency.

With a wide array of communication channels and a diverse audience, Lisk needed to establish a unified visual identity that seamlessly adapted to various touch points across multiple platforms and applications, ensuring a strong and consistent brand story.

Designing for flexibility and adaptability.

The rapidly evolving nature of Web3 technologies necessitated a flexible and scalable brand system capable of accommodating future growth. Additionally, Lisk's rich suite of technical and non-technical products all required harmonious integration into the main system, with the goal of creating a unified experience across all user flows.

Solution

Understanding the space trends.

We conducted extensive research of brands within the Web3 space to identify key learnings, best practices, and potential pitfalls. Our analysis revealed that many brands in this domain primarily focused on complexity and code, neglecting the human aspect, which definitely unveiled an opportunity for Lisk’s brand, and its mission.

Getting into developer shoes.

To better understand one of Lisk’s primary target audiences, we conducted multiple interviews and workshops with both internal and external developers. This helped us uncover their preferences and expectations when it comes to branding, validating that developers are a highly creative group who appreciate brands that demonstrate creativity and innovation.

A meticulous process.

Our approach to the redesign was thorough and systematic. Initially, we evaluated the existing brand to recognize its challenges and advantages. We then conducted extensive research to understand the market landscape and our target audience's preferences. During all the cycles of creative explorations we employed a collaborative, cross-functional approach that involved constant input from stakeholders, team members, and selected users. This iterative process allowed for constant fine-tuning and alignment with the project's goals, and helped us create a brand that truly resonates with its audience.

Humanizing the brand.

Early in the process we discovered that in order to craft a welcoming and inclusive brand atmosphere that not only fosters a sense of connection but also appeals to a wide range of users, we needed to infusie the brand with a human touch, which was not the usual for Web3 projects back in the day. This approach derived the use of vibrant illustrations, personable characters, creatures and mascots, and storytelling elements throughout the visual identity.

Fostering decentralized brand consistency.

Recognizing the importance of maintaining a cohesive brand presence in a decentralized ecosystem, we crafted detailed design systems and guidelines for all brand applications. These resources were shared with internal teams and the broader community, empowering each member to act as an effective brand ambassador to reinforce Lisk's identity consistently in a decentralized ecosystem.

Lisk brand

The Lisk redesign was driven by the goal to create a visually captivating and engaging experience that could seamlessly blend the technical nature of blockchain with a more human-centered approach. The ultimate goal was to create an accessible, playful, and approachable brand identity that resonated with a diverse audience, while staying true to the innovative spirit of the project.

A logo rooted in Lisk’s origins

The Lisk logo was redesigned in late 2017, in collaboration with the German agency Taikonauten. It is flat and versatile, ensuring its adaptability across various channels. The logomark symbolizes the tip of an obelisk, with a pentagonal shape and triangular top that reference the project's first original legacy logo. The white subdivisions within the shape emphasize the collaborative nature of blockchain technology.

The wordmark employs Gilroy, the primary brand font, with slight modifications to the top angles for visual unity with the main concept and logomark. This combination results in a strong, unique, and recognizable symbol for the Lisk brand.

To maintain the logo's visibility, a protection area was incorporated, free from other visual elements. Specifically, the threshold was measured as half the logo's height, and the logo could be scaled down no further than 10 mm for print and 11px for digital use, which ensured its recognizability even at low resolutions.

A vibrant color palette

The Lisk color palette, centered around the primary blue and two key secondary colors, was a harmonious blend of colors that conveyed trust, innovation, and accessibility. The palette needed to align with the brand's core values and target audience while seamlessly adapting to diverse platforms and use cases within the Lisk ecosystem.

Ultramarine Blue acted as the primary color, symbolizing trust, stability, and innovation. Zodiac Blue and Ink Blue contributed a foundation, depth, and sophistication to the design. Accent colors such as UFO Green for growth and success, Copacabana Yellow for optimism and creativity, Cosmos Pink for warmth and empathy, and Fury Red for highlighting essential elements were incorporated. Additionally, a predefined array of grays provided a neutral base for balance.

Lisk employed two distinct color systems: light and dark, following the 60/30/10 rule for visual balance and consistency, with a shade of blue always serving as the more prominent color. In the light mode, white or gray functioned as the main background color. The primary color system included Lisk blues and a range of accent colors, with advice against combining Pink and Yellow. The dark mode featured Zodiac Blue as the main background color and introduced Ink Blue for depth and contrast. The dark mode retained all colors from the light mode, applying the same rules across both systems.

Accessible typography

The Lisk design incorporated two carefully chosen typefaces that would pair seemingly to create visual hierarchy and ensure readability across various applications, ultimately contributing to Lisk's mission of making blockchain technology accessible to a broader audience.

Gilroy served as the primary font for headings and titles, lending a modern and bold touch to the design. Its geometric sans-serif style reinforced the brand's innovative nature while maintaining a sense of approachability and professionalism. On the other hand, Basier Circle was employed as the secondary font for inner headlines and body text. Its rounded sans-serif style complemented Gilroy, offering a more relaxed and friendly tone while retaining a sense of clarity and legibility.

Due to the open-source nature of Lisk's project, it was crucial to have open fonts included in the system that could be used as replacements when custom fonts were not available. To this end, Poppins, a versatile sans-serif font, was chosen as the alternative to Gilroy, while Roboto was selected as the replacement for Basier Circle.

Illustration style

As the Lisk brand system evolved, the goal of making blockchain more accessible remained at the forefront. To establish a connection with various audiences, including both technical and non-technical individuals, it was vital to adopt an illustration style that was engaging, relatable, and human. Consequently, the choice was made to emphasize characters as the primary illustrations, infusing the brand's visual identity with a sense of personality and warmth.

Lisk redesign, wireframe of character illustration

The characters in the Lisk illustration style were designed in a bold yet minimalistic manner, using exclusively basic and primitive shapes to define details and create personality. These characters featured geometric, curvy forms with organic finishes and a unique look and feel. Basic shadowing was employed to add volume and depth. The visual contrast between line and form was utilized to emphasize specific portions of the illustration. Unfilled strokes created a clear contrast with color-filled shapes, which were used to highlight actions or balance the frame.

Considering the importance of privacy in blockchain technology, the characters lacked identifiable facial features. Instead, expressions and emotions were conveyed through various body postures, with the characters' bodies designed to easily adapt to specific positions. The dynamic character style allowed for the constant evolution of characters, such as robots, monsters, magicians, and other unique creatures.

Lisk redesign, illustration about making blockchain accessibleLisk redesign, illustration about buildersLisk redesign, illustration about characters walkingLisk redesign, illustration about a character lost in a desertLisk redesign, illustration about a character lost in a boatLisk redesign, illustration about working in deskLisk redesign, illustration about receiving feedbackLisk redesign, illustration about the originis of candlesticks in price graphsLisk redesign, illustration about characters with a dragonLisk redesign, illustration about a girl in a computerLisk redesign, illustration about having funLisk redesign, illustration about a women warrior climbing a stairLisk redesign, illustration about a characer inside a blockLisk redesign, illustration about a gardener planting a seedLisk redesign, illustration about a robot delivering notificationsLisk redesign, illustration about characters hanging out togetherLisk redesign, illustration about a robotLisk redesign, illustration about a superman characterLisk redesign, illustration about a warrior in front of a tentLisk redesign, illustration about a robot scanning a documentLisk redesign, illustration about profiles of different characters in a user interface
Lisk | Character illustrations

In addition to characters, the illustrations also integrated objects and scenes, adhering to the same design principles. Outlines were employed to create both figurative and abstract elements, which facilitated the portrayal of a wide range of subjects and concepts to effectively convey diverse ideas and scenes, while maintaining a consistent visual language.

Lisk redesign, illustration about a suitcase and a computer displaying growth graphLisk redesign, illustration about Berlin's skylineLisk redesign, illustration about booksLisk redesign, illustration about a workspaceLisk redesign, illustration about a cabinet that represent use casesLisk redesign, illustration about road signs in close-up, to represent the roadmapLisk redesign, illustration about a shield with various elements in the backgroundLisk redesign, illustration about building blocksLisk redesign, illustration about folders and ideas in tech Lisk redesign, illustration about blocks coming out of a box, representing the Lisk SDKLisk redesign, illustration about a castleLisk redesign, illustration about a computer and a cog
Lisk | Objects & scenes illustrations

To ensure compatibility with both light and dark backgrounds, the color scheme was adapted accordingly. For instance, on light backgrounds, fills were pure white, and strokes were Zodiac Blue. For dark backgrounds, pure white fills were avoided, and strokes were Ink Blue. This approach ensured a seamless integration of illustrations within the broader Lisk design ecosystem.

Lisk redesign, illustration about making blockchain accessible, in dark modeLisk redesign, illustration about a character interacting with a hubLisk redesign, illustration about a group of characters with flags hanging out with a dogLisk redesign, illustration about characters hanging out together in dark modeLisk redesign, illustration about tokensLisk redesign, illustration about an explorer character looking at the sky through a telescope
Lisk | Dark mode illustrations

Digital applications

In the realm of digital applications, a strict grid system was employed to ensure a consistent, structured, and visually harmonious experience across all platforms. Systematically organizing the artboard space allowed designers to consistently create clean layouts and establish a clear hierarchy of content, ultimately leading to better user comprehension and engagement.

Banners were one of the most prevalent forms of visual communication within the Lisk ecosystem, accompanying various content types such as announcements, events, releases, and community initiatives. To maintain visual unity across these diverse publications, a two-column grid system was utilized. The written information occupied one column, while the other was exclusively reserved for illustrations.

The banners were color-coded, with the background color of each banner determined by its content type, ensuring a consistent and recognizable presentation of information.

Lisk was active across numerous social channels, and as each platform catered to a unique audience, purpose, and content type, the institutional imagery needed to be designed and illustrated exclusively for each specific channel.

Motion

Motion played a vital role in the Lisk brand. Animations were designed to be dynamic, with quick transitions and smooth keyframe interpolations, resulting in a fluid and engaging experience for viewers.

Lisk | Logo stings

Motion was not only utilized in video formats but also incorporated as a visual communication resource into applications to provide a more engaging experience across all touchpoints.

Lisk | UI animations

Furthermore, character animation was used to bring the figures behind the Lisk brand to life. Each character had a skeleton scripted in Duik, and the animations were designed to be organic, with each action causing at least a first degree of inertia on the rest of the body.

Lisk | UI animations

Infographics

Lisk's commitment to bringing blockchain technology to a broader audience called for the creation of an efficient infographic system. Boasting more than 100 instructive visual assets, the objective was to convey intricate information in an attractive and simple-to-grasp manner.

To accomplish this, the design team crafted a system that guaranteed visual uniformity while facilitating the understanding of complicated ideas. By employing a structured grid layout and integrating a diverse array of illustrations, they transformed the learning process into an enjoyable and captivating experience.

Iconography

In line with the visual identity of the Lisk brand, the iconography was crafted using simple shapes and a restrained color palette, with a maximum of three colors even in the most intricate designs with the goal of creating a style that remained easy to read and did not overshadow the content they accompanied.

Lisk redesign, iconography guidelines

A clear, intuitive system built out of figurative icons allowed the brand system to make complex concepts more approachable, ultimately reinforcing Lisk's commitment to promoting a user-friendly and accessible experience within the world of blockchain technology.

Web

The Lisk website was used as the primary marketing channel, acting as the central hub for communicating Lisk's vision and offerings. Within this digital landscape, the illustrations and iconography were thoughtfully integrated with the accompanying content, adhering to a content-first approach. This design philosophy placed emphasis on the importance of presenting information in a clear, engaging, and visually harmonious manner.

In order to achieve this balance, we meticulously crafted illustrations and iconography that would not only enhance the overall aesthetic of the website but also help guide users through the content. By employing design principles such as visual hierarchy, contrast, and unity, the website's visual elements seamlessly coexisted with the text, ensuring that users could effortlessly digest the information presented, and that the imagery was tailored specifically to the different user flows.

Lisk redesign, mockup showing the design of the community pageLisk redesign, mockup showing the design of the home pageLisk redesign, mockup showing the design of the contact pageLisk redesign, mockup showing the design of the developer portal pageLisk redesign, mockup showing illustrations used in the webpageLisk redesign, mockup showing the design of the 404 page
Lisk | Web overview

Lisk Hub & Lisk Mobile

Illustrations and branded elements were crucial in creating engaging user experiences and making blockchain technology accessible to a diverse audience, both technical and non-technical, in Lisk's two main applications, Lisk Hub and Lisk Mobile.

Lisk Hub showcased a variety of illustrations within the user interface, particularly in the onboarding modules. These illustrations were thoughtfully designed to align with the accompanying content and varied for each slide. The primary goal was to establish a fun and approachable onboarding experience, ensuring a satisfying user journey for all audience types.

Lisk Mobile integrated illustrations throughout the application, customizing each illustration to enhance the specific content it accompanied. Due to mobile constraints, such as limited screen size and resolution, the illustrations were designed to be simple and clean. Designers refrained from incorporating repetitive elements within the same frame, striking a balance between visual engagement and ease of comprehension.

Product branding

Product branding is an essential part of the Lisk brand system, playing a key role in shaping the look and feel for its wide range of products and applications. To find the right balance between unique and unified design, a flexible branding strategy was developed, including a primary lockup and a secondary visual representation for each product.

The primary lockup combined the logomark with the product name, using Gilroy, the main typeface, to create a consistent look throughout the brand. Secondary visual representations helped to create more detailed and engaging images for each product. This approach established a clear visual language for every product, making them easy to recognize and tell apart.

These visual representations were used in various materials, such as banners and Github readme headings, to make the overall experience more engaging and accessible. By making product visuals more appealing, complex information and ideas were turned into eye-catching and easy-to-understand formats, making blockchain technology more accessible to a broader audience. This creative approach to product branding reinforced Lisk's commitment to promoting accessibility and engagement within the blockchain world.

Stationery

Lisk's stationery and promotional merchandise were designed to ensure a consistent and professional image that reflected the brand's core values and identity.

Following the principles of the brand identity in clean and modern layouts, these items conveyed a sense of sophistication and innovation, not only serving as practical tools for communication but also as a means of reinforcing the Lisk brand identity.

Outcome

The Lisk redesign project was certainly a succesful one. The refreshed brand, website, and infographics received an incredibly positive response from the community, leading to increased engagement and a stronger sense of connection with both technical and non-technical audiences. The new visual identity also helped position Lisk brand as a leading innovator in the space, and one of the key players in making blockchain technology accessible.

A key factor in the project's success was the comprehensive brand documentation and guidelines provided to internal and external stakeholders. This enabled them to act as brand ambassadors, ensuring a consistent and unified representation of Lisk across various touchpoints, while empowering the decentralized ecosystem to flourish.

The revamped brand has proven to be timeless, as it is still in production today, consistently evolving and adapting to the ever-changing landscape of Web3 technologies. This lasting impact can be attributed to the meticulous design process, the collaborative approach, and the unwavering commitment to delivering an exceptional user experience.

More projects