Challenge and Client

To broaden its ways of reaching the audience and set an effective sales channel using mobile technology, Heineken Mexico strived to launch a mobile application that would allow users to buy beer and associated stuff like snacks, cups, and the like and get the orders delivered quickly. This is how the Glup application started.

The clients approached the tubik team with a range of design tasks: we worked on logo audit and tweaks, extended brand identity development, delivery application UI/UX design from scratch, website design, and creating custom 3D icons and 3D illustrations for marketing and user experience objectives.

Process

The creative process included two major directions: developing a flexible identity and creating a consistent functional UX design for the application.

Brand Identity Design

Firstly, it was essential to work on powerful branding that would be effectively applied to both marketing goals and mobile interactions, providing the integrity of the customer experience.

The brand already had a logo, but it had to be enhanced to get a more attractive and trendy look appealing to the target audience and become more pliable for a variety of brand advertising and marketing objectives.

Original logo color variations

Glup logo redesign

Certainly, the team took advantage of color power and its remarkable ability to set the needed mood in split seconds. The primary brand colors were yellow, setting the cheerful spirit and giving instant association to the beer theme, and deep purple, setting the effective contrast and playfulness and supporting the flexibility of the palette for the defined objectives. Also, an extended palette for different ways of product presentation was developed.

Another element of visual branding was the set of abstract geometric shapes to be consistently used across various branded items, advertising materials, delivery bags, social networking, and mobile application screens. What’s more, these shapes reflected the parts of the clock face setting a solid association with the speed of delivery as one of the key features. Take a look at the variety of branded items and advertising design.

Outdoor advertising

Social network posting templates

Billboard design

Delivery backpack design

Range of variants for delivery motorbike branding

Branded T-shirts design

Branded cap design

User Experience Design

The second direction of work was to think about the flawless and intuitive user experience for the mobile application. The interaction design was thoroughly thought-out to make the sales funnel work successfully and let the users move through the whole purchase flow smoothly.

The onboarding screens and categories use trendy and balanced 3D graphics presenting the products and setting friendly communication. Having a different visual style, these original graphics don’t distract users’ attention from the offered items.

The icons working as visual, illustrative markers for the different categories of items in the application also moved through several iterations and evolved from 2D graphics consistent with the general concept of visual branding and echoing its graphic elements to the big set of 3D icons following the style of 3D illustrations used across the app and in the onboarding process. Here’s a quick glance at the stages of the process.

Airy light screens of the application effectively show the products, while branded colors, graphics, and eye-pleasing gradients help to set attractive color accents for interactive elements, making navigation clear and intuitive. Custom icons in the interface also echo the brand palette, supporting both usability and consistency of brand performance. The customers are offered several ways to surf the range of provided items, including browsing the entire catalog, using filters to customize it, or using the internal search to find the needed item quickly. Plus, the button on each card on the catalog screens sets the shortcut to add the items directly to the basket without opening a card, which saves time and effort in cases when users have some faves and order the same items multiple times.

Here’s a quick look at the category screen. All categories are illustrated with stylish theme 3D graphics that instantly set the theme but do not overload the screen with too much detailing.

The shopping cart screen is informative and functional, based on the principles of external consistency and well-recognized mental models so that users can finalize their orders easily and effortlessly. A special progress bar with a text hint is used to visualize the ability to get free shipping for the order.

The home screen and promotions screen also feature sliders with banners for special offers or hot sales to attract more attention to them immediately.

One of the essential elements of building a solid mobile app brand and enhancing its online presence is supporting it on the web with a concise and informative landing page that uncovers the benefits and engages new users to try it. The landing page for the Glup application echoes the design approach of visual identity for the brand. It’s based on a bright background in primary brand colors separating different content sections, a solid visual hierarchy of text blocks, clear and visible call-to-action elements, and prominent visuals that present the balanced mixture of app screens and thematic 3D graphics to instantly set the connection with the essence of the offered service. Smooth web animation makes the user experience even more lively and dynamic.

So, as a result of the project, the Glup brand obtained a solid and effective sales channel via the easy-to-use mobile application, consistently reflecting brand identity and making the customer experience integral, engaging, and smooth.

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

HP23. Website and 3D Animation for Prostheses Producer

Nova Post. Interactive Christmas Advent Calendar UI Design

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Crezco. Brand Identity and UI/UX Design for Fintech Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Glup. Branding and UX Design for Delivery Application появились сначала на Design4Users.

Project and Client

Crezco is a fintech product that employs technology to eliminate unnecessary expenses and frictions in trading for businesses, bringing suppliers and buyers together and supporting their growth. That is a creative and modern solution, especially for small businesses that focus on what matters most, while payment processes are all covered with Crezco. The service strived to set up a solid and trustworthy brand image and communication that would clearly transfer the idea of reliable and straightforward financial operations and business support.

Process

The creative team aimed to create an identity that would translate the key brand vision: to make inefficient markets efficient and speed up economic progress everywhere. Crezco’s identity becomes a communication tool that helps to address a broad and diverse community and conveys the product’s advantages.

The central idea that influenced the visual style of brand identity is the creative approach to the traditional bar charts usually used for financial reports and stats. They were transformed into a balanced and harmonic design system consistently used across all the brand touch-points with its customers, from logo design and animation to the diversity of both tangible branded items such as business cards, clothes, posters, billboards, and digital communication in social media.

The brand color palette is based on several shades of deep green and pale green with accent colors such as coral and beige. Such a combination is flexible for playing with color contrast and setting solid readability and legibility for different channels and spots of visual communication. The choice of typeface fell on the elegant and readable Object Sans.

And here’s a closer look at the logo design based on that approach. It is a combination made up of a solid square symbol based on the ideas of transformable bar charts and the typographic part unveiling the brand name. What’s more, based on shapes psychology, straight lines and right angles of a square give a sense of reliability and security, and people strongly associate squares and rectangles with buildings the reason why they bring a feeling of trust and authority, which also was a good association to set about the financial service.

