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 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 which 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 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 minimalistic visual presentation which is focused on the 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 the 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_style_direction_search_tubik

Style offered by Ludmila Shevchenko

 

colony_web_design_tubik

Style offered by Arthur Avakyan

 

graphic design for web tubik blog

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.

 

landing_design_case_study_style_search_version

Worldwide connection

 

landing page design case study tubik

Connect the Earth

landing page design case study tubik

Space mission

landing page design case study tubik

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 users illustrations as in the third picture shown above.

 

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

 

 

landing_design_case_study_final_main_page

 

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.

landing_design_case_study_llustration_2

 

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 a 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 the potential customers and the beautiful custom graphics increase the chances of the pleasant impression from it. Here are the illustrations created for this aim.

 

landing_design_case_study_illustration_4

 

landing_design_case_study_illustration_1

 

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 the 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.

 

landing_design_case_study_countdown_page

 

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 check the detailed Behance presentation of Colony project

Welcome to see designs by Tubik on Dribbble and Behance