Tags Archives Category Books

Case Study Processes and Tools UI/UX

Case Study: Colony. Landing Page for Collaboration Platform

The case study of a landing page design for a collaboration platform Colony: a sophisticated user interface with custom illustrations and early sale page design.

A sufficient landing page plays a vital role in a successful web marketing campaign. It presents a specific product or service so that the visitor could find the needed information quickly and without distractions. The effective landing page draws potential customers’ attention to an offer and makes them take certain actions contributing to high conversion. To make it work appropriately, it’s important to create a landing page design according to the target audience preferences.

But what if the target audience is quite broad and includes different personalities? Today we share a new case study showing creative stages of a powerful user interface design of a landing page for a collaboration platform. The designer assigned to this case was Ludmila Shevchenko.

web design case study ux designer tubik

Task

Landing page design with custom illustrations for a digital collaboration platform.

Process

The client is a British company Collectively Intelligent Limited from London, the curator of a digital collaboration platform called Colony. The platform enables people all over the world to build companies together online. Communities can coalesce around a project and collaborate together, collectively controlling funds, and sharing in the project’s revenue — all without trusting, or even knowing, the people with whom they are collaborating.

The client made a request for a landing page design that would convey the value of their proposition in a simple and approachable way. Colony is a sophisticated, complex product, so the major task was to help people to understand how it works and what benefits they can get from it. After considering all the aspects the designer moved to the creative process.

 

Landing page design

Some may think: if a landing page includes all the possible details about a product, the customers will be more likely to get interested in it. Nevertheless, the major task of an effective landing page is to concentrate users’ attention on the specific offer. It is usually managed via a minimalistic visual presentation that is focused on several UI elements like CTA buttons and application forms.

To create a landing page design with the appropriate central points, the designer has planned the structure of a layout divided into several sections which would prioritize UI elements. An effective visual hierarchy helps people receive information gradually.

Custom illustrations are often applied in a landing page design as UI components helping users comprehend the idea of a product and its features. So, when the structure of a landing page was chosen, the next task was to find the style for the theme illustrations seen which would be applied in the hero section. To broaden the number of options, graphic designers, Arthur Avakyan and Denis Boldyriev, were engaged in the brainstorming and creative search. The designers experimented with the theme for illustration to show — the Earth with users who collaborate or the heroes in the space accomplishing the super space missions. Here are the results.

colony illustration landing page design

Style offered by Ludmila Shevchenko

colony illustration landing page design

Style offered by Arthur Avakyan

colony illustration landing page design

Style offered by Denys Boldyriev

 

The designers showed illustrations in different styles and color schemes so that the user interface design combined friendly, approachable and consumer solutions, also transferring the feel of a thoroughly competent product from a company that only accepts excellence. The illustrations were focused on the objective of showing how Colony helps people around the world to communicate and successfully collaborate.

The client has chosen the direction applying the light background and smooth lines as it looked closer to the business style. Considering the chosen direction, Ludmila created the variants of illustrations which would suit user interface elements of a landing page.

colony landing page design

Worldwide connection

colony landing page design

 

Connect the Earth

colony landing page design

Space mission

colony landing page design

Universal connection

 

When the illustrations were presented to the clients, they asked to combine the visual presentation of the fourth variant with the idea of user illustrations as in the third picture shown above.

After all the changes were made, we received the final version. UI elements are combined in harmony with the theme illustrations which show the Earth with users who collaborate at a significant distance. The color palette includes several bright colors — the periwinkle color is used as the major one with pink, yellow, turquoise, and violet accents.

colony landing page design

 

Features illustrations

The next task was to create custom illustrations for features presentation. To make a holistic landing page design, the features were illustrated in the same style and color palette. The major aim was to present the features in a simple and clear form so that users could quickly comprehend the essence of this product. Also, the illustrations were planned to be followed by microcopy revealing the basic description of the features within one sentence. That’s why the designer worked on the typography which would have suited the graphics and UI as a whole. Let’s see the results.

colony landing page design

As you can see, all illustrations have a lot of white space and the subtle elements reflecting the sophisticated principle of the company. Thanks to the colors used in graphics, the interface looks friendly and appealing. Typography components work in harmony with the graphics and other UI elements.

To make a consistent interface, the designer also created the illustrations for a product story — a brief description of what it is and why people need it. The story is a good way to catch the attention of potential customers and the beautiful custom graphics increase the chances of a pleasant impression from it. Here are the illustrations created for this aim.

colony illustrations landing page design

colony landing page design

Token sale page

Colony is a kind of a unique network with its own rules and money. Every colony has its own token. To distribute ownership, users earn tokens by doing work. The more tokens they hold, the more of the colony they own. Tokens let staking your ownership on your good judgment when proposing tasks or claiming someone should be paid.

To catch people’s interest and inform them about the beginning of the token sale, the client wanted to create a page showing countdown to the special date. The designer applied the same style and colors as in the landing page design to increase brand recognition. The countdown showed days, hours, minutes, and seconds which were presented in colorful circles. Here is the final version of the sale page design.

colony landing page design

 

The presentation of a new unique product can become a challenge for designers. It’s important to catch people’s attention and show all the facets of the product. The powerful landing page design helps to gain visibility and gather user base even before the product launch as well as tell the story which would interest potential customers.

Recommended Reading

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

Watering Tracker. UI Design for Home Needs

UI Experiments: Options for Recipe Cards in a Food App

Home Budget App. UI for Finance

Night in Berlin. UI for Event App

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce

Upper App. UI Design for To-Do List

Health Care App. UI for Doctors

Wedding Planner. UI Design Concept

Toonie Alarm. Mobile App UI Design

SwiftyBeaver. UX/UI Design for a Mac Application


Welcome to see designs by Tubik on Dribbble and Behance