The approach described above was developed into a set of branded and advertising items to grow brand awareness and recognizability via various customer touchpoints.

Outdoor advertising billboard design

Business cards design

Booklet/notebook design

Branded badges

Branded tote bag design

Advertising poster design

Branded video commercial concept

The design approach set for branding was also consistently stretched to the website, providing information on the problem-solving potential of the service, answering frequent questions, and engaging visitors to try its benefits to amplify their business. Light and airy web pages are built on wisely arranged content uncovered gradually, with easily reached CTA elements for each section. Also, the core navigation in the sticky header is easily reached from any point of interaction with a web page. Solid visual hierarchy and well-mastered negative space make the website balanced and easy to use while smooth and stylish web animation and vibrant visuals add emotional appeal to the user experience.

Obviously, being innovative, technological, and intangible, services like this need to use a lot of text content to introduce their benefits to the customers and convince them to try. So, the effective solution here was to divide content into small logical pieces that could be easily scanned and understood. The designers supported them with simple and clear graphics to make the content perceived and remembered even easier.

Two more small but important details to think over and design were the favicon and app icon, which play a significant role in setting the consistent visual connection across channels.

Considering the actual needs of such a fintech service, the team has also developed the concept of the mobile application, with functional and attractive screens, big noticeable numbers, neat icons, and intuitive interactions, keeping visual consistency with the branding and website design, this way making all the types of connection with the service feel like one integral customer experience.  Take a look at the mobile screens below.

Taking into account the impact of digital marketing via social media channels, it was also essential to think over the social posting templates that would keep up with the general brand approach. Below, you can see some of them, setting the general idea of what could Instagram posts and stories look like.

So, for our team, this project was a remarkable case of collaboration with progressive financial technologies, while the Crezco brand obtained a well-developed and practical design system that supports creating a clear and informative field sharing its positioning as a reputable service that makes direct bank transfers as convenient as card payments but without the fees.

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Otozen. Mobile App Design for Safe Driving

Uplyfe. Identity Design for Health App

Bennett. Identity and Website Design for Tea Brand

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

THT. Website Design for Electrical Engineering Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Crezco. Branding and UI/UX Design for Fintech Service появились сначала на Design4Users.

The design process for the project included three creative tasks:

• logo design and brand color palette
• a consistent set of original brand illustrations for diverse marketing goals online and offline
• packaging design

Identity and Packaging

The logo design for the project presents the combination mark in which the symbol echoes botanical motifs elegantly organized in a square shape, and the typographic part sets a strong visual connection with it using the same leaf shape as a part of the letter. The color palette features the domination of earthy natural colors, with different shades of warm, eye-pleasing brown for backgrounds and contrastive bright blue, green, yellow, and other shades for accents and details, distinguishing different products and goods by color marking. This approach can be seen in a variety of packaging design items.

Brand Illustrations

The consistent set of illustrations developed for the project features a variety of people and characters holding different plants or dealing with gardening routines. Digital artworks of this kind add a solid human element to brand communication and make it more emotional. They can be effectively used for a variety of marketing goals, from printed branded graphics such as posters, banners, cards, and stickers to packaging design such as various branded boxes and bags, to digital communication on a website, hero images, landing pages, and social media posts. The consistency of the visual approach helps to create an integral customer experience and strengthens brand recognizability.

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the graphic design projects done by the Tubik team.

Aqua Dudes. Cartoonish Packaging Design for Fish Food Brand

Herteas. Packaging Design for Herbal Tea Brand

Nutribite. Tasty Packaging Design for Granola Bars

Milkimu. Packaging and Marketing Design for Dairy Brand

Dance Festival. Creating a Set of Event Poster Designs

Soaplanet. Soap Brand Packaging Design with Travel Spirit

Joosi. Packaging Design and Marketing Graphics for Juice Brand

Pizzatta. Artistic Pizza Packaging Design

Page Turner. Identity and Packaging Design for Bookstore Chain

8 Bright Packaging Design Projects Employing Illustration Art

Bikker. Identity Design and Illustrations for Biking Service

Originally written for Tubik Blog, graphic content by tubik

Сообщение Graphic Design Case Study: Identity and Packaging for Garden Center появились сначала на Design4Users.

Process

Using illustrations to enhance user experience design is now a well-checked and effective design practice. Pictures help to transfer the needed messages faster, set the mood, and provide aesthetic satisfaction. For the big pack of Real Bitcoin website illustrations, it was essential to stick to the following principles reflected in all the artworks:

• consistency: reflecting a variety of ideas, messages, and compositions used across the different website pages, the illustrations keep a consistent style to support the integrity of the user experience
• informativeness: all the illustrations aim to transfer or enhance a particular message, help present the benefits of the service
• emotionality: the style, color palette, visual metaphors, and characters in the illustration pack empower the emotional appeal as a part of user experience

People Illustrations

Real Bitcoin is the platform connecting people to quite a virtual topic and the highly technological theme of cryptocurrencies. What’s more, their target audience is people who are not deeply into the theme of cryptocurrencies yet. So, it was vital for them to add a solid and powerful human element to the first impression and all the experience of dealing with the website and set a quick and clear connection to the world of people, not the digital reality. That’s why a large pack of illustrations with human characters was developed based on the ideas of diversity and friendliness, communication, and support. With the images on the website pages, the product communicates to the visitors via a number of human characters of different ages, races, social statuses, and interests, unveiling the benefits of cryptocurrencies for different groups of users. Here are some of them.

Custom Graphics

One more task for the illustrator was to create a set of informative and symbolic illustrations that would help to beautify informative content blocks and contribute to the visual support of the message. As people perceive, decode, and memorize images faster than words, such visual elements both increase the informativeness and scannability of the webpages as well as add to the general stylistic concept. Here, Real Bitcoin website visitors will find a variety of well-recognized visual prompts on money, banknotes, wallets, coins, and gadgets for interacting with the world of digital products, and also diverse graphs, charts, and upward arrows to symbolize financial growth, progress, and development.

