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.

Fitness application design by tubik

Activity tracker by Sigma Software Design

Workout app design by Odama

Fitness app design by Musemind

Fitness and yoga application by Outcrowd

Fitness app concept by Anastasia Golovko

Workout application by Enver Studio

Workout planner app by ever

Fitness tracker application by One Week Wonders

Fitness tracker application by tubik

New design collections are coming soon; stay tuned!

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

• people illustration gallery
• a big of user-friendly mobile applications
• logo design collection for various business goals
• captivating 3D animation concepts
• creative web designs with 3D graphics
• web design examples on ecological issues
• inspiring mobile interactions design examples
• Procreate illustration tutorials

Сообщение UI Inspiration: App Design Concepts for Sports and Fitness появились сначала на 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.

Digital technologies have come for a rescue. Nowadays, the cinema industry provides its customers with handy assistants – cinema apps. They are convenient helpers enabling people to find information about movies along with schedules and the seats available. Moreover, cinema apps are a tool that makes the process of booking and purchasing tickets much more comfortable than ever before. Today’s article describes UI screens and features that are common for cinema applications.

Profile screen

Nowadays every app aims at making the user experience more personalized and individual the reason why a profile is an essential part of any kind of application. As for cinema apps, profiles are tools which help users book and buy tickets within a few taps. What’s more, if a cinema contributes a loyalty program it’s easier to follow customers’ activities because everything is marked in the profile.

A profile should contain only necessary info otherwise the screen may look too complex. When a user creates their profile, a cinema app usually asks for the user’s name, email, location, and preferences in cinematography. Since ticket purchase is one of the major features, it may be good to add an option of credit card data. This way users will be able to make a convenient and fast purchase. In addition, by gathering and analyzing data about users’ tastes and location, an app can inform people about interesting movie premieres near them.

Home screen

Home screen is a base for any type of digital products that’s why it’s also known as the main page. It is a start point where users begin a journey within a product. The content of home screens varies depending on the type of app.

The main screen of cinema applications usually includes movie posters followed by captions with the name to show users what is on today. Films can be presented as a list or a feed so that users could quickly scan them and make their choice. The posters should be clickable and lead to the next screen with the schedule and movie info.

Also, the UI of a home page needs to provide the search field. People who have already chosen a film will be able to type a name and quickly find what they want. It may be a good idea to add some filters such as film genres to make the search process more pleasant.

Movie details screen

A poster and name can’t give a proper explanation of a movie plot. That’s why a cinema app needs to provide the movie details so that users would know what they choose.

UI design for a movie details screen is simple. It consists of a high-resolution poster, the name of a film, and a short text description. Mobile typography should be chosen properly so that the text would be legible and pleasant to users’ eyes.

In addition, some cinema apps show the rating of a movie. It can be IMDb ratings or assessments given by the users who already watched a film. This way people can see how popular a movie is and decide if they want to watch it.

One more additional feature is bookmarking. Users can fill their personal wish list or a list of favorites and go back to the selected movies later.

Player screen

It is known that video content is perceived better than copy that’s why it’s always a good idea to include movie trailers to the movie info.

The video player allows users to watch various trailers right in the app. A player can be a part of a movie details screen as well as an app can have a separate screen with the list of movie trailers. This feature is not a key for cinema apps still there are many of them which have already included it.

Schedule screen

A schedule is a vital part of the information which users receive from cinema apps. Designers should pay deep attention to its presentation as it needs to be compact and easy to find.

The schedule usually relates to one certain movie and shows the time when different film showings start. The time is often presented as a button so that users could tap or click it to continue their journey on booking or buying tickets.

Choosing seats

When the movie and the time are chosen, people need to see where they can sit. There are two types of UI for the seats choice screen – the list and visual representation of a cinema hall.

A list includes two main options to choose – a row and a number of a seat. The list is a light variant that doesn’t take much time to be created and the UI looks nice on various devices even with the small screens.

