For the last decade or so, we’ve witnessed the rocketing rise of demand for diverse delivery services, getting even more popular in the world of online shopping. In this case study from the tubik agency design team, we will unveil the story of our collaboration with one of them: welcome to check the creative process of identity design and mobile application for Carricare, the service that helps customers get their parcels delivered safely and in perfect time.

Client and Project

Carricare is a service based in the UK; its objective is to effectively connect couriers and customers expecting the order to set perfect conditions and timing for delivery. It is an instant and real-time notification platform for delivery couriers that helps clients with last-minute delivery notifications, allowing them to manage their time better. Therefore, it aims at solving a fundamental problem of courier delivery, when the parcels aren’t safe if brought at the wrong time and left just at the door – or leading the courier’s coming up with the idea of what to do. Automating different user scenarios, the service makes the delivery process smooth and effective for both the courier and the addressee.

The first stage of brand design was all about absorbing, sharing, and analyzing various information. We dived into discussions about the client’s goals, visions, and brand value, as well as researched the market segment to develop a solid brand approach before the actual design of its identity started.

The service mainly focused on two critical aspects appreciated by target users: the safety of all sides of a delivery case – couriers, clients, and the delivered parcels – and the high convenience of taking them for the addressees. That’s how the brand name, Carricare, was up, combining two major concepts – carry and care – and echoing the idea out into the tagline: we carry and we care about your parcel, your time, and your convenience.

In the research process, the graphic designer emerged into the topic of visual elements that support the delivery process in the United Kingdom, from history to the modern state. The mood board of diverse stamps and icons transferring important messages, like the parcel’s fragility or the need to protect it from wet conditions, inspired the general approach to branding, echoing these well-recognized meanings and adding new ones to the set.

Another key aspect to consider was brand colors choice. In this case, the brand uses a bold and contrasting combination of colors, all well-grounded by the service essence: primary colors are blue and red that echo the UK flag colors, while the additional color is cardboard color setting the apparent association with packaging and boxes used for parcels.

So, logo design presents a combination mark flexible for plenty of practical goals. The bold typographic part is supported with a set of informational graphics reflecting the parcel delivery theme:

• parcel symbol
• fragility symbol
• water protection symbol
• parcel in hands symbol, transferring the ideas of courier delivery and care for the parcel
• line waves adding association to the typical postal stamps
• the heart symbolizing care and using the color contrasting to the rest of the graphic elements.

Here you can take a look at the ideas of different logo options and elements’ placement to cover various brand identity goals.

To make the logo work in an even more dynamic way in the digital environment, we’ve also made the animated logo version.

Here’s how the logo works on the branded boxes. Take a look at how QR code presenting the primary interactive element is integrated into the wavy pattern.

And these are the stickers, another key element developed for the courier and addressee interaction.

In addition, to satisfy the need for custom graphics, a special consistent system of icons was developed to link together branding and app design, also echoing the branded color palette and reflecting a variety of user scenarios that may arise.

Another task for the creative team was to think over a variety of graphic assets for marketing goals and outdoor advertising, such as posters, billboards, city lightboxes, etc.

Posters design

Billboard design

City light box design

Intending to strengthen online marketing and amplify brand recognizability, we’ve also worked on the general stylistic concept as well as the set of design templates and ideas for social media posting and advertising that would consistently reflect the identity.

So, this stage of the design process resulted in an eye-pleasing system of identity elements combining aesthetics and practicality, both essential for the service brand image.

UX Design

The mobile application was designed to meet the needs of two different categories of users: the courier and the recipient. The app offered several scenarios of delivery flow and was based on the delivery process improvement as a core feature: it aimed at providing successful parcel deliveries even when the recipient is away. Approved couriers scan the QR code, and the recipients get a notification and choose if they just open the door and get it when they are home, get the parcel back to the depot, leave it with a neighbor, or ask the courier to leave it in a safe place.

The user interface of the mobile application is nice and clean in the best traditions: minimalist and highly functional layout, readable typography, light airy background, and bright color accents make the app intuitive and easy to use on the go and for users of different ages. Custom illustrations help to not only enhance the messages but also add aesthetic and emotional appeal to the interface as well as keep close bonds with the rest of the branded items.

One more significant detail to consider was the app icon design that would be noticeable and digitally friendly, contributing its two cents to the general brand style of the service.

Working on the Carricare project, our team has got another great experience of connecting the physical and digital worlds employing beautiful and functional design.

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.

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Roebuck. Mobile Design and Illustrations for Educational App

Nonconventional Show. Website Design for Podcast

uMake. Branding and Website for 3D Design Tool

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

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

FarmSense. Identity and Web Design for Agricultural Technology

OOP. Brand Identity Design for Online Flea Market

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