This project demonstrated how much informative power, emotion, and style can well-crafted custom illustrations contribute to the website design, not only making a considerable positive impact on its attractiveness but also enhancing the usability and desirability of the presented products and services.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Magma Math. Web Design for Educational Platform

Dance Festival. Creating a Set of Event Poster Designs

Soaplanet. Soap Brand Packaging Design with Travel Spirit

Carricare. Identity and UX Design for Safe Delivery Service

Uplyfe. Identity Design for Health App

Devpost. Hero Illustrations for Hackathons Platform

ShipDaddy. Identity and Web Design for Shipping Service

Physica Magazine. Web Design and Graphics for Scientific Blog

Nova Post Advent Calendar. UI/UX Design and Christmas 3D Art

Nibble Health. Identity and UX Design for Healthcare Fintech Service

Ready Set Recover. Web Design and Illustrations for Surgery Recovery Platform

ProAgenda. Identity and Website Design for Golf Management Service

The illustrations in the post belong to their proprietors, are the object of copyright, and cannot be used by the third side for any goals.

Originally written for Tubik Blog, graphic content by tubik

Сообщение Illustration Case Study: Visual Storytelling for Real Bitcoin Website появились сначала на Design4Users.

Project

Landing page promoting the mobile application supporting convenient deliveries in Saudi Arabia.

Process

A well-designed landing page is a tool of great importance for building mobile app branding and amplifying its online presence. It plays a crucial role if the case is mobile-only and the app doesn’t correlate with a website. In general, it is a web page designed to focus on a specific, relatively narrow goal and a quick way of accomplishing a particular action. So, for a mobile app like the Pass-On application, the goal is app installation, and the landing page concisely covers its benefits and functions. In addition, creating a landing page based on geographic, gender, psychographic, demographic, and behavioral targeting is an effective way to reach potential app users and give them a quick presentation of the application, which will tell much more than just screenshots on the AppStore or PlayMarket and will make the brand communication more emotional and informative.

To uncover more about the essence of the app, Pass-On is a digital platform (native Android and iOS app) that aims to provide easy, economical, and fast courier service. It is positioned as a community marketplace that connects travelers with available boot space to the sender with a parcel to be delivered. The client wanted the web design to be vibrant and classy, simple and trustworthy.

Let us give you a glance at the design solution for the landing page design for Pass-On, clean, bold, and scannable in the best traditions of design for web marketing. One more point to mention is that it had to be adapted for two languages, English and Arabic, as the application is used in Saudi Arabia.

The main design features that determine the general design concept for the Pass-On landing page are the following:

• color palette based on bold contrast of clean basic colors – white, black, and red, echoing the main colors in the application; no gradients, no multicolored combinations
• background colors separating web page sections to make content more organized and clear
• readable typography with prominent catchy taglines
• custom illustrations and motion graphics
• mobile screens demonstrating the application’s user interface and functionality
• instantly noticeable call-to-action elements
• intuitive navigation based on well-established mental models of web interactions

One of the catchy features of the landing page is the animated map used as a hero image that visually connects the visitor to the core idea of the service. Scrolling down, users see the section uncovering three primary benefits in a sort of animated interactive slider based on corresponding mockups demonstrating the particular screens of the application, enhanced with minor graphics giving visual hints to the text explanations.

Another section also lets the visitor dive deeper into the benefits in a set of short, concise headlines. When the headline is clicked or hovered, the more detailed description is open, and theme photos also change to give it visual and emotional support. Due to such an approach, the page looks airy and uncluttered, although it contains a lot of information.

The landing page uses a diverse set of consistent illustrations. They support text information with visual hints and metaphors and make text content look neat, organized, and systematized. What’s more, the graphics add their two cents to make the whole landing page concept look more emotional and integral.

To make the landing page attractive and functional on any device users come from, the mobile version was also well-thought-out and designed with attention to detail.

One more big challenge of this project was to think over the Arabic version of the landing page, as this language uses a different text direction in writing, the general perception of both copy and graphic content had to be inverted, and the text itself looks absolutely different. It means that, in fact, the page needed not just localization but a sort of new design and layout to make the text content and images work properly in totally different conditions. Take a look at the result.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

Carricare. Identity and UX Design for Safe Delivery Service

Physica Magazine. Web Design and Graphics for Scientific Blog

ProAgenda. Identity and Website Design for Golf Management Service

Real Bitcoin. Creating Website Illustrations

Uplyfe. Identity Design for Health App

Devpost. Hero Illustrations for Hackathons Platform

ShipDaddy. Identity and Web Design for Shipping Service

Bennett. Identity and Website Design for Tea Brand

OtoZen. Designing Mobile Application for Safer Driving

GNO Blankets. Branding and Web Design for Ecommerce

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Web Design Case Study: Pass-On. Landing Page for Delivery App появились сначала на Design4Users.

Project

OtoZen is an innovative technology for safe driving, operating via a hardware device connected to a mobile application. It helps users to turn any car into a smart, distraction-free vehicle. It is the all-in-one safe driving assistant that keeps drivers focused, organized, and connected to friends and family. Users can quickly pair the OtoZen device with their Apple or Android phones via Bluetooth and install the OtoZen Pod in split seconds, with no tools, wiring, or professional installation required.

In this project, tubik specialists were involved in auditing and improving UI and UX design for the mobile application, as well as creating custom graphics and a website that would strengthen the product’s web presence.

App Design

From the perspective of user experience design, the Otozen application was a complex project that included a diversity of manipulations with different data, some of which are changing in real-time mode and should be updated and distributed appropriately. Another concern was dealing with a lot of personal data security and privacy issues. So, the design process had to start with diving deep into the slightest details of functionality and user problems solved by the application. This is what the application looked like at the start of the process.

The client came to us with a prototype that had to be reviewed, discussed, and reconsidered. In general, the technology is built around the following primary directions:

• safe, distraction-free driving: texting-while-driving prevention, reduced audio distractors, high-speed alerts, feedback on driving safety level, autodial to call help for emergency
• well-used driving time and organized reminders: location/time-based reminders, audio calendar alerts, joining meetings hands-free, simplified expense reports with mileage tracking
• convenient connection and communication with other people, for example, family and friends: requesting live location and ETA of other drivers, getting easily updated with automated notifications, full control of privacy and visibility