Today UI with the visual representation of a cinema hall gains more and more popularity. This type allows users to see exactly where the seats are located and make a proper choice. However, designers have to concentrate on the details while creating the visual representation of a cinema hall for UI. Seats should be big enough so that users could easily tap the right one from the first try. Moreover, it’s vital to make sure a visual cinema hall looks good on different screens.

Purchase screen

The opportunity to buy tickets earlier and choose the best seats is one of the biggest profits which users receive from cinema apps. Designers’ big task is to make the process of purchase comfortable and secure.

The checkout screen usually includes a form where a buyer fills in specific personal data such as a name and a number of the credit card. As we said above, if users of a cinema app have their personal profiles, personal information can be taken from there automatically.

In addition, it’s vital to make sure people feel that their personal data is secure. Marks of security can be presented via visual including callouts in a copy as well as some icons of the famous brands that gave their approval or maybe even some certificate signs if there are such.

Tickets

Tickets are the documents which confirm the payment and allow entering a cinema hall. Some apps send the digital tickets to the email so that users could download them on a smartphone or print them to show at the entrance. However, some cinema applications reduce the number of actions. When a user buys a ticket, it is automatically saved in their personal account and all they need to do is to activate an app right before going into the cinema hall.

Tickets can be presented via custom illustrations which adds originality to an app. Also, if a client wants something more minimalistic, tickets can be represented with simple QR codes.

Map screen

Only small towns have a single movie theatre in the area. There are several cinemas from one company around cities so the map feature seems important here. If users set their location while creating a personal profile, an app can automatically choose the nearest cinema.

Watching films at home can’t be compared with feelings of watching it on the big screen. It means that the cinema industry is unlikely to lose its popularity anytime soon. Digital technology should help to improve cinema services so that more people would become loyal visitors. Cinema apps are effective tools for both the cinema industry and its clients. Designers need to learn how to make these tools user-friendly and maybe even improve them with their creative solutions. Stay tuned!

Recommended reading

Mobile UI Design: 15 Basic Types of Screens

Mobile App Design: Big Guide into Types of Mobile Applications

UI for Movies. Collection of Cinema App Designs

Design for Sport: Creating User Interfaces for Fitness Apps

Music in the Hearts. UI Designs for Music Apps

Originally written for Tubik Blog

Сообщение Mobile App Design: Elements of UI for Cinema Applications появились сначала на 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.

You could have already read our previous case studies, including the one about UI/UX design. Continuing the set, today Tubik Studio presents the story about creating a user interface for the application aimed to track postal items. It was created by Daria, the designer for Tubik Studio. You could already have seen some parts of the work on the tracking app in Daria’s Dribbble shots, and it is high time now we told you more about the project.

Daria, the UI/UX designer for Tubik Studio

Task:

Design of the interface of a mobile tracking application for iOS and its adaptation to iPad.

Tools:

Pencil sketching, Adobe Photoshop, Adobe After Effects.

Process:

It is a well-known fact that the more practical and applicable is the site or app, the more clear and easy-to-use it should be. There are some types of applications that are totally specific and their target audience is very narrow, but that was not the case. The tracking app was aimed to be used by the wide target audience with different demographic characteristics, level of education, and abilities in technology. Therefore, this factor had to be considered to create an efficient and bright design of the interface that would have high aesthetic representation but at the same time would not confuse any user.

The assignment didn’t mean creating something out of thin air: the designer was given the concept of the existing design to be based on further changes. The version, existing at the moment, already had rather effective user experience which needed only minimal changes and was practically tested by users. However, the customer wanted a new user interface design which would be even more user-friendly, harmonic, intuitive, and up-to-date. So, the designer needed to consider all those factors from the very start of the design process.

The first stage of the process: creating the wireframes and the general concept of UI

Processing the screens

The first conception and stylistic decision for the application presented the version created in a dark color scheme. The designer developed and designed 12 screens of different functionality:

• Menu screen
• Home screen
• Screen of processed items
• Screen of items in transit
• Transit list screen
• Timeline screen
• Details screen
• Order details screen
• Search screen
• Search list screen
• Calendar screen
• Dashboard screen

The set of screens for the application

One of the main tasks was to follow the ideas of consistency through color scheme, layout details, and shape selection. Also, for the new user interface, the designer created original icons that corresponded with the general style and were intended to accomplish informative and navigational functions. You can see some of the screens below.

Processing, tracking and transit screens

Order, order details and calendar screens

The previous version of the design had a graphic feature which the customer asked to preserve and transfer somehow into the new user interface. The visual expression had had three circles intended to show the percentage of processed items, items being in transit, and delivered items. That feature was saved in the new design although the designer updated them and created a new scheme of their placement on the screens so that they could get more visuality and work even more efficiently. All the ideas and updates were regularly agreed upon with the customer. In this way, there was created the image of a track curve with the circles on it.

Home screen. The circles representing processed, transit, and delivered items.

All three circles had the base of the same shape and size made in a light color and the brightly colored zone inside showed the percentage in this parameter. Moreover, there was used one more interesting interface detail: you can see that on this curve the circle representing items in the process is positioned not in the middle but closer to the end of the track. Such placement gives the feeling of positive experience to a user because it makes the items looking like close to their destinations.

The set of screens featured with the frame of a device

It should be also mentioned that the circles were also featured in the original icon created by the designer for Track and Trace position on the menu. The combination of the main visual element with its expression in the icon was a good way to provide a user with the feeling of consistency and fast visual perception of essential details.

Menu screen and Home screen. The curve with the circles on the Home screen is reflected with the icon in the Menu.

To make the interface of the application functionally interactive and strengthen its usability, the designer animated some elements of the screens. The animation had purely functional goals dealing with the details of navigation to guide a user and make the experience fast, highly informative, and enjoyable.

Animated screens for the application

Redesign

When the design of all the screens was completed, the customer was really satisfied with the general style, details, shapes, decisions for icons and buttons, animated elements as well as the general layout of the screens. However, at this stage, the customer reconsidered such a basic thing of the design concept as the color scheme. The reason was not hidden in any personal preferences, as both the customer and the designer liked the color palette used for the screens. Nevertheless, the customer felt that the idea of consistency should go further and therefore the application should closely correspond with the website of the company. The color characteristic was chosen to be the main element of such corporative consistency. It was impossible for the customer to fully redesign the site according to new decisions used in applications, that is why, like it or hate it, it had to be made vice versa: the application had to be partly redesigned to correspond with the site.

The site used light coloring that is why the customer asked to change the color of the screens for the application and make them as similar in colors as possible but preserving all the other features, details, and solutions of the interface appearance.

Although the designer liked the dark color solution more, she redesigned all the screens in different color schemes, supporting the customer’s wishes and business aims.

The version redesigned with the light color scheme

Having changed the color scheme, the designer obtained positive feedback from the customer and started the last stage of the work — the adaptation of iOS app design to iPad. All the screens had to be adaptive in two orientations saving main solutions of the interface. Processing sub-menus for adaptation was, probably, the most interesting part of this work. As the screens contained a lot of interactive elements, it took a considerable amount of time and effort to adapt them all to the iPad version with no significant changes so that all the versions of the application were easily recognizable by the user.

The version of landscape orientation for iPad

iPad and iOS versions of the application

The projects of this kind provide designers with a great practice of searching efficient solutions so that the application obtained a high level of utility and usability for all the categories of users.

Daria working on wireframes for the project

More Design Case Studies

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

Watering Tracker. Mobile UI Design for Home Needs

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce

Health Care App. UI for Doctors

Slumber. Mobile UI Design for Healthy Sleeping

Kubrick Life. Educational Biography Website

Designer AI. Dashboard and Graphics for Fashion Service

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Originally written for Tubik Blog

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