{"id":4295,"date":"2018-02-07T16:48:30","date_gmt":"2018-02-07T13:48:30","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4295"},"modified":"2023-07-24T11:54:14","modified_gmt":"2023-07-24T11:54:14","slug":"case-study-colony-landing-page-for-collaboration-platform","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/","title":{"rendered":"Case Study: Colony. Landing Page for Collaboration Platform"},"content":{"rendered":"

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\u2019 attention to an offer and makes them take certain actions contributing to high conversion. To make it work appropriately, it\u2019s important to create a landing page design<\/a> according to the target audience’s preferences.<\/span><\/p>\n

But what if the target audience is quite broad and includes different personalities? Today we share a new case study showing the 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.<\/span><\/p>\n

\"web<\/p>\n

Task<\/span><\/h2>\n

Landing page design with custom illustrations for a digital collaboration platform.<\/span><\/p>\n

Process<\/span><\/h2>\n

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\u2019s revenue \u2014 all without trusting, or even knowing, the people with whom they are collaborating.<\/span><\/p>\n

The client made a request for a landing page design<\/a> 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.<\/span><\/p>\n

 <\/p>\n

Landing page design<\/span><\/h3>\n

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\u2019 attention on the specific offer. It is usually managed via a minimalistic visual presentation that is focused on several UI elements like CTA buttons<\/a> and application forms. <\/span><\/p>\n

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. <\/span><\/p>\n

Custom illustrations<\/a> 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<\/a> 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 \u2014 the Earth with users who collaborate or the heroes in space accomplishing the super space missions. Here are the results.<\/span><\/p>\n

\"colony<\/p>\n

Style offered by Ludmila Shevchenko<\/em><\/span><\/p>\n

\"colony<\/p>\n

Style offered by Arthur Avakyan<\/em><\/span><\/p>\n

\"colony<\/p>\n

Style offered by Denys Boldyriev<\/em><\/span><\/p>\n

The designers showed illustrations in different styles and color schemes<\/a> 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.<\/span><\/p>\n

The client has chosen the direction applying the light background and smooth lines as it looked closer to the business style. <\/span>Considering the chosen direction, Ludmila created variants of illustrations that would suit the user interface elements of a landing page.<\/span><\/p>\n

\"colony<\/p>\n

Worldwide connection<\/span><\/em><\/p>\n

\"colony<\/p>\n

 <\/p>\n

Connect the Earth<\/span><\/em><\/p>\n

\"colony<\/p>\n

Space mission<\/span><\/em><\/p>\n

\"colony<\/p>\n

Universal connection<\/span><\/em><\/p>\n

 <\/p>\n

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.<\/span><\/p>\n

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 \u2014 the periwinkle color is used as the major one with pink, yellow, turquoise, and violet accents.<\/span><\/p>\n

\"colony<\/p>\n

 <\/p>\n

Features illustrations<\/span><\/h3>\n

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\u2019s why the designer worked on the typography<\/a>,\u00a0which would have suited the graphics and UI as a whole. Let\u2019s see the results.<\/span><\/p>\n

\"colony<\/p>\n

As you can see, all illustrations have a lot of white space<\/a> and 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.<\/span><\/p>\n

To make a consistent interface, the designer also created illustrations for a product story \u2014 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<\/a> increase the chances of a pleasant impression from it. Here are the illustrations created for this aim.<\/span><\/p>\n

\"colony<\/p>\n

\"colony<\/p>\n

Token sale page<\/span><\/h3>\n

Colony is a kind of 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.<\/span><\/p>\n

To catch people\u2019s 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.<\/span><\/p>\n

\"colony<\/p>\n

 <\/p>\n

The presentation of a new unique product can become a challenge for designers. It\u2019s important to catch people\u2019s attention and show all the facets of the product. The powerful landing page design<\/a> helps to gain visibility and gather a user base even before the product launch as well as tell a story that would interest potential customers.<\/span><\/p>\n

Recommended Reading<\/span><\/h2>\n

If you\u00a0are interested to see more practical case studies with creative flows for\u00a0UI\/UX\u00a0design, here is the set of them.<\/span><\/p>\n

Watering Tracker. UI Design for Home Needs<\/a><\/span><\/p>\n

UI Experiments: Options for Recipe Cards in a Food App<\/a><\/span><\/p>\n

Home Budget App. UI for Finance<\/a><\/span><\/p>\n

Night in Berlin. UI for Event App<\/a><\/span><\/p>\n

Big City Guide. Landing Page Design<\/a><\/span><\/p>\n

Vinny\u2019s Bakery. UI Design for E-Commerce<\/a><\/span><\/p>\n

Upper App. UI Design for To-Do List<\/a><\/span><\/p>\n

Health Care App. UI for Doctors<\/a><\/span><\/p>\n

Wedding Planner. UI Design Concept<\/a><\/span><\/p>\n

Toonie Alarm. Mobile App UI Design<\/a><\/span><\/p>\n

SwiftyBeaver. UX\/UI Design for a Mac Application<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":3,"featured_media":10175,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,7,9],"tags":[293,447,463,465,468,479,482,485,487,489,491,502,504,100,515,291,533,292,534],"coauthors":[],"class_list":["post-4295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-processes_and_tools","category-ui_ux","tag-landing-page-user-interface","tag-tubik-studio","tag-ui-design-article","tag-ui-design-examples","tag-ui-design-process","tag-usability","tag-user-experience","tag-user-experience-design","tag-user-experience-design-process","tag-user-experience-examples","tag-user-interface","tag-ux","tag-ux-design-article","tag-design","tag-uxui","tag-landing-page","tag-web-design","tag-landing-page-design","tag-web-design-article"],"acf":[],"yoast_head":"\nCase Study: Colony. Landing Page for Collaboration Platform.<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Colony. Landing Page for Collaboration Platform.\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-07T13:48:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:54:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1835\" \/>\n\t<meta property=\"og:image:height\" content=\"1154\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/\",\"name\":\"Case Study: Colony. Landing Page for Collaboration Platform.\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png\",\"datePublished\":\"2018-02-07T13:48:30+00:00\",\"dateModified\":\"2023-07-24T11:54:14+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png\",\"width\":1835,\"height\":1154,\"caption\":\"colony landing page design case study tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Colony. Landing Page for Collaboration Platform\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Colony. Landing Page for Collaboration Platform.","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Colony. Landing Page for Collaboration Platform.","og_description":"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.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-02-07T13:48:30+00:00","article_modified_time":"2023-07-24T11:54:14+00:00","og_image":[{"width":1835,"height":1154,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png","type":"image\/png"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/","name":"Case Study: Colony. Landing Page for Collaboration Platform.","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png","datePublished":"2018-02-07T13:48:30+00:00","dateModified":"2023-07-24T11:54:14+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"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.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/colony_landing_page_design_case_study_tubik-1-1.png","width":1835,"height":1154,"caption":"colony landing page design case study tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-colony-landing-page-for-collaboration-platform\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Colony. Landing Page for Collaboration Platform"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4295"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4295\/revisions"}],"predecessor-version":[{"id":14480,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4295\/revisions\/14480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/10175"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4295"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}