So, having analyzed the diverse functionality and data the app had to process, considering the objectives behind the application, our team made a deep review of the pain points and blind spots in the existing prototype. That process of design audit was grounded on constant communication with clients to find out the slightest details that could have an effect on user experience and grew into tons of graphs, charts, tables, and schemes. That’s a good example demonstrating that a huge part of the user experience design process is not about visuals but about analyzing, structuring, connecting the dots, considering details, and building systems. Here’s a look at just a small part of the process.

A part of multiple systematic tables textually organizing different information about the product, questions and issues to discuss, and suggestions that could improve user experience, to support collaboration between the clients and the creative team and let them stay on the same page.

A glance at the process of analysis and structuring user interactions with the application and issues arising in the process

The process of building a particular piece of user scenario

So, the core tasks for the UX designer were to think over data organization, visualization, and navigation which would make complex flows of information and functions feel intuitive and straightforward and wouldn’t overwhelm users. Supporting that idea, the choice was made on a light and airy interface with contrasting but not overbright colors for critical visual elements and buttons and a highly-readable sans-serif font to make the screens scannable and easy to use on the go.

One of the significant points for the user experience design of the mobile application was effective onboarding and registration flow. The account creation process is divided into several simple steps, with a progress indicator keeping the user updated about the current stage.

My Trips section opens the feed and gives an opportunity to easily tune what the user wants to see. This application is a good example of how well-crafted icons support the usability and navigability of the mobile interface and help set instant visual connections with different types of information. The map screen shows the trip details. It also uses color marking for the various points, such as speeding or telephone usage, this way visualizing quickly how often the issue happened during a particular trip.

Opening the calendar, the user can see daily time stats in minutes. The drive score section opens the information on issues that influence driving safety.

The tab bar lets users switch between five core interactive zones: Alerts, My Trips, Buddies, Profile, and Notifications. To maximize the influence and make it clear for users, it combines elegant line icons and text labels to quickly inform what users will find in each tab.

And here’s a glance at the flow of interactions with the app.

The Alerts section organizes all types of incoming alerts and helps to switch between them smoothly.

Profile screen shows different data about settings and preferences, neatly organized in groups. Here users also can add, edit, and review their emergency contacts, vehicle details, and places.

One more important and valuable feature of the Otozen application is Buddies. This function allows users to connect, make their trips trackable, and notify their chosen buddy about the needed information, such as the current point on the route or arrival. It can be super helpful for various issues, for example, when the app user needs to know where the family member is but doesn’t want to distract them from driving with calls or messages.

One of the points the technology creators describe as the most essential and show deep care on is personal data security. So, in the Buddies functionality, this aspect had to be well-thought-out, and sharing/accepting access to tracking the other users’ trip, OtoZen users needed to be sure that they can control the level to which they open data to their buddy in the app. That resulted in another neatly organized set of settings in the application that had to be clear and straightforward.

The major challenge behind the application UX design was to get together all the multiple flows of information, notifications, alerts, macro and micro settings, and decide upon the most user-friendly way to organize them.

Web Design

One of the well-checked tools for building a solid mobile application brand and effective promotion is creating a landing page or website to present the benefits and connect users to the product in an efficient, informative, and captivating way. So, the website was another task for our team to allow the OtoZen product to cover this aspect of digital marketing and set another major channel of communication with its users, letting them catch the idea and uncovering the answers for all the questions that may arise. The general layout and website style echo basic color accents and the airy, light layout of the application. The information about the technology is divided into concise sections to be scannable and skimmable. The hero section presents the immediate visual connection to the technology via the prominent image demonstrating both the device and the app and giving the main idea about the product and its value for users via an informative tagline and short description. The call-to-action button in the hero section is instantly visible due to the color contrast. It works in pair with the ghost button, allowing visitors who want more information to watch the video.

For the last few years, original illustrations applied to user interfaces have been one of the most popular and solid UX design trends. Not only do original graphics contribute to the general brand image and enhance its recognizability and memorability, but also they set a solid emotional connection between the product and its user. What’s more, they add much to the usability and visual storytelling, especially when consistent photos cannot be obtained for all the necessary demonstration needs, especially in the cases of highly technological products. The Otozen website took advantage of the custom illustrations keeping a consistent style and effectively supporting information blocks. Also, many of the pictures feature people, adding a human element to the communication. A mobile adaptation of the website makes it look attractive and work effectively from any device.

“We are very pleased with the outcome. The app UI/UX is well received by our customers. There was a consistent app UI/UX theme that was maintained throughout the development, and having the same designer working with us helped us achieve this,” the client company’s CEO wrote in his review on Clutch, and what could be the better way to finish the design story?

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

HotelCard. Brand Identity for Hotel Offers Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

Ready Set Recover. Web Design and Illustrations for Surgery Recovery Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

Nonconventional Show. Website Design for Podcast

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: OtoZen. Designing Mobile Application for Safer Driving появились сначала на Design4Users.

Product

Uplyfe is an AI-powered health app that reacts to your behavior in nutrition and exercise and provides personalized recommendations. The app is designed to help users improve their health, as well as prevent or manage non-communicable diseases (NCDs). Founded by specialists with medical and healthcare backgrounds, the product shares the philosophy that a healthy lifestyle is the best medicine. The product team is based in Switzerland.

Research and Design Approach

Creating a brand image, the design team has to consider all the major ways the brand employs to communicate with its users and customers. Even an excellent logo design may not work effectively if it’s designed in a creative vacuum without a clear understanding of where and how the brand will use it, what environment it will be integrated into, and how it will be distributed. That’s why the first stage of design is all about deep research, asking tons of questions, and building up a great deal of communication between the brand team and the design team. This process is vital as not only do designers get a more comprehensive view, but also, brand holders start looking at their product from different perspectives and asking themselves new questions. You can read more about the design process for branding in one of the earlier articles:  together with the client, we discuss and define ‘the soul’ of a client’s brand. That helps us to create strong branding and identity, ‘the face,’ for products and companies. From the brand model to the design system, we build the identity that translates the product values.