Сообщение Case Study: Brand Identity and UX Design for Safe Delivery Service появились сначала на Design4Users.

Project

Bennett is a modern brand offering users high-quality tea for different tastes. It produces various worldwide popular beverages, such as black tea, herbal tea, green tea, decaffeinated tea, iced tea, and seasonal tea. The brand is positioned at the crossroads of hot trends and classic traditions and transfers the idea of elite, exclusive products which are about lifestyle and mood rather than just a drink.

Identity Design

The logo design for Bennett is based on the symbol, which presents a combination of shapes sharing the visual metaphors of a teal leaf, an eye, and a teacup seen from above. The sign is harmonically combined with a typographic part that features the brand name presented in an elegant and minimalist manner.

The brand identity that had to stretch to the e-commerce website design is rooted in the creative spark that is sometimes hidden in the simplest things. It started when our designer and art director, Ernest Asanov, got inspired by a photo of neatly collected tea leaves and started developing the idea. In identity design, it got transformed into a graphic pattern, and later the set of patterns applied to packaging and branded items. In the website design, the idea to feature realistic images of tea leaves turned into a video used on the product page.

Here’s how the graphic patterns became the basis for packaging design and stylish paper cups.

From the packaging perspective, one more important design task was creating an informative label that corresponds with the general stylistic concept and keeps consistency across a variety of packaging options. The label design carefully arranges a lot of text content about the particular tea blend to make it readable and straightforward; it looks original and trendy due to typeface choice and enhances perception with neat and clear line icons. The front label contains only key information and focuses buyers’ attention on it without distracting or overloading them with too many details, while the back label presents much more detail.

As a part of identity design and brand communication, special branded envelopes and business cards were also developed to echo the style.

Web Design

The website design approach starts from the home page, which uses typography as its primary and only tool for informing and impressing visitors. No photos, no illustrations, only the elegantly wrapped text content setting the mood and call-to-action button seen at once and inviting the visitor to check the range of the offered products. Product pages instantly connect to the tea theme and set the emotional and aesthetic appeal due to the video of tea leaves scattered from the top of the screen.

Here’s a closer look at the interaction with product pages in the tea store. The layout is built on bright and bold color combinations for the backgrounds, effectively highlighting various products in different packaging colors. Split screen, sophisticated geometry, smooth animation, and original typography – that’s what the designer chose for this case of web layout. The text information is organized in boxes, forming a sort of asymmetric grid.

To keep up with the external consistency and recognizable mental patterns of commerce website users, the website uses a stylish and minimalist sticky header, with the brand element in the center, links to core navigation in the left part, and a shopping bag button in the right corner. The latter uses the visual marker accented by color to let visitors quickly see if they already have something in their shopping bag.

The live Bennett Tea website was fully implemented on Webflow: for our team, it was a great chance to try how it works for non-standard design aimed at e-commerce objectives.

To make the website look good and work effectively on various devices, the designers worked out the mobile version of the website.

The website got positive feedback from the global design community, having received three awards on Awwwards: Site of the Day, Mobile Excellence, and Developer Award, proving once again that Webflow allows for the effective implementation of projects of different complexity and non-standard design solutions.

Stay tuned; new 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.

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Nonconventional Show. Website Design for Podcast

uMake. Branding and Website for 3D Design Tool

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

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

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

OOP. Brand Identity Design for Online Flea Market

Otozen. Mobile App Design for Safe Driving

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

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

Project

Millions of drivers in the world face the problem of car vandalism, damage to a parked car, or lack of information about safety issues in different locations. The client had an idea to create a community of drivers so that they could easily get and exchange actual information about car accidents in specific areas, find a safe place for parking and get news about their cars left on the parking spaces.

The application had quite a diverse target audience of various ages, gender, physical abilities, and levels of tech literacy. What’s more, in most cases, the users would use it on the go on different devices and in diverse conditions of lighting, noise, and other factors influencing user experience. So, the user interface had to be highly intuitive and employ well-recognized patterns of user behavior.

User Scenarios

The app had three scenarios:

• You are an accident witness, and you report the accident (flat tire, sideswipe, ticket or highlights turned on, etc.), specifying the license plate number. The driver gets a notification about his car, so he can immediately react to it.

• You are a driver. You park a car and receive all notifications about it. Furthermore, you can turn on the parking mode and receive all notifications in the area nearby. When something happens with another car (for instance, dome vandalism) close by yours, you will know about it and can avoid that happening to your vehicle. You go to the other area and look for a place to park. You can see all of the accidents that happened there recently and find the safest parking lot.

• The app also may help police since the search for a witness of the accident would be easier. This way, the drivers using Pazi app would avoid many unpleasant situations, starting with a dead battery due to the lights turned on and ending with vandalism. Drivers come together in a friendly community to reduce vehicle accidents and speed up reactions to them.

