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.

The release of the new style called Fluent Icons was announced on Product Hunt today, and we’d like to unveil a bit more about that news in our fresh D4U Review post.

The new design style contains 965 color graphics covering a variety of topics.

The bright color graphics are pixel perfect and consistent to be effectively used in user interfaces, infographics, presentations, and social media visuals. The icons can be used in personal and commercial projects, free for a link attribution. Those who have Icons8 Pro license, get the extended range of options as they can get all the icons in SVG format in various sizes.

Сообщение Icons8 Released About 1000 Icons in New Style Inspired by Fluent Design появились сначала на Design4Users.

Today D4U Review issue introduces a new service by the Icons8 team called omg-img. Its main goal is to make embedding vector icons in HTML super simple, and it uses a huge collection of icons which is continuously growing and at the moment presents about 50K items available. Users do not even need to insert a Javascript code. This was done with support from a production-scale CDN service provided by KeyCDN.

Users can select icons from more than 10 different styles, specify the size of the icon (up to 512px), and even recolor it. Each style has the size it’s designed for, in other words, pixel-perfect size:
iOS: 50×50
Windows 8: 26×26
Windows 10: 32×32
Android 4: 24×24
Android 5: 24×24
Color: 48×48
Office: 16×16, 30×30, 40×40, 80×80

The team keeps developing and testing the service: a couple of useful features are already being prepared for the next release:
– ability to specify the size as 2x, 3x, etc. instead of in pixels in order to keep correct proportions from the pixel-perfect size for each platform
– adding icon effects like background and a horizontal flip (direction).

Full product description and all the links can be found here. At the moment, all the mentioned functionality is available for icons in png format. The same performance is coming soon for svg and will be open for all the users who have an Icons8 license.

By Icons8, the team behind the great collection of icons for different purposes

Сообщение Design Tool: omg-img. When Adding Icon Is a Piece of Cake появились сначала на Design4Users.

The vital role of icons is not a secret for web and app designers now, it is mentioned in numerous articles and books on design, presented in workshops and webinars, and shown in numerous case studies. We decided to add our two cents to this bulk of knowledge about icons, as this theme seems really constant and demanding.

The essence of an icon

Basically, an app or desktop icon is an image that having a kind of symbolic and metaphoric potential becomes the element of navigation in the process of interaction. In deeper explanation, an icon is a visual symbol representing some action, thing, person, real or virtual.

In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage, therefore, making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.

Being so multifunctional and comprehensive, icons of the apps and websites can be:

• • interactive, i.e. directly representing buttons, controls, and any other elements of interaction
  • clarifying, i.e. visually explaining some functions, categories, actions, not being the direct element of interaction themselves
  • decorating and entertaining, i.e. having lower functionality and higher aesthetic potential, providing a decorative addition to general style, for example featuring some seasonal celebrations, etc.

An example of interactive icons: Veggie App Concept

An example of clarifying icons: Passfold project 

An example of decorative icons: Easter and spring-themed icons

The features of icons

Some basic features of efficient icons include being:

• meaningful

As has been mentioned above, an icon is a graphic element that has high symbolic potential. It means that by creating the icon, first of all, a designer should define what is its role and meaning as a separate element and as a part of the general layout. Talking about more earthy things for a kind of metaphor, the best chefs always say that everything that is put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with unnecessary elements.

• clear

Behind the clarity here we mean making the icon understandable. That is one more feature supporting icons being meaningful. In fact, what is the point of being meaningful if nobody except the creator understands this meaning? For the icon, lack of clarity is the death knell. Instead of speeding up and easing the process of interaction, such an icon will confuse the user and bring out a poor user experience.

• simple

The simplicity of icons is still a kind of debatable issue. Actually, designers agree that icons should be simple but still argue about where is the level of simplicity needed. Anyway, here in the studio we support the idea that any icon should be as simple as it is required for its particular aim and function and the designer working on it should stand on the foundation of following the existing guides for icons design and omitting any unnecessary details that can overload the image. However, at the same time, it’s important to remember the general style and other elements of visual representation of the whole app or website concept. Successful consideration and combination of these factors will result in efficient icons.

Valentine’s Day icon set 

• recognizable and unique

To make the icon recognizable, the designer needs to become a researcher before starting with the task. Taking the time for exploration and analysis of the existing icons and thorough investigation of the competition can create a significant basis for making the icon easily remembered and catchy. If a designer finds a way to make the icon recognizable not losing its main meaning, it will become the first step of attracting the user in conditions of active competition as well as will provide a positive feature for user experience as the user won’t be annoyed losing the time on looking for the necessary icons which aren’t recognizable at once.
The feature of uniqueness mentioned here doesn’t mean the creation of absolutely unique stuff every time you need the icon, but thinking about some even slight flavor of uniqueness via small changes or details can make the icon more recognizable both in the AppStore or PlayMarket and on the screen of user’s device.

• aesthetic and attractive

For sure, remembering that icon is a visual representation of the meaning, it’s important to take the graphic and aesthetic side of the issues into account. Visual appeal is the first step to encourage the user to get into the meaning you represent behind the icon and at the same time, it is the important element making the product regarded as attractive, beautiful, and stylish. Following the principles of color theory, proportions and other features making the result of graphic design successful is always very helpful in the creation of a great appearance for the icon meaning.

Saily ghost icon version

• flexible

As nowadays more and more various sizes and resolutions get into the game, flexibility and scalability are included in the list of key features making icons efficient. A good icon should be seen, readable and recognizable in different sizes and environments therefore it is one more process that should be thoroughly considered while creating icons.

• consistent

Icons as well as the other elements of the layout have to feel consistent as they often become the most powerful conventions and signifiers. For instance, if there are several icons in the app – as usually happens – they should follow the same style, and concept and correspond to the general design solution for the app, supporting the harmony of visual representation and interaction instead of breaking it with non-consistent elements.

IT Office Icons Set 

Creating icons for various design projects in Tubik Studio, we try to keep the principles mentioned above carefully combining them with every piece of unique design we work on. Besides creating handcrafted icons for projects, we have also presented several packs of icons on Dribbble, Behance, Creative Market, and Envato.

Multimedia Icons Presentation

Useful articles

Small Element, Big Impact: Types and Functions of UI Icons

Shape and Color in Logo Design. Practical Cases

Visual Perception. Icons vs Copy in UI

Small Stars of Interaction Design: Interactive UI Elements

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation

UX Design Glossary: Affordances in User Interface

UX Design: How to Use Animations in Mobile Apps

Originally written for Tubik Blog

Сообщение Iconic Simplicity. The Vital Role of Icons появились сначала на Design4Users.