The essential point to take into account about Uplyfe’s brand image was that, in a nutshell, it is not a product solving a narrow circle of specific health problems but a comprehensive eco-system of building a healthy life, adapting its recommendations to users’ goals and performance. What’s more, it’s based on a scientific approach but simple and accessible for the broad target audiences of different ages, from youngsters to the elderly. The app aims at being used by both people with NCDs and healthy people who want to improve their lives. As the team is based in Switzerland and that’s its core market at the moment, the research phase included the analysis of what kind of health services and apps are demanded and popular in this area.

To define the design approach, user personas were developed and analyzed as well as mood boards were created and discussed to determine the compelling visual design perspectives.

Based on that, our team created a complex brand design for Uplyfe.

Brand Graphics

Logo

The final logo design is a combination mark made up of a symbol and a typographic part presenting a brand name. The elegant and curvy symbol is balanced by the simple, solid, and highly readable font chosen for the text part. The color palette is based on a combination of pure colors that provide good contrast and work well both in digital and analog spaces.

As for the symbol, it employs a triangular shape. According to the psychology of shapes, a triangle is an energetic and dynamic shape always associated with motion and direction. The lines are placed so that human eyes automatically move to the triangle’s top or in the direction it is placed. An upright triangle brings feelings of stability and balance.

Also, the symbol intentionally doesn’t feature any visual triggers or prompts that are typical for the medical theme. The major goal in identity design for Uplyfe was to step aside direct associations with medical treatment, hospitals, and the like, as the application goes beyond that and is positioned as a helper in supporting a healthy lifestyle in general. What’s more, for many people with NCDs, their states of health are a matter of everyday life, like, for example, those who have diabetes, so the app would rather avoid day-by-day connection to that from the medical perspective and focus on helping users make their life better in those conditions. As well, a part of the target audience consists of people who have no specific health issues but would like to enhance their general physical conditions, so the logo directly connected to the medical theme could create confusion about the nature of the Uplyfe service and lead to losing a part of the audience. Instead of associations with medical treatment, the logo had to transfer the strong message of a bright, healthy, and well-balanced life.

To increase the logo’s flexibility for different visual design goals, the designer developed a set of variations, including a black-and-white version, monochrome variants on light and dark backgrounds, and options with a gradient background based on the corporate palette.

Digital touchpoints: app graphics, favicon, logo animation

But brand design goes much further than well-crafted and tested logo design. Together with the client, we defined the touchpoints and channels via which the brand communicates with its customers to create an appealing and balanced visual style covering them all. This way, the brand image looks and feels consistent, and brand recognizability increases.

First, let’s take a look at how branding was integrated into the digital product. Here’s the logo animation for the splash screen: it gives a clear visual connection with the brand from the first seconds and, at the same time, makes waiting bright and dynamic while the app is loading. Also, below, you can see how the branded app icon looks for the Uplyfe application.

And here’s a glance at the favicon for the app landing page. Favicon, also known as a URL icon or bookmark icon, is a particular type of symbol representing the product or brand in the URL line of the browser and in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. Although small and not prominent, this interface element is essential for effective web promotion; it contributes much to web usability and good recognizability of the brand’s visual identity.

The concept of the custom branded illustration was also developed to experiment with the general style of brand graphics that could be used for social networks, banners, and other marketing goals.

Going further, the extensive set of neat icons, both in corporate colors and in monochrome versions, was designed to support visual consistency for diverse branding and user experience goals behind the application and its pages in social networks.

Landing page design

One more important channel of app promotion is a landing page. For mobile applications, it is a web page created to set another touchpoint that informs users about the nature and benefits of the app, engages them to try it, and provides shortcuts to downloading it. Moreover, sticking to the brand style and color palette, the landing page strengthens the brand image’s web presence and recognizability.

Here are different design concepts for the landing page of the Uplyfe application.

Landing page employing dark background, prominent app demonstration screens, and bright color accents

Landing page design based on light, airy background and big custom illustration in brand style

Landing page design concepts with atmospheric background photo content setting the visual connection with the theme of healthy life. The photo also works as a gaze-directing directional cue: on the slide with yoga, the woman’s fingers direct users’ eyes to the CTA element in the header.

Social networks

Naturally, digital products are mainly promoted via digital channels of communication, so the next step of brand design for Uplyfe was considering its consistent identity in social networks.

Here’s how the Facebook page for the app looked. The concept features custom header images based on graphics combining abstract shapes and recognizable objects like a microscope, providing a quick visual connection with the brand style, the theme, and the goals of the service. Also, another illustration is shown as an example of theme graphics for posts.

Here’s how the same approach is adjusted for the Twitter page.

And here’s a look at the brand image concept on Instagram and Facebook for mobile. The system of icons works effectively as the covers for Instagram highlights. Also, the general style of brand graphics for Instagram posts is offered to make them consistent, attractive, and recognizable, sharing the brand mission and valuable information for the followers.

Printed stuff: business cards, posters, lightboxes, billboards

Talking about the more tangible side of branding, here’s how the business card design looked.

What’s more, the style, curvature, and shapes used in the process of design exploration for icons let the designer develop the design system for brand posters and other stuff or merch that could be involved in marketing.

Another direction to take into account was the design of outdoor advertising to spread the word about the application in various urban spaces, such as billboards with motivational taglines or lightbox ads informing about the app’s benefits.

This project demonstrates how the comprehensive design approach covers different aspects of the ways the brand uses to connect with its customers and how much more should be done to develop an attractive and informative brand identity than just logo design.

New design case studies are coming soon; keep up with the updates.

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

FarmSense. Brand Identity and Website Design for Agricultural Technology

Synthesized. Website Design for DataOps Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Carricare. Identity and UX Design for Safe Delivery Service