UX Design

Let’s have a look at the screens and navigation aimed at covering the goals and scenarios mentioned above.

Main Screen

The map on the main screen allows a user to track all of the close incidents and gets fast access to all of the app features.

Search field: aims at the search for a safe parking place and view of all reports in the needed area.
Tab bar: provides fast access to profile and reports screen.
Add button: lets a user add a new report of an accident
Features: pinning the place allows for tracking the area around a parked car when you are far from it.

Reports Screen

The reports screen has two tabs.

All reports: History of all added reports in the current city

My notifications: Reports indicated with the user’s license plate. The user is immediately notified when the report on his car is done.

User Flow

Traditionally, at the stage of UX wireframing, the designer developed the layout, navigation elements placement, and flow of interactions in clear monochrome screens.

Scenario 1

Adding a new report is a primary CTA on the main screen. The user can choose the type of accident to classify their report. Then a new report screen opens, and the user has to indicate the circumstances of the accident. The address is set automatically by the user’s location, but they can change it in case of a report delay.

The license plate field is a piece of the required information; it activates the opportunity to notify the car owner about the accident that happened with their car. The comment field lets users describe the details of an accident, but it is optional: the main goal is to make the report as fast as possible, so giving details is not obligatory.

Also, the client asked to make the photo/video attachment as required, so the camera was designed with fast access to the latest photo in the gallery. The recording of the short video is possible by a long tap on the camera button.

Also, the designer offered the client to add the possibility of contacting the accident witness, but there was a problem with confidentiality and personal data security. So, an optional checkbox was added to the New Report screen: it allows opening the user’s contact info, but only the car owner can do it.

Scenario 2

A driver parks his car in any area and turns on the parking mode by pinning the location. The app remembers where the car is left and starts monitoring this area so that the driver could be notified not only with reports with his car plate number but also other accidents reported nearby.

Scenario 3

The driver is going to visit a new place and park there. He uses the search to see how many accidents have happened there recently and decide if it is safe to leave the car there, or maybe there is a reason to find another place.

UI Design

Color palette and style

The color scheme is based on a light and airy background that makes the text content highly readable, while the color accents are easily caught in different conditions of the app use. The client requested the turquoise color as primary, so it helped the designer to understand his vision of the visual style. The idea was to make the app friendly and easy, and round the corners of unpleasant situations in an elegant style, not provoking any tension or overdistraction.

Icons for accidents

Continuing the style, there was made a decision to illustrate every incident type by a specific icon and assign a color for fast identification of the reports on the map and other screens. Color marking is a well-checked way to reduce the user’s memory load and make the interaction patterns quicker and simpler. It helps the user to scan and understand the content even before reading about the type of accident.

Camera

Simple and handy camera screens and interactions were also included to provide functionality for the core app needs: fast photo or short video. Minimalistic layout and clear navigation allow a user to take a picture instantly right on the accident spot.

Here are some more of the final app screens: sign-up/log-in popup window, interactions with a map, profile and user contact information, etc.

In general, all the user interface design for the mobile app was built around simplicity, intuitiveness, and readability as core issues of positive user experience.

UX Design Case Studies

Welcome to review other case studies on UX design process and solutions for a variety of digital products:

Designer AI. Dashboard and Graphics for Service for Fashion Designers

Otozen. Mobile App Design for Safe Driving

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

Bitex. UX Design for Stock Analysis App

Perfect Recipes App. UX Design for Cooking and Shopping

CashMetrics. UX Design for Finance Management Service

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping

Watering Tracker. UI Design for Home Needs

Home Budget App. UI for Finance

Originally written for Tubik Blog, all graphic content by tubik

Сообщение Case Study: UI/UX Design for Vehicle Safety Mobile Application появились сначала на Design4Users.

Having explored the work styles and approaches, Yaroslava says that with long-term practice, both traditional and digital artists work out their own routine and the number of creative stages. In this post, she shares her process which mostly has 5 steps. Here it’s presented by the example of her fresh artwork reflecting the theme of the Winter Olympic Games.

Stage 1: Sketching by Hand

The first stage is devoted to the search of composition, dimensions, characters and their interactions. It is done by hand sketching. If this sketch isn’t going to be shown to clients, don’t try to go deep into all the details – strive for the level of fidelity clear for you personally and save the ideas.

Stage 2: Turning a Traditional Sketch into Digital

The second stage transforms the idea from traditional to digital drawing. Yaroslava uses the scanned or photographed sketch as a base in the Adobe Illustrator. Then she starts to outline the sketch using Pen Tool if lines are strict and Curvative Tool in case of smooth lines. At this stage, she draws the main dimensions without details as well as moves bodies and structures in search of a nice composition. This is the phase when the frame of the illustration is created.

Stage 3: Color Choice

