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.

Crypto Blog

Cryptocurrencies present a hot and trendy theme to discuss and research these days, and this web design lets us also add two cents to it. Here are some pages for the blog about the crypto world. Stylish composition echoing traditional broadsheets layout, readable and elegant fonts, a minimalistic palette with cool color accents and trendy images — all that helps to transfer the idea of the quality and informative resource which is easy to use and stands out of the crowd.

Web Editorial About Insomnia

This web design was created for the online editorial to reflect the actual and globally known issue of insomnia, which significantly influences human health, both physical and mental. It’s easy to see that typography becomes the most prominent element of the design concept, not only sharing the information but also setting the atmosphere at once. Impressive manipulations with typographic elements become a part of the design approach and greatly impact setting of the mood and emotional background, which is also massively transferred by the thematic photo video content. Also, the trendy menu design, smooth and captivating, sometimes even hypnotic motion graphics, and color palette setting the visual connection with evening and night time contribute to the website’s elegance and visitors’ engagement.

Illuminating Radioactivity Educational Website

Illuminating Radioactivity is an educational web resource covering different aspects of radioactivity, designed by tubik and developed in partnership with the Bombshelltoe Arts and Policy Collective and the Stimson Center. The interactive home page, original typography, uncommon layouts, catchy images, thought-out data visualization ideas, and many other details helped present the topic from a much broader and more engaging perspective.

Read more about the design process and solutions in the web design case study.

Blog Layout Explorations

This web design concept demonstrates the layout exploration for the featured article based on a nuanced monochromatic palette, sophisticated typography, and photo content, creating the proper mood.

Art Institute Blog Design

Feel the power of sophistication as this web design project is literally made from it: that’s the look at the web page layout explorations for the blog devoted to art in its diverse manifestations. The airy layout, beautiful and prominent photo content, and elegant typography let the visitors catch the artistic vibes from the first second.

Geography and Ecology Blog

This is the user experience design concept for a niche blog devoted to topics connected with the environment, ecology, geography, and the modern state of nature. Here, the design impresses the visitor with spectacular photo and video content, illustrating informative and important text content and enhancing emotional communication with the readers.

Powerful Women Editorial

This design was created for the web editorial, telling the inspiring stories of amazing women who had the power to change the world. Close to design for printed media resources, the user experience is focused on text content elegantly presented with the following aspects:

• a well-thought-out choice of fonts
• stylish and moderate color palette
• prominent photo content, creating the needed atmosphere in split seconds and working in one harmonic composition with the text
• minimalistic and intuitive navigation
• smooth motion
• a solid visual hierarchy that allows for effective scanning and skimming.

Editorial About Generations

This eye-pleasing web design was created for an editorial devoted to different generations. Here, you will find the limited and contrasting color palette, sophisticated typography that makes even text-heavy pages beautiful and readable, airy web page layouts to let users quickly scan the content, and elegant use of imagery instantly creating the atmosphere.

Bartending Encyclopedia Website

This website is devoted to the theme of bartending, telling about various drinks and cocktails. Custom photo content, trendy split-screen structure, and dainty typography make the web pages beautiful and set a strong emotional appeal.

Stop Plastic Editorial

This web design project deals with a hot and important topic of today: our world is overloaded with plastic, and this issue shouts for global attention. Take a look at the original design for the editorial, telling people more about the problem, its influence on nature and our future, and the ways to solve it. Limited and contrast color palette, readable text blocks efficiently supported with negative space, impressive visual and video content, and smooth motion for interactions make the user experience emotional and engaging.

Skateboarding Culture Editorial

This design was done for the online editorial devoted to skateboarding culture and history. Minimalist layout, bold typography, monochrome color palette, irregular grid, prominent atmospheric images, and archive video content supported with smooth motion – all the mentioned immediately set the needed mood and engage the visitor to learn more.

Book Review Website

Here’s the web interface designed for a book review resource. The elegantly designed pages are based on color contrast, visually separating different content zones, typography ensuring a good level of readability and book cover presentation and smooth animation, making the user experience more lively and dynamic.

Culture Magazine Web Design

Online magazines are getting more and more online presence today, with people using the web to get both information and entertainment. So, for web designers, it raises the challenge to combine digital design trends with traditions of editorial design. Here’s the home page designed for a website of the online magazine about culture. Prominent photo content, trendy asymmetry, unobtrusive navigation, and well-checked readability make the layout elegant, attractive, and easy to use.

New web and mobile design collections and design case studies by our team are coming soon – don’t miss the updates!

Tubik Design Collections and Articles

If you want to check more creative sets and useful articles on UX design for web and mobile, here are some of them.

Web Design: 11 Diverse Functional and Awe-Inspiring Website Designs