ShipDaddy. Identity and Web Design for Shipping Service

Illuminating Radioactivity. Interactive Web Design for Education

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Designer AI. Dashboard and Graphics for Fashion Service

Shpin’s Wine. Identity Design for Family-Run Winery

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Branding Case Study: Identity Design for Health Application появились сначала на Design4Users.

Client and Project

FarmSense is a USA-based innovative tech product that helps growers reduce losses from insect pests and lower dependence on pesticides to take the uncertainty out of pest management for better farming and a brighter future.

Why is it important, and how does it help? The agricultural industry loses more than $220 billion in crop damage each year because of insects. For decades, farmers have been stuck with few options for pest management. Most use sticky traps – a time-consuming and inaccurate method, followed by a broadcast spray of selected pesticides and insecticides. Still, sadly, these traps can also affect beneficial bugs that pollinate more than 70% of the global crop supply.

So, the FarmSense team formed by scientists and innovators developed a better way. Using computational entomological models, they created a real-time sensor that can help farmers make better decisions for pest management, saving time and potentially boosting crop yield. The team believes that leveraging the power of machine learning and computational modeling can help save lives, reduce hunger, and help developing countries achieve food independence.

The target audience they aim at is diverse, from big agricultural corporations to small family farms, from innovators and advisors with high tech-literacy levels to farmers that spend most time right in the fields and have no broad experience or tight connections to different software and applications. So, the team worked on the affordability and accessibility of the technology and strived to reflect that in the branding approach and website, helping them communicate with their clients and uncover the product’s benefits. Let’s check how the designers from tubik achieved that goal.

Identity Design

The branding design process started with extensive research covering the agriculture and ag-tech current state in the USA, the existing presence of the sector on the web, the pain points of the target audience, and the touchpoints of the brand communication.

Based on everything mentioned above, the key advantages of the product that branding had to transfer were defined as:

• sustainability
• affordability
• accuracy of real-time data
• rich information

As well, the team aimed at making a visual branding design system that would have a range from more strict and business-like to more illustrative and emotional.

One of the core tools supporting both emotionality and usability in brand design for FarmSense is color. The palette features bright contrast shades of natural colors employing the psychology of color and giving instant visual connection to the topic of agriculture, summer, soil, fields, insects, and plants: green, orange, yellow, and blue. The latter is also traditionally associated with tech-related and digital products.

Having agreed upon colors, the team started working on the logo. The initial logo design approach was based on data as a core of the problem-solving power of the product. The creative search based on that resulted in a set of brand sign options reflecting that idea via lines and dots forming abstract shapes and building association with digital data processing and statistics visualization as well as fields seen from the bird-watch perspective. The basic shape chosen for the brand symbol was a circle.

Here’s a glance at the logo design process, from sketches through variations to the polished sign. The first version of the symbol developed in this direction was an abstract round sign consisting of vertical lines.

First sketches to think over the idea and find the composition

Digital symbol development

Testing the symbol with the brand name typographic part

Monochrome version of the combination mark

The version of the symbol with soft edges

Icons designed to test how the symbol can be further developed into other types of graphics

Another idea for the symbol at this stage of the creative search was to transfer the visual metaphor of the insect or the sun rising above the field, shaped by the lines. The latter was taken into deeper consideration.

Logo symbol sketching stage

Digital logo symbol development

Combination mark for the brand identity

Monochromatic version of the combination mark

The set of branded items was also presented to show how this version of the logo and color palette could work for various marketing goals: banners, printed advertisements, social media posting, business cards, etc.

Although the general idea looked effective, after discussions with clients and deeper testing, we together made the decision to move to another iteration, as this version of the symbol, even looking different, could bring up associations with some political campaigns that took place earlier in the USA. So, the second approach was also based on aerial views on the fields of crops, but this time irregular and asymmetric, cut by roads in various directions.

For this version, the color palette excluded blue, and the basic shape was square. The creative search was done on the sign composition and detailing.

The idea development resulted in the bright three-color symbol with a moderate level of detail and a bold, readable typographic part.

And here’s how it could be developed into the design system for branded items.

Posters design

Truck livery design

However, the deeper the team dived into the visual concept for the FarmSense brand, the more the client’s team got certain that they would like to combine the discussed approach and palette to their existing logo and reconsider it to make its design bright, up-to-date, and recognizable as well as flexible for various communication objectives.

The previous FarmSense logo

So, the final iteration started at the intersection of the existing logo and the ideas considered in the previous versions. The logo had to become simpler and less detailed to stay clear and informative in various sizes and get packed into a new color palette giving a quick connection to both agriculture and digital technology. Again, it started from basic sketching to think over the idea and moved to the polished logo.

Finally, the option with strict thin lines and a thin, elegant sans-serif typographic part was chosen as an approved brand sign.

So, based on that solution, the consistent set of branded items was designed for indoor and outdoor advertising and brand communication.

Billboards and banners designed for outdoor advertising

Business card design

Rollup design

Exhibition stand design

Truck livery design

With the brand graphics above, it’s also easy to see that another important aspect of identity design for FarmSense was creating custom illustrations. They covered four major goals:

• pictures set the atmosphere and apparent association with the agricultural theme
• specially created graphics helped to visualize the flow and benefits of highly-technological processes which are hard or even impossible to show via photos or videos
• custom graphics helped the brand to stand out of the crowd among the players in the agricultural sector, mostly using photo content which is often quite generic and just setting the theme
• the hero illustrations featuring people added a powerful human element and made brand communication more friendly and emotional

The creative process for the illustration also moved from rough sketches to present the idea and discuss it with the clients to the transformation of the approved ideas into bright digital artworks. Here’s a glance at the process for hero illustrations which had to become one of the first visual touchpoints of the product introduction on the website as a channel of communication.

And here’s the process for creating custom graphics reflecting the main benefits of the FarmSense technology.

Web Design

The next stage of customer experience design, extending the efficiency of the product presentation and amplifying brand communication online, was redesigning a website. At the initial stage, the team worked on developing a structure that would be effective and straightforward for the diverse target audience of the product.