The third stage is all about color. The designer has to make the decision about color palette and combinations. In this particular illustration, the choice was not so hard: she decided to apply the colors of the symbolic Olympic rings. Each of them was used as the basis for a particular ring with the character inscribed into it.

Stage 4: Dimensions and Details

The next stage is devoted to working out details and adding volume. The dimensions and shapes are getting clearer and sharper.

Stage 5. Textures and Dynamics

At the final stage, the designer adds the textures. They breathe in life into the visual images. In this illustration, textures allowed for setting the effect of speed, dynamics as well as visual prompts of the winter season.

In most cases, the designer adds textures with masks. She creates a mask and copies there a black-and-white gradient of the element to which the texture is applied. Then she applies the Grain effect. The other variant is painting inside the mask with the texture brush of white, black or gray color depending on the needed effect.

In the end, she scales the illustration, makes a reflection for the holistic view and adds small alterations if they are needed. The illustration is ready!

Final Tip

During the illustration process, the designer follows the principle to cover all the illustration at every particular stage. All the parts of illustration have to be equally worked-out at the level required by the specific stage before moving to the next step. This approach helps to avoid the situation when some parts are developed in the slightest details while the others feature the lack of patience and persistence. Harmony and consistency are the artist’s best friends.

Check the earlier article to see more illustrations by Yaroslava and read a bunch of useful tips for graphic designers.

Useful Case Studies

For graphic designers interested to see more practical case studies with creative flows, we have collected the set of articles.

Moonworkers. Digital Illustrations on Film Production
Quisine. Branding Design for Food Delivery Service
Dicey. Logo and Mascot Design for Party Game
MYWONY. Storytelling with Brand Intro Design
Florence App. Illustrations for Healthcare Service
Tubik in Paris. Design Process for Narrative Illustration
LunnScape. Identity Design for a Landscape Company
Binned. Brand Identity Design for Cleaning Service
Reborn. Identity Design for a Restaurant
Andre. Corporate Branding Design for Landscape Firm

Originally published in Tubik Blog

Сообщение Illustration Case Study: Step-by-Step Process for Winter Olympics Artwork появились сначала на Design4Users.

We have already shared case studies with the stories of creating logos and brand identity concepts for Ribbet, Passfold, Saily, SwiftyBeaver, Andre, and Reborn. The new story is about brand identity designed for Binned, the US-based cleaning service, supporting a cleaner and healthier environment for the local community by washing and deodorizing the trash bins outdoors.

Project

Create a brand identity for a trash bin cleaning service based in the US.

Process

Binned provides a service that cleans and deodorizes outdoor trash cans to promote a healthier environment in local communities. Based on that, a detailed description of the service and the brand image which the client wanted to set for the target audience, the designer was assigned to create the logo and a set of branded items that would grow brand awareness.

Logo

At the stage of the creative search, several directions were tested, including a minimalistic lettemark and also lettermarks showing the initial letter combined with bubbles setting the association with washing and cleaning. Another set of options included elephant mascot to evoke bathing, water, and environmental awareness.

Having reviewed the versions, the client tended to choose the logo presented as a lettermark but wanted it performed with original and friendly mood. So, the next stage developed this direction and the designer presented the set of colorful lettermarks applying the shapes of the wave to echo the idea of water splashes and cleaning and various gradients to make the image noticeable and catchy. Various color options for lettermark logos were also tested for visual impact.

The lettermark design most closely matched the business brand: the final version of “B” was developed as a visually appealing “splash” in watery blues. Also, the client was provided with the combination mark combining lettermark with the entire brand name in a simple yet bold font. These brand identifiers strongly evoke a sense of water, cleanliness, and fun.

The client was finally presented with vertical and horizontal variations in color, as well as a monochrome version, for the lettermark design. This approach provided higher flexibility for further marketing needs.

Horizontal version

Vertical version

The monochrome version of the logo is easily recognized and stands out on a variety of backgrounds and surfaces.

Also, the animated variant of the logo was designed to be applied on the website and in social marketing: the motion smoothly imitated the natural movement of water waves and splashes looking attractive and catchy.

After the logo was approved, the next stage of the design process was aimed at creating a branded idea supporting general identity.

Business cards

Business cards and other stationery items designed for the service reflect the minimalist color palette and typography of the brand identity.

Hangers

The set of hangers were also designed in the same visual concept: their purpose is informing users that it’s time for the bin to be cleaned with the key reasons why. The hangers also featured the funny and cute mascot – yellow bin: it was later used in the promo video for Binned which we will show you in our next case study.

Vehicle

The branding was carried through to the design of other company assets, including the truck livery, which features a bold and easily recognizable brand identity.

T-shirt

The logo stands up well to use on items such as apparel, where the monochrome background of items such as T-shirts allows the brand identity to pop.