Dainty UI Design Projects Inspired by Food and Drinks

10 Elegant and Handy User Interface Design Projects

App Design Ideas: 7 Nifty Mobile Application Design Projects

Product Page Design Inspiration: 17 Ecommerce Web Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

UX Design: Types of Interactive Content Amplifying Engagement

Motion in UX Design: 6 Effective Types of Web Animation

5 Pillars of Effective Landing Page Design

The Anatomy of a Web Page: Basic Elements

Originally written for Tubik Blog, graphic content by tubik

Сообщение Elegant and Informative Web Designs for Media and Editorials появились сначала на 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.

Café Com Passagem

Café com Passagem project description from designers:

Café com Passagem is a family business focused on the specialty coffee market located in Foz do Iguaçu-PR. The need for this redesign came with the aim of praising the special Brazilian coffee bean, creating a brand aligned with the quality of the product that is able to reach international territories as well as the expectations of the specialty coffee consumer, who generally seeks knowledge about the world. of coffee and appreciates the stories behind each cup.

Specialty coffee in Brazil is treated in a very meticulous way, a process that involves many people and respects nature. The visual identity was built based on these precepts, with elements that reinforce craftsmanship, manual harvesting, people, Brazilian culture, and sustainability. The symbol in the typography represents coffee and the world, the Brazilian specialty coffee that has gained a prominent position in a global context. For the supporting graphic elements, animals from the Brazilian fauna (mainly from the Paraná region), the legend of Naipi and Tarobá, and drawings that illustrate the wisdom of the past of coffee cultivation were used.

Terrano Engenharia

Terrano Engenharia project description from designers:

The brand was built by reinforcing the terrain’s work fronts (projection, work alignment, topography, and soil analysis) and also supporting the main pillars that the client expects to find in an engineering company: precision, seriousness, and safety.⠀

The colors used in the project represent a gradient of soil colors. Symbols and lines are essential elements in maps, and that is why they were added to the various geometric shapes of the visual identity – from the symbol “T” of the logo that was obtained from joining squares to complementary materials. The formats are generalist to facilitate reading and increase the level of understanding.

Puppen Kids

Puppen Kids project description from designers:

The word “Puppen” used in the logo comes from the German language, which means dolls. The dolls historically occupy a place that brings warmth and affection, in addition to the rescue of free play. They were used in the complementary material as well as in the company’s name, contextualizing the idea of how dressing can be fun, cheerful, and cool.

The purpose of this visual identity is to encourage children to create their own imaginary world, express themselves, and play with comfort and style. The three dolls were strategically designed to initially represent Hannah, João Guilherme, and Isadora, children of Puppen Kids entrepreneurs – the biggest incentive to open a store in this segment. Being a democratic color, yellow is prevalent in Puppen Kids’ visual identity – not imposing any gender barriers.

Check more projects by this team in the Black Pepper Design portfolio on Behance.

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

• creative wine packaging design projects
• sophisticated brand identity designs
• identity and packaging design projects
• logo designs for different business goals
• people illustration gallery
• captivating 3D animation concepts
• impressive packaging designs 
• artistic portrait collages
• childhood illustrations
• 3D illustrations
• book cover designs

Сообщение 3 Stylish Visual Identity Projects by Black Pepper Design появились сначала на 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.

Cuca Green Fonda

Corporate identity design project for an inn-type restaurant with organic and natural products.

Daniel Barreto Visual Identity

Identity design project for the talented audiovisual and graphic artist Daniel Barreto. The main design objective was to create a corporate identity project that visually reflected Daniel’s audiovisual work, with the creation of a monogram as a Japanese stamp, as Japanese graphic artists used to stamp their work, and a logo that reflects strength, distinction, and dynamism, and integrate the graphic work and the elements of the stationery consistently.

MIES Identity Design

Corporate identity design project for high-line quality gourmet products next to be commercialized in México.

Kiyoshi Sushi & Sake Bar

Kiyoshi is a corporate identity project for a luxury restaurant with a sake and sushi bar, a project carried out for a Domestika course, with the purpose of teaching the basic principles of modifying typography to create unique logos. The concept was inspired by Japanese gastronomy, which sees food as a ritual; the typographic inspiration and the illustration were made taking as inspiration the woodcut Ukiyo E engravings from the Edo period.

Check more projects by this team in Monotypo Studio Behance portfolio.

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

• creative wine packaging design projects
• identity and packaging design projects
• logo designs for different business goals
• people illustration gallery
• captivating 3D animation concepts
• realistic 3D portraits
• impressive packaging designs 
• artistic portrait collages
• childhood illustrations
• 3D illustrations
• book cover designs

Сообщение 4 Sophisticated Identity Design Projects by Monotypo Studio появились сначала на 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.