Overview of the UX wireframing stage to consider the solid and straightforward website structure and navigation

At the UI design stage, the bright branded colors were used not only for illustrations and other graphics but also as background colors for different website sections, supporting usability, scannability, and readability of web pages.

Here’s a glance at the home page of the website, catchy, friendly, and informative, amplifying the message with a hero illustration sharing the peaceful, sunny, and positive atmosphere and giving instant connection to the topic of farming that employs modern technology.

The set of original illustrations used across the website pages proves itself as a powerful tool for visual communication and storytelling. It supports the text content, sets the mood, and helps establish consistency and integrity in the website’s performance.

Also, an infographic with custom illustrations was created to visualize how the technology works and make its benefits more accessible.

Here’s a closer glance at the set of artistic color icons supporting different text messages and creating visual triggers for essential functions or benefits to make them more noticeable and well-organized for website visitors.

To make the website work effectively and look attractive on any device, the tablet and mobile versions were also well-thought-out. They were arranged to provide a smooth and integral user experience at any stage of interaction.

For our team, the FarmSense project was a great chance to collaborate with the representatives of the modern ag-tech industry developing with a rocketing speed now and utilizing innovations to improve farming experience and outcome, which is crucial for the whole world.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Glup. Delivery App Branding and UX Design

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

Crezco. Brand Identity and UI/UX Design for Fintech Service

Carricare. Identity and UX Design for Safe Delivery Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: FarmSense. Brand Identity and Website Design for Agricultural Technology появились сначала на Design4Users.

Project

Creating a collection of theme illustrations for the hero section on the home page of the hackathon platform website.

Client

Devpost is an international hackathon platform founded in 2009, supporting specialists from the IT sphere to take part in software competitions (hackathons) and get involved in the worldwide creative community. It helps hackathon participants build products, practice skills, learn technologies, win prizes, and grow their networks. The platform has partnerships with many technology giants like IBM, Microsoft, Qualcomm, Oculus, and others. The target audience of the website is quite broad, covering different age categories from young people, students of high schools, colleges, and universities, to adult professionals and experienced experts.

Process

The Devpost team wanted to refresh the look of the home page with bright and informative illustrations in the hero section. What’s more, to make the interaction with the page even more dynamic, they decided upon a set of pictures that would reflect different stages of a common hackathon and would change according to the different parts of the day. The point that added another challenge to the task was that the hero section presented a quite narrow horizontal space. Hence, the illustrator had to consider a composition that would look good, dynamic, and lively in such conditions.

After communicating with the client team and setting their preferences, the illustrator dived into the atmosphere of hackathons to catch the mood and find visual details that could reflect it. For that, she researched tons of photos from real hackathons to develop characters and objects that would bring a clear view of the event. The client team provided a mood board and a huge amount of information allowing for catching the idea of hackathons essence. Hackathons set the unique atmosphere combining high technologies and innovations with traditional approaches to solving complex tasks and checking hypotheses, design and coding, well-checked logic with out-of-the-earth experiments, the seriousness with fun, working alone with working together as a team. It pushes the limits to let the participants uncover new uncommon ideas and solutions as well as reveal the hidden powers of their minds. That was what wanted to be reflected in the set of hero illustrations: not only did they catch website visitors’ eye, but they also were informative and presented a sort of story. Due to the huge amount of information and detailed discussion, the illustrator got the powerful boost to quickly find the needed style and line of visual communication through the art to website visitors, which helped to build a clear and effective workflow.

As well, the illustrations could effectively add to the international nature of such events, presented by the great diversity of human characters, so the creative team invested much attention and effort to feature the variety of appearances, personalities, and nationalities. To reach a solid presentation of each character, the creative team developed narration behind each character, like a small piece of the story, telling who they are, where they come from, what they do, and what makes them special.

The final pack of images included four artworks organized along with the change of day phases and hackathon phases accordingly. Check the pack together with the sketches below.

Morning

Morning illustration shows the stage of registration when the participants get together in the event space. Here you’ll see the diversity of characters, some in the registration process while the others are taking selfies, napping after a flight, not to waste a minute while waiting. The artist employs several visual plans to make the picture deeper and more intensive, letting visitors get interested by looking into details.

Afternoon

The next illustration features the daytime when the hackathon is in its active, creative phase. Here all the characters are deep into the process: some are working on their laptops while the others are testing devices, sharing ideas, and brainstorming together.

Here’s a piece of screencast to give you a deeper glance at the creative process.

Evening

Evening illustration reflects the stage of discussion and presentation of creative results.

Night

Night illustration is more relaxed and shows the after-party mood around. The hints of devices all connected to charge the batteries echo the need to recharge for the hackathon participants.

So, it’s easy to see that the pack of illustrations presents a solid piece of multilayered visual storytelling with a wide variety of characters and details united with visual consistency and harmonically integrated into the home page layout.

One more factor worth attention to in building up consistency and integrity for all the set of pictures is small secondary details: you can find pets such as a cat and dog adding fun and friendliness to the atmosphere, the drones and wires of devices, the numerous stickers on the laptops, including the branded Devpost sticker, the mascot toys some participants take with them, backpacks with badges, typical clothing and footwear, etc. The illustrations strived to feature different styles of work (alone or together, extroversive and introversive), types of communication (offline and online), and posing of characters which is a distinctive feature of any hackathon. Here, you will find people sitting and standing in any possible poses. Also, you’ll find hints of eco-friendliness, allusions to games, and particular personality traits. All the details, collected from the photos of real earlier hackathons, let the visitors see themselves in the characters of the illustrations.

Mobile Version

Working on the graphics, the illustrator also had to consider the mobile version of the website, and it quickly got clear that it needed a different set of illustrations due to the totally different proportions. The screens below show that keeping the clear visual consistency with the web images, the adaptation for mobile screens demanded other compositions, choice of primary and secondary details, the combination of foreground and background, and the posing of the characters.

Another short video screencast is up to let you dive into the creative process for mobile adaptation of the artworks.