Brand guidelines

The client was provided with a full set of guidelines for logo and identity use, including color palettes, fonts, and placement. Practice shows that the guidelines play a strategic role for brand development: all the further contributors to this process will get clear instructions about correct and wrong ways to use the graphics created for this brand. The document included several sections and informed about the idea which became the basis of a logo, its structure and specifications, color and monochrome versions which could be used for different purposes. Also, it showed examples of incorrect usage in order to avoid poor visual performance. In addition, all the branded items created for this project were included in the guidelines and described in detail.

To share the details about this project with our readers and clients, we added a new interactive case study in our portfolio.

If you want to know more about the creative stages of the design process for logos, welcome to read our free e-book “Logo Design”. Don’t miss the updates here, new case studies on branding, web and mobile design are coming soon!

Useful Reading

Creative Stages of Logo Design

The Role of Branding in UI Design

6 Creative Stages of Design for Branding

Identity Design: 5 Basic Types of Logos

How to Use the Power of Mascots in Branding and UI Design

Originally written for Tubik Blog

Сообщение Design Case Study: Brand Identity for Cleaning Service появились сначала на Design4Users.

Tubik designer Tania Bashkatova loves traveling as much as design, so she often combines these passions to create sophisticated concepts devoted to travelings and nature. Today we present the case study on the design concept of the website for travelers called the Big City Guide.

Task

UI/UX design for onboarding landing page presenting a website about big cities all over the world.

Process

The Big City Guide (BCG) is one of the first works made in terms of Tubik UI Fridays which is the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls.

During one of these creative sessions, the task was given to design the landing page for the online resource providing information about big cities around the world. Typically for the design of landing pages, the designer decided to apply the expressive and informative potential of the background images. The objective set for the visual design was to convey the mood and the atmosphere via one photo for each city. The solution found for this aim was the animated widget with horizontal scrolling presenting three big cities in order to create an efficient visual perception of the information for the target readers. The three different capital cities were chosen to show how dissimilar styles can be united in one design.

The first page of the BCG concept presents Berlin. The city is filled with various sights so it was a difficult choice to make. The designer tested many pictures to find the one which would bring the right mood of the city. In the end, there were two variants.

Both pictures make an effective design but the second conveys the atmosphere of solid and futuristic Berlin better so the designer favored it. The name of the city becomes the center of the composition, bold and quickly readable in strong uppercase letters. The word sets the high perspective of the famous tower. The letters are arranged among the spires in the way which gives the feeling they always were there.

The second featured city is Madrid. It is often thought that the Spanish capital city fully consists of medieval buildings but that’s not exactly true. Today Madrid is one of the modern European business centers, so the designer decided to present the modern side of the city. Here is one of the examples made while searching for the best fitting picture.

Yet the priority has been given to the bridge in a contemporary style. Keeping the consistent scheme with the previous page, the center of the composition remains the name of the city. The word shows a deep perspective with the modern construction echoing the form of the swirl or vortex. The subheading presents the motivating line that gives the mood of the energetic and bright city. Here is the final result.

Every new day brings new knowledge. Searching for the perfect background photo the designer missed the fact that there is not only Madrid in Spain but also another one in Iowa, USA. The Internet played a joke with the designer mixing photos of two Madrids, so it’s impossible to distinguish them for those who haven’t visited all the corners of these places. Well, that’s good to take lessons from the errors, and this case gave us all the chance to learn something new.

The last city featured is Stockholm. It is full of magnificent ancient buildings and modern-styled places, so the designer experimented with various photos of the city places. Here is the example with the picture of the underground in Stockholm which presents the part of the creative search for the visual concept.

However, all the urban photos couldn’t convey the unique atmosphere of Stockholm. That’s why the designer comes from the other side. Stockholm is one of the biggest Scandinavian cities, so nothing can deliver the Nordic vibes better than its nature.

This is the final variant of the Stockholm page. The content elements on the page are placed similarly to the previous with the name of the city in the center. The word is harmonically inscribed into the thematic picture with deep and magnificent Nordic forest. The subheading presents the motivating line whose message naturally combines with the image and the associations set by the city.

The onboarding landing page applies simple structure recognizable for users. The left part of the header features a clickable logo BCG taking users to the home page. The header menu allows people to see the full list of cities, go to the blog or learn the maps. Also, the service provides the registration feature. The search icon completes the header.

The vital part of any city guide is the description copy. Since the pages are focused on the name of the city, short copy is placed at the left bottom part of the page. CTA button under the text provides users with an opportunity to read more if they are interested in detailed information. The users can also find social network links easily in the footer.

The final stage of work on the landing page was the animation of the presented layouts, accomplished by motion designer Kirill Erokhin.