This case study was a great example of a careful creative approach to the concept of hero illustrations supported by tight and fruitful communication with a client team to get as many details as possible and provide an outcome full of interesting details and an engaging atmosphere.

Illustration Collections and Digital Art Case Studies

If you want to see more collections of illustrations or discover how they work in particular design projects, here’s the set of posts for you.

Book Illustrations for Visual Storytelling

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Roebuck. Mobile Design and Illustrations for Educational App

World Humanitarian Day. Illustrations and Video for United Nations

In Search of Illustration: Design Process for Illustration Set

ABUK. Custom Book Cover Design for Audiobook App

Moonworkers. Digital Illustrations on Film Production

MYWONY. Storytelling with Brand Intro Design

45 Inspiring Illustrations About Workspaces, Creativity, and Art

Animal World: 4 Beautiful Illustration Sets About Wildlife and Pets

Tubik in Paris. Design Process for Narrative Illustration

8 Bright Packaging Design Projects Employing Illustration Art

Originally written for Tubik Blog, graphic and video content by tubik

The posts’ illustrations belong to their proprietors and cannot be used by other resources without a link to the source.

Сообщение Illustration Case Study: Hero Illustrations for Devpost Hackathons появились сначала на Design4Users.

Project

Synthesized is the all-in-one DataOps platform which is helping to solve one of the most challenging problems we face as a society—the use of personal information. Synthesized makes it easy for organizations that want to collaborate on sensitive data. It enables enterprises to monetize and innovate through their data and speeds up the development of data-driven products. In as little as ten minutes, as opposed to months or years, Synthesized’s AI-based platform provides data practitioners with secure and compliant, ready-to-use, high-volume, high-quality data sets.

Telling about the product’s mission and origins, the founders mention that from their time as Machine Learning (ML) researchers at the University of Cambridge, they struggled to obtain sufficient clean and regularised data fundamental to building predictive models or testing a hypothesis. With ML projects becoming more advanced, the complications were also growing in the attempts to get high-quality, clean data sets. What’s more, they found a gap between the developments of the scientific community caused by the lack of infrastructure to share data safely. So, they started Synthesized with a mission to empower data scientists with the highest quality datasets for collaboration and innovation.

The task for the tubik team was to create a user-friendly and attractive website that would present and promote the service, uncover its benefits, and set a quick, easy connection to its users.

Web Design

Traditionally, the design process started with discussions with the client to dive into the nature of the service, the business goals, and the expectations about the functions the website should cover. After that, the team went through the stages of research and analysis that gave food for thought on how to create effective design solutions for the objectives set behind the website. And then, the stages of UX wireframing and design approach started to let all the sides of the process be on the same page.

Let’s take a look at the general design concept via some of the pages designed for the website. The search for a color palette that would be effective and set the proper mood resulted in a bold and contrast combination flexible for various design needs. Another key choice to make was the choice of fonts which gave the elegant and stylish combination of graceful Canela as a heading typeface and neat geometric Gilroy as a text typeface.

As the dress-to-impress rule still works, especially on the Web overloaded with pages and sites competing for people’s attention, the above-the-fold part of the home page moved through several iterations to find the visual way to reflect the connection to the world of synthesized data. This way, we came up with an animated full-screen background with abstract patterns adding depth and dynamics to the visual experience. The minimalist layout of this part of the page is scanned in no time and features the core navigation in the header, prominent tagline, and small description text to give a short and concise message about the nature of the product, and a CTA button whose noticeability is supported with bold color contrast to make it seen at once.

Background color contrast is used as the primary type of visual divider, helping to separate various web page sections and this way, make content perception easier. The pages look information-packed but not overloaded due to mastering the power of negative space and well-thought-out data visualization. It is a highly essential aspect to consider in user experience design for products that are non-tangible and innovative, so they demand a lot of explanation which is challenging to imagine and hard to show.

This page uses neat tabs with bulleted lists to present information about different features in a straightforward manner that is easy to skim and remember. The abstract background pattern reflects the idea of growth and gets animated to make the experience more engaging.

It’s easy to see from the pages above that one more aspect to consider in the design process was visual elements that would support text blocks. So, the custom icons were designed to support the consistency and integrity of the layout with informative graphics. Making them animated, we could also employ motion to attract visitors’ attention to particular elements and interactive zone, as well as add a pinch of liveliness to the web pages.

As mentioned above, balanced and attractive data visualization was one of the priorities in a project of such a nature, so this aspect was thoroughly thought-out, resulting in a range of techniques from graphs and code snippets brought to the common style to prominent infographic-like numbers presenting essential benefits.

The blog page design uses the uncluttered regular grid with one featured post on top. We also thought out and offered the design system for covers of the articles and resources, designed in a futuristic manner and satisfying both consistency and diversity needs.

Here’s the system of cover images designed for whitepapers and downloadable resources to be presented in style echoing the web platform’s visual identity.

The Company page is built around the animated photo gallery, which sets the emotional connection and adds a powerful human element to the presentation of the product.

As a number of our earlier projects, for example, Credentially or ShipDaddy websites, the Synthesized website was also implemented on Webflow. It enables both designers and the client’s team to effectively update the website in live mode and keep up with the speed of the company’s growth.

Mobile Adaptation

For any web project these days, the well-crafted mobile adaptation is not a privilege anymore but a must-have that makes the website look good and work well on any device convenient for the visitor, as well as have a significant impact on search ranking. Here’s a glance at how some pages of the Synthesized website look on mobile.

Synthesized is the company we’ve still been collaborating with, so it’s not the complete story: new design tasks are being covered, new challenges are being faced, and that’s the amazing experience to go through the different growth and scaling stages together with the client, from the basic website to the diversity of pages, content, and functions.

Stay tuned; new design case studies are coming soon!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Carricare. Identity and UX Design for Safe Delivery Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

ShipDaddy. Identity and Web Design for Shipping Service

Illuminating Radioactivity. Interactive Web Design for Education

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Synthesized. Website Design for DataOps Platform появились сначала на Design4Users.