The static variants of pages have different colors of the background, but in the final animated version, all pages are united with one color. Smooth animation adds the dynamic nature of traveling and supports the feeling of consistent interaction. Navigation through the pages can be accomplished in two ways: via the navigation button and with the help of a progress bar placed on the top of the page. They both use the same contrast color to keep the visual consistency and make all the ways of navigation clear.

As we can see, despite the fact that all cities differ by style and energy they bring, the designer managed to keep them in a single tone creating the feeling of the website unity. Moreover, such a construction of the landing page makes it flexible for further alterations, for example, adding more pages of the cities that are particularly popular with readers of the website.

Design Case Studies

If you are interested to see more practical case studies with creative flows for mobile and web design, here is the set of them.

Home Budget App. UI for Finance

Health Care App. UI for Doctors

Toonie Alarm. Mobile App UI Design

Slumber. Mobile UI Design for Healthy Sleeping

Tasty Burger. UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: Big City Guide. UI for Landing Page появились сначала на Design4Users.

Having the whole set of such professionals onboard, we finished the last year with an interesting and challenging project. In December Tubik team got the chance of creative collaboration with Opera to work on the bright and catchy year-in-review video. You could already have seen the video and design process presentation in Tubik Portfolio, and today we invite our readers to take a deeper look at this design story in a new case study.

Task

Design of a short animated video “Opera 2016: Year in Review” within a tight timeline.

Process

Introducing a customer, Opera is a web browser developed by Opera Software. According to Opera Software, it had more than 350 million users worldwide in the 4th quarter 2014. Total Opera mobile users reached 291 million in June 2015. According to SlashGeek, Opera has originated features later adopted by other web browsers, including Speed Dial, pop-up blocking, browser sessions, private browsing, and tabbed browsing.

The initial stage of project discussion with the customer showed that they needed an animated video accomplished in an attractive manner immediately setting a positive and cheerful mood. The video had to present the essential milestones of the year when Opera, one of the actively used web browsers around the world, presented fresh innovative features to its numerous users. Opera team enjoyed bright colors and lifestyle object compositions and the approach they wished to use for the video was to devote each composition to a specific month when a particular feature was delivered. It was agreed that the visual performance should feature the 3D flat style, minimalistic animations, and lush colors – everything that the Tubik team is strong at.

Meanwhile, the early stage of discussions on the creative process also established the biggest challenge of the project: the timeline was extremely short. The team of designers had only 5 days for design and animation of 8 complex flat illustrations full of details, transforming the company message, looking bright and fresh, and keeping visual consistency to look natural in one video. This was the type of project that proved the great power of teamwork when all the participants of the creative process worked like a clock.

Illustrations

The first creative stage of the project had to result in a set of flat illustrations presenting the prominent innovations of the year: Ad Blocker, Battery Saver, Video Pop-Out, Personal News, VPN, Faster Startup, Currency Converter. All the illustrations had to present the interiors decorated with bright details close and clear for every user, and also set the atmosphere of the particular season and the visual element showing the presented browser feature. In this way, combined in the video and replacing each other, the illustrations would support the feeling of the year flowing. Here is the final set presented to motion designers who had to do further work on breathing life into the pictures.

This is the intro illustration opening the video, setting a cheerful mood, and giving a strong link with the brand.

This illustration presents the feature of native Ad-Blocker, which Opera presented in spring, so the color palette corresponds to the shades traditionally associated with this time of the year.

The next illustration presents the feature of Battery Saver, which got active in late spring: the season is supported with a general bright and sunny color palette, flowers in the vase, and green trees outside the window.

Another illustration was designed to present the feature of Video Pop-Out, enabling users to watch videos while browsing. The big window shows the green plants and blue sky and the diagonal light shadows let us guess the shiny sun, the table sets the scene with a couple of books and a glass of lemonade, and even the video on the screen shows the seashore and people having fun – everything allows viewers to understand easily that this user-friendly innovation was added in summer.

The next artwork is associated with the feature of a personal newsreader. A bit darker sky, a bit longer shadows, some clouds, the cup of tea and red-ripe apples on the tree say: when users got the ability to read the news right from their browser, the summer had almost finished.

The feature of built-in VPN enhancing the privacy of browsing was set up in autumn, which us immediately clear from the view with yellow trees outside, while the passport seen on the table sets the strong connection with the matter of privacy.

Next illustration featured the faster speed of start-up loading, so the key visual element of the composition is the speedometer shown on the computer screen. It immediately sets association with the issue of speed while the color palette chosen for this artwork enables users to feel the vibes of deep autumn.

The last innovation to present was the built-in currency converter enabling users to shop online faster and easier. Some details in the picture, like the calculator, the decorative recognizable model of a shop placed on the shelf, the delivery truck behind the window as well as the layout on the screen set the atmosphere of shopping, while the outside view and the gifts let us know it’s the busy time of buying Christmas presents.

Having a full set of illustrations approved by the client, motion designers came into play and presented the variants of transitions, while graphic designers worked on the fonts for the short descriptions to be used in the video. The fonts had to look highly readable and correspond to the general stylistic concept.

The sample of animated transitions between the slides livened up with the natural movements of the details close to motion in real life.

The sample of the fonts used on the slide in combination with the illustration

Final video

Five days of hard and coordinated work of the design team resulted in the final video of about 40 seconds showing the full set of key innovations Opera presented in 2016.

In one of the previous articles, devoted to designing processes and work styles, we mentioned: the studio experience lets us believe that teamwork organized wisely and thoughtfully doesn’t take away designers’ individual space or freedom — vice versa, it adds to it the power of solid support and prospective ways for bigger and more complex, therefore more interesting and challenging projects and tasks. The project for Opera became one of the convincing proofs.

In their testimonial to the Tubik team, Opera Software team mentioned: “The loose storyboard and tight timeline we presented you with were undoubtedly a challenge but everyone is very happy with how well your team delivered on it!” No doubt, this project became not only a great and absorbing challenge but also a case of fruitful collaboration and bright finale for the extremely busy design year.

Design Case Studies

Design Case Study: Brand Intro Cartoon for Wedding Dresses Brand

OffCents. Explainer Video Production

Binned. Design for Promo Video Production

Step by Step Guide to Custom Promo Video Design

5 Reasons to Make Animated Video for Your Product

Design for Web: Promotional Videos. Benefits and Pitfalls

Originally written for Tubik Blog

Сообщение Design Case Study: Opera. Animation for Product Video появились сначала на Design4Users.

Task

Design of a logo for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

Tools

Pencil sketching, Adobe Illustrator, Adobe After Effects

Process

As we mentioned in a case study on UI and UX design, SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language. It is aiming at developers as its basic target audience. The product supports all the devices belonging to the Apple device family.

The design practice of previous projects accomplished by studio designers, such as Saily App or Passfold, proved that tight interconnection of design solutions on branding and user interface for the same product features a higher level of efficiency. Both mentioned cases showed that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is also important to remember that the user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concepts. Following this approach for the SwiftyBeaver project, user interface designer Ludmila Shevchenko and logo designer Arthur Avakyan worked in tight collaboration to get the design solutions that will effectively support each other.

Naturally, the initial stage of the general concept search tried the variants of mascot. As the name of the product includes “Beaver”, in the first sketching set the designer presented variants of this animal as a key mascot. There was also a variant of the original presentation of “S” and “B” as two basic letters of the product name. In addition, this first set included a bit more abstract version based on the set of lines featuring the movement of a beaver’s tail.

The variant based on lines was accepted as the basic concept practically at once. Although the mascots can be a powerful tool of branding, this time the strategy was different. The target audience, as well as the nature of the product, is quite specific so a more abstract version of the logo could show more flexibility in its expressive potential. Founder and CEO of SwiftyBeaver Sebastian Kreutzberger was very attentive to details and open to discussions. He decided upon the variant with stripes because it made a logo meaningful as logs the app is based on like the logs of trees are stripes so it presented a strong visual metaphor. Additionally, he liked the colored stripes of famous 70s and 80s logos so he wanted to have a logo that would look vintage and at the same time super modern. So, this direction was developed further.

Moreover, this version got closer to the general visual design of the user interface for the application. As it was described in the previous case study, UI design widely used color lines as markers for categories of log entries, and the chosen concept of logo provided a strong connection between UI design and branding. Therefore, the next stage of the design process of elaborate and thorough work on the slightest nuances. Different versions of curves and length of the lines were tried and discussed in search of the most harmonic variant.

The color palette also echoed the colors chosen for UI design and supported them with smooth gradients. So, the user interface of the platform, landing page, and logo were conjoint via colored elements.

The original version of the logo was colorful, but the monochromatic version was also accomplished and tested to provide branding solutions with a high level of flexibility.

Another issue to consider was the choice of font for company name lettering featured with a logo image. Several options that could work effectively with the logo and correspond with the nature and general design of the product were offered and discussed. The set of potential variants included diverse variants from strict and straight to smooth and curvy. Finally, the font was chosen to provide a good combination with the fonts of the app interface. The client chose that particular font because found it appropriately curved and perfectly matching the curves in the logo.

The approved variant of logo image and lettering was also supplied with the design of the animated version. It was accomplished with the help of Tubik Studio motion designer Kirill. The designer and the client took a considerable amount of time and discussion optimizing the physics of the ball to look and feel as natural as possible.

And one more important task to move on with was the design of an app icon. To prove its efficiency, designers tested it on different devices and in different sizes to ensure that it didn’t lose its recognizability or didn’t get dirty in a smaller size.

Logo design for SwiftyBeaver was one more case proving that there are no unimportant details in branding. It was one more project full of elaborate sketching, thorough work on the slightest hues and gradients, numerous variants with different length, width, and placement of the elements to make a catchy, harmonic and stylish logo that will represent the nature of its product.

Useful Case Studies

For those, who are interested to see more practical case studies with creative flows for a logo and identity design, here is the set of them.

LunnScape. Identity Design for a Landscape Company
Binned. Brand Identity Design for Cleaning Service
Reborn. Identity Design for a Restaurant
Andre. Logo and Identity Redesign for Landscape Firm
SwiftyBeaver. Logo for Mac Application
Saily. Logo for Local C2C E-commerce Application
Creative Stages of Logo Design

Originally written for Tubik Blog

Сообщение Case Study: SwiftyBeaver. Designing App Logo появились сначала на Design4Users.

Earlier we have already presented here the case study telling about the creation of a logo for the online editor Ribbet by Tubik Studio designer Arthur Avakyan. This article continues telling about the collaboration with the same customer. This time the assignment was concentrated on illustrations for the site created by the other designer Evgeniy Tomashevsky.

Evgeniy Tomashevsky working on sketches

Task

Designing thematic illustrations for the specific feature of online photo editor Ribbet.

Tools

Pencil sketching, Adobe Illustrator

Process

Undoubtfully, most — if not all — the illustrations on the web fulfill several functions instead of one. They should be not only decorative stuff but can also become important features of the user interface and in cohesion with other elements of the layout help to guide a user and make using the site faster, easier and more enjoyable.

The illustrations accomplished by Tubik Studio for Ribbet were no exception. To be more particular, the task for the designer was to create a pack of thematic illustrations that would reflect the ideas of popular annual events. The images were intended to work as fancy cards that could be used for instant creating invitations for birthdays, weddings, parties as well as nice postcards and other pretty stuff.

So, given to the task, the whole pack of illustrations needed to have the same format and style providing the feeling of consistency. Moreover, it was important to make it corresponding to the general design of the site. This requirement was eased due to previous studio work: Tubik Studio designers had worked with Ribbet on the new design of the site and new logo, which soon are going to be presented on the site itself and are already widely seen in Ribbet social networks accounts. So, starting work on illustrations, the designer had already got the general concept of the editor design. It influenced the general style of the images as well as the selection of appropriate colors and shades.

The general design of the website and logo for Ribbet 

In the process, it was also vital to remember that the images had to obtain a high level of adaptability and be recognizable, bright, and clear in all sizes possible to be seen at. Moreover, they had to be ready to save their beauty and style in the printed version as well. As you can see, the designer had to keep loads of things in his mind.

The first stage of the work required making choices about the general stylistic decision which would satisfy all the parts of the assignment. Although there are numerous stylistic trends for digital illustration nowadays, in this case, the search of the style was not really long and the decision was made to create all the pack of illustrations in flat design stylistics. It matched efficiently with the general stylistic concept of the site and was obviously defined as trendy and diverse.

After deciding on general style, the next stage witnessed the most creative and elaborate part of the process which was classic old-school pencil sketching. The designer worked hard and devoted a lot of soul and passion for creating catchy details, pleasant-looking backgrounds, and bright characters that would be easily recognizable, capturing, stylish, and fancy.

A tiny part of the sketching stage

When all the ideas were completed and agreed-upon, the sketches were converted into their digital body by means of Adobe Illustrator.

One more part of the task included sophisticated and thorough work with color. The reason was that it had to correspond not only with the general design of the site but it was also vital to reflect color associations which users typically have for specific holidays, events, and special occasions. This kind of multipurpose solution could make the user experience even more effective and pleasant. So, the designer accomplished this work with deep research of common color associations about holidays and only afterward selecting the colors that would fulfill both association and general consistency sides of the editor idea.

Having processed each image thoroughly, the designer presented bright and catchy images for the pack of thematic fancy cards, some of which you can see below:

Independence Day card

St. Patrick’s Day card

Thanksgiving Day card

Remembrance Day card

New Year card

Mother’s Day card

Father’s Day card

Valentine’s Day card

Wedding Day card

As can be seen, the images covered a wide range of religious, public, and family holidays.

The customer, fully satisfied with all the work presented, has already been using the images actively in their social network accounts as the promotional materials for new features of Ribbet service.

The set of cards from Ribbet Facebook page

This assignment was full of creativity and inspiration. It has become one more case proving how much sophisticated and rigorous work should be done to create a bright multipurpose digital illustration. It also showed that doing preliminary research can help to make the result even more efficient.

Originally written for Tubik Blog

Сообщение Case Study: Ribbet. Designing Illustration появились сначала на Design4Users.