ui design case study &#8212; Design4Users

Perfect Recipes App. UX Design for Cooking and Shopping

CashMetrics. UX Design for Finance Management Service

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.

Web Design Case Study: Website for Lumen Museum

Marina Yalanska — Fri, 18 Dec 2020 11:11:03 +0000

Man’s fascination with mountains has been unbroken since time immemorial. Today’s case study tells you the creative story about Lumen Museum, the charming place that gives this fascination a photographic home with breathtaking views and interesting insights. Welcome to see how the Tubik team designed their website to set a strong connection with the museum atmosphere on the Web as well.

Project

Modern website design for the museum of mountain photography.

Client and Idea

Lumen Museum is located at the summit of the region Kronplatz (in South Tyrol). It covers 1,800 square meters dedicated to mountain photography: the 4 floors impress the visitors with insights into the history of mountain photography from its beginnings and the art of mountain photographers from different corners of the world. The museum harmonically combines history and innovations, interactivity, and exploration, covering the subject of mountain photography from diverse perspectives.

That what the museum team wanted to see on their website as well. It was important to make it modern and trendy but at the same time to preserve a strong and consistent connection of the physical museum with its online site.

The creative team from Tubik Studio assigned for the project included Vladyslav Taran, Denis Koloskov, Andrew Drobovich, Kirill Erokhin, Alexander Petulko, Dmitry Shevchishen, and Polina Taran.

Website Design

Here we welcome you to take a glance at the website we designed and developed for the Lumen Museum. Variety of elegant pages, smooth animation, engaging scroll, video integration, and other design solutions to present the amazing museum content online.

All the major pages of the website are based on a minimalist layout, impressive visuals, a light background, and mastered negative space: that makes them full of air and freshness and let the visitors feel it from the first seconds. Also, such an approach ensures that all the diverse visual content, from archive black and white photos to modern shots and videos, will look good on the pages.

The home page features the hero section based on the beautiful view of the museum building with an animated flow of clouds that makes it even more lively and atmospheric.

https://blog.tubikstudio.com/wp-content/uploads/2020/05/lumen-museum-webdesign-tubik.mp4

The typography solution didn’t feature decorative fonts; instead, the designers used the highly-readable and solid sans-serif font that becomes the foundation of solid typographic hierarchy. The website header features the link buttons for the core navigation areas as well as contacts and information about the museum address and schedule. The header is sticky so the user can reach the core pages from any point of interaction or page scrolling. The pages demonstrate the well-balanced mixture of static photo content, animated photos, and videos integrated into the layout.

https://blog.tubikstudio.com/wp-content/uploads/2020/05/lumen_museum_website_design_tubik.mp4

The transitions between the pages are supported with an animated counter featuring the height of the museum location and this way it adds some entertaining elements into the process of switching to another page. Negative space works as a visual divider for the text blocks making the content look more digestible, well-organized, and readable.

The museum offers two types of exhibitions: Permanent Exhibitions, which are always available and have their unique performance, and Temporary Exhibitions that are operating for a limited period. While the pages for temporary exhibitions employ the same page template, the pages for permanent exhibitions all have unique designs that reflect the most interesting points and interactivity of actual museum halls. For example, the exhibition page below features the organization and vertical animation of the photo collection that echoes the visual presentation of this interactive set in the exhibition hall of the Lumen Museum.

https://blog.tubikstudio.com/wp-content/uploads/2020/05/lumen-webpage-interactions-tubik-1.mp4

The consistent integration of video content allows visitors to dive deep into the atmosphere of the museum and feel its refreshing nature. The section of testimonials supports social approval while the simple and scannable footer offers links to different website pages. The webpages implement both vertical and horizontal scroll to allow for more diverse and informative interactions without unnecessary clicks and transitions.

https://blog.tubikstudio.com/wp-content/uploads/2020/05/Lumen-Website-Exhibitions-Page-tubik.mp4

The history page implements the horizontal scroll to build up a solid timeline of photos and concise text blocks guiding the visitors through the different stages of the location, the museum foundation, and development.

The airy calendar page invites the visitor to check the upcoming events and exhibitions: each item is presented with a date, type of the event, its name, the secondary text block for additional description or information, and a photo setting the quick visual association. A simple checkbox filter allows for tuning the list while the visual dividers help to clearly scan the structure and distinguish the items. This way the solid visual hierarchy is built to make the webpage scannable, readable, and eye-pleasing.

Here’s an example of a webpage whose wow-effect is based on the animated image of a photo camera.

https://blog.tubikstudio.com/wp-content/uploads/2020/05/lumen_website_animation_tubik.mp4

To fulfill the navigation needs, an original set of minimalist outline icons was designed for the website.

To make the website beautiful and consistent regardless of the device it is visited from, we also thoughtfully adapted it to the tablet and mobile versions.

https://blog.tubikstudio.com/wp-content/uploads/2020/05/Lumen-website-mobile-version-tubik.mp4

This project for Lumen Museum was an amazing experience for our team and the story of the great collaboration with the museum team: altogether, we achieved the goal to create the museum a beautiful online home and connect it with its audience faster and easier.

Check the live website of Lumen Museum to see more details of design and development.

More Design Case Studies

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

GNO Blankets. Branding and Web Design for Ecommerce

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

Inspora. Brand and UI Design for Virtual Stylist

Nature Encyclopedia. UI Design for Education

Perfect Recipes App. UX Design for Cooking and Shopping

Watering Tracker. Mobile UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Web Design Case Study: Website for Lumen Museum появились сначала на Design4Users.

UI Design Case Study: Mobile App for Ordering Burgers

Marina Yalanska — Mon, 17 Aug 2020 12:11:48 +0000

George Bernard Shaw once said: “There is no sincerer love than the love of food”. Perhaps, that’s one of the reasons why food and cooking is the endless source of inspiration for UX designers. Today’s case study from the Tubik team presents the creative flow of interaction design for Tasty Burger, a mobile food ordering app.

Project

Food ordering app UI and interaction design

Process

To design a food ordering app, it’s vital to think over the variety of steps and clear navigation that will enable users to quickly make and get the order under diverse circumstances. Tubik UI designer Anton Morozov working on the project under art-direction by Ernest Asanov and Vladyslav Taran set the goal to make the UI for the Tasty Burger App both intuitive and juicy. Its extended functionality allows users to order a traditional burger from the menu or customize any option for themselves adding or removing the ingredients.

Below you can check the screens showing the user journey. They feature all the flow of choice and customization of a burger as well as the screens for delivery or picking up an order.

Burger Card: Variety of Choices

Choose the Burger

The menu shows actual positions and special offers that the restaurant or service has at the moment. Users may see item photos and basic data on ingredients and weight. Color accents highlight price and calls-to-action for quick scanning. What’s more, the system of filters at the top of the screen enables a user to customize the search and find a needed position faster.

Having chosen a specific position and moving to the product screen, users see the big product photo, core information about pricing and weight and the CTA button enabling to add the position to the cart. It makes the visual presentation emotional and catchy, immediately sets the association with the burger. Also, the screen looks clean – it isn’t overloaded with details about ingredients which isn’t interesting for users who buy this position regularly or don’t care about the details and want to make an order asap.

Customize the Burger

Those who do care about the ingredients or want to customize their burger, use the tab “Ingredients” in the bottom part of the screen. Just pulling it up, they open the tab and check the contents of the burger, organized by categories such as Vegetables, Meat, Sauce, Topping, etc. To make the visual performance of the list effective and appealing, the interface features photos of all ingredients. At any stage of interaction with this screen, users may save the item to favorites just tapping the heart icon in the top right corner. The cart icon features one more important UX affordance: a yellow dot on it gives a quick prompt that it isn’t empty.

As for the color palette in the app, the designer played with the contrast of backgrounds: interactions zones aimed at reading copy, observing and manipulating positions in the lists are presented on the light background to provide a high level of readability. Still, photo content and tab bar apply a dark background that supports the visual performance, makes the graphics look stylish and elegant. Also, the designer paid deep attention to building balanced and scannable visual hierarchy to make interactions quick and screen scanning easy. Hungry people are definitely not the audience which will want to devote much time and effort to learn how the app works – everything has to be clear in short seconds.

The flow of interactions on customizing the order looks like the following animation.

Create a Burger

A typical food ordering app for restaurants and cafes usually features the meals of the fixed formulation. Tasty Burger app pushes the limits: it suggests users not only customize the existing offers by adding or removing ingredients but also create their own burger from the ingredients in stock. Adding ingredients, users can see how the price is changing relatively.

Here’s the animated flow of interactions on creating a burger in the app.

Order and delivery

Having decided on the order, a user is offered two ways to get is: delivered at the particular address or picked it up from the restaurant. Also, a variety of payment methods is presented.

If a user chooses to pick the order, the map helps to choose the best location and shows the route. The color contrast makes the screen clear while carefully selected fonts provide a high level of readability.

Here’s the interaction flow for the food app design regarding the order and delivery solutions.

Slight and unobtrusive animation applied to transitions and microinteractions made the food ordering app design lively and delicious.

Landing Page

Landing page for the presented app is based on the attractive and catchy animation: fresh tasty burger creates a mouthwatering effect to immediately set the theme and emotional appeal.

Tasty Burger app design process was an exciting creative challenge for the Tubik design team: it was a cool attempt to broaden the horizons of food delivery applications with extended functionality, strong usability, and finger-licking appearance.

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.

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce

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

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

Design Case Study: Home Budget. UI for Finance

Marina Yalanska — Fri, 19 Jan 2018 15:13:33 +0000

Benjamin Franklin once said: “Beware of little expenses; a small leak will sink a great ship.” Management of finance and accounts has been an actual issue for a long time; still, for the recent decades, it has got a new perspective with the advent of modern technologies and the internet which is becoming more and more accessible. It presents a new challenge for designers and developers in terms of digital products which will help people to track and manage their money flows both professionally or just for themselves.

This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Pixy worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.

Task

UI/UX design for the web and mobile versions of a personal budget manager

Process

Describing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily.

For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have a high level of legibility for both letters and numbers.

Dashboard

The web dashboard was aimed at presenting extended stats for a particular period. The choice of generally dark interface enabled the designer to create an attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.

With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features an overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in.

The cards present such information blocks of data:

the menu with quick access to popular categories of expenses
information on total expenses and frequency of transactions
the list of popular transactions
the cloud of expenses and the weekly average rate in comparison to the previous period
the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis
the map with the pins marking the most frequent locations of spending money
the block of recommendations based on financial operations of the period.

Another visual detail that could be mentioned is that for the graphs and markers presenting actual financial changes, the designer applied green and red colors which are widely recognized as signs of positive and negative financial balance. Also, the list of popular categories supports the presentation of each particular category with both name and icon to enhance the navigation and make interactions intuitive.

Here’s a piece of animated interactions with the dashboard. Slight unobtrusive motion of the layout elements supports natural microinteractions. When the graphs expand, the other blocks shrink naturally leaving the names of theme blocks visible and readable so that users could continue transitions easily.

Mobile UI

The other direction of the creative process was focused on the UI for a mobile app. While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.

Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.

To get access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders.

Also, the user can interact with each particular position in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.

The mobile interface was also supported by animations. The one above shows the interaction with the hamburger menu divided into three sections.

Another piece of the animation shows interaction with the feed of financial operations for the current day. The warning notification adds more dynamic experience, attracting user’s attention with pulsing movement, and can be removed with a left swipe.

This project has started the deeper immersion into the world of digital products for financial management for the Tubik team and that was definitely the inspiring experience to be continued in further creative sessions. Follow the updates for new concepts and welcome to check the previous cases from Tubik UI Friday: landing page for Big City Guide and mobile interface for Night in Berlin app.

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.

Nature Encyclopedia App. UI Design for Education

Florence App. Illustrations for Healthcare Service

Inspora. Brand and UI Design for Virtual Stylist

Real Racing. UX and UI Design for Mobile Game

Nature Encyclopedia App. UI Design for Education

Originally written for Tubik Blog

Сообщение Design Case Study: Home Budget. UI for Finance появились сначала на Design4Users.

Design Case Study: HealthCare App. UI for Doctors

Marina Yalanska — Mon, 11 Sep 2017 14:35:35 +0000

One of the life aspects whose importance is never faded or lost in any country is the issue of health care. This is the factor having, perhaps, the biggest impact on not only the personal and professional life of an individual, but also general productivity and welfare of the whole country. With the rapid growth of technology, it would be irrational not to apply the great potential of modern innovation in the sphere of health care and medical services. Recent years have shown increasing interest of professionals and stakeholders in setting creative experiments and searching for new innovative solutions helping doctors to take advantage of technology in saving lives, enhancing and speeding up health care. As a result of this massive concern, the bunch of apps and websites useful for doctors and patients have already come into play, and the field is still actively progressing. The role of design is literally vital here, in many cases providing real support in the matters of life and death.

Our today’s case study is devoted to this vitally actual theme and presents the design concept of the web application for doctors called HealthCare App. Having explored the specific nature of this type of digital product, Tubik designer Eugene Cameel thought over the solutions concentrated on fast and intuitive interaction for making communication between a doctor and a patient easy and fast while saving and looking for the data optimized and organized. Let’s look at the details of the concept closer.

Task

UI/UX design of a web application for doctors

Process

UX Wireframing

As we mentioned in our recent article about UX wireframing, this initial part of the creative process lays the foundation of future functionality before the aspects of visual performance and style are approached. Work over wireframes is based on the definition and analysis of the target audience and its potential pains which the future product is going to solve. The target audience of the HealthCare App was primarily doctors and the key objective of the product was set as optimization of the huge amount of data that doctors deal with on a regular basis. Every single piece of information about every patient is vital for making the right decision, so creating the interface, the designer was focused on making it organized, clear, and easy-to-use. Intuitive navigation was set as the biggest priority to make the app applicable even for people with a low or medium level of tech literacy.

Basically, the app provides doctors with the functionality of saving and organizing data about patients with the ability to find it quickly in the database when it’s needed. Also, doctors can plan and save appointments in the calendar as well as the history of medical examinations for patients under supervision. The application also saves the history of diagnoses, prescribed medicines, personal data and complex medication plans with marking the stages. Another useful feature is that the users of the app get access to the stats and explorations on different issues at a different level of coverage, from local to general statistics and recommendations by WHO.

Let’s check UX solutions for three basic screens presenting appointments, calendars, and statistics.

The app features the sidebar with five tabs located on the left side of the screen and the header featuring the title of the information field (calendar, appointments, etc.), the current date and a search field, well-seen and easily accessible in case any data should be found quickly. The main field of the Calendar screen presented below organizes data about all the appointments in three modes along the period of time reviewed – month, week, and day switched via the top menu. This part also gives particular dates shown on the screen. All the data is organized in special cards while the timeline located on the left lets to catch the timing. The user can review all the planned appointments or things to do, getting more extensive data after tapping the necessary tab or add new appointments to the free spaces in the schedule. In the preview, notes show the full name of the patient, time of the planned appointment and mark of the visit nature (urgent, follow-up therapy, etc.)

The screen of a particular appointment shows the dynamic head menu which can be scrolled horizontally and presents the list of patients. Lower, we can see the tab presenting detailed information about the current patient, who is being examined, including name, gender, doctor’s name, ID number, address, and contacts. The biggest interactive field on the page shows three basic categories to organize data: medical background, lab results, insurance, and charges.

The third screen shows various stats that can be useful for the doctor in the exploration of a particular case or diagnosis. The tab below the header allows a user to switch between the categories of stats coverage and set a particular month or year for the required data.

UI design

The essential issues to consider about UI design, going deeper into a convenient and functional visual presentation of the data in the app, were color palette and typography. As you can see, the designer made his choice in contrast color palette with a deep blue general background including the sidebar and header part, that worked well for creating deep contrast with bright orange active icons and basic data in header written in white. Contrarily, the main operative field of the app uses a white background which looks natural for the app in the health care sphere and serves several important goals:

– it supports the high level of readability and quick perception of text-based content, which is crucial for healthcare operation with patient’s data, especially in cases of emergency;

– it provides the great field of creating prominent contrast for key interaction elements, such as buttons or icons;

– it creates the strong association with paper on which the data is fixed and in this way sets the pleasant feel of interaction close to typical operations with physical paper documentation, which can be beneficial for people of the older generation, who usually tend to feel better in the well-known environment;

– it adds the space and air to the screen which is helpful to avoid the feeling of the screen overloaded with information and can hinder a quick perception of core data fields.

The screen of the current appointment shows for main areas of data: diagnoses, problems, medications, and complex medication plans.

The calendar screen uses light pastel colors for cards which again set the association to the traditional interaction with physical objects when doctors and receptionists use colorful notes to mark the data and organize it on the notice-board.

Statistics screen shows graphs and charts in a minimalistic manner with the appliance of contrast colors easily distinguished by the human eye. For all the screens, the designer uses a simple san serif font, highly legible and readable. Concentration on functionality doesn’t prevent the designer from giving the app a simple and elegant appearance with the touch of style and creativity.

Animated transitions were also added to present some basic interactions with the app: inputting data, operating with pricing, and completing the reception.

This case has actively opened the direction of design for the medical industry and healthcare here in Tubik and proved how many special features and aspects of the job should be taken into account by the designer. The tasks of this kind are definitely challenging, but highly rewarding in both creative and human values. Stay tuned and healthy!

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.

Florence App. Illustrations for Healthcare Service

Inspora. Brand and UI Design for Virtual Stylist

Real Racing. UX and UI Design for Mobile Game

Home Budget App. UI for Finance

Originally written for Tubik Blog

Сообщение Design Case Study: HealthCare App. UI for Doctors появились сначала на Design4Users.

Design Case Study: E-Commerce. UI for Bakery Website

Marina Yalanska — Wed, 31 May 2017 13:35:19 +0000

Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy, who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet.

In one of the chapters of our e-book “Design for Business”, the success of e-commerce activity depends on several factors among which:

the quality of the product or service offered
the quality of the content presenting the offer to customers
the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

So, it’s easy to see that UI/UX design for digital products of this kind plays a vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow, and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target users.

Today’s case study is all about this theme: it presents the UI concept for Vinny’s Bakery website.

Task

UI/UX design of a website for a small elite bakery selling fresh hand-made bread.

Process

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

operational simplicity
strong branding
security of users’ data
effective use of visual elements
clear data presentation via menus, catalogs, etc.
user’s ability to leave feedback about goods and services
easily available general and contact information about the business providing goods or services
design that supports the offer not overshadowing it.

Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential target audience of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive, and informative.

The website promotes a small bakery selling homemade bread. The home page presents the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background, and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket.

Harmony is the style provided by the web page: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that’s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. The call-to-action button, via which the user can add the item to the cart, is designed with a different color compared to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It’s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn’t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it’s easy to do by just clicking or tapping on it in the list.

Clicking on a particular item, users get access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting.

Here you can see the full set of the transitions: you can see that header and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported with smooth and unobtrusive animation making the interface even more stylish via the imitation of interaction with physical objects in the real world.

Another aspect to mention generally about this web design concept is typography which set one more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings, presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker’s table – the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing a significant role in building up the positive user experience and attracting buyers to use the service again and again.

No doubt, new day will bring fresh challenges which will result in practical case studies. Stay tuned, have a tasty day, and don’t miss the new posts!

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.

Toonie Alarm. Mobile App UI Design

Watering Tracker. Mobile UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: E-Commerce. UI for Bakery Website появились сначала на Design4Users.

Design Case Study: Mobile UI for Tracking Application

Marina Yalanska — Thu, 02 Jun 2016 17:39:57 +0000

A user interface of a mobile application or a website is the area of design that combines a lot of various spheres of activity, including art, color theory, logic, and analysis. It makes a designer a kind of magician who has to combine the elements of layout in such a way and manner that would make using the app or the website easy, clear, fast, and pleasant. So, no doubt, this job is full of responsibility and demands a lot of knowledge, inspiration, and research from a UI designer.

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.

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce

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.

Design Case Study: Echo. User Interface for Music App

Marina Yalanska — Sun, 15 May 2016 13:31:08 +0000

Case study is a great way to share the experience and outline the issues essential to consider while working on projects of different kinds and aims. Today’s post is starting the set of case studies about various projects and concepts Tubik Studio has worked on.

This time we are going to look closer at the Echo project. You could have seen some stages and elements of this work in Dribbble shots by Sergey Valiukh, the head of the Tubik team. Now it is high time we looked through the project in greater detail.

Tools

Pencil sketching, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Sketch 3.0, Pixate.

Task

The task at hand was very clear and at the same time quite broad: to create the social network enabling users to deal with music on their mobiles and other devices. According to this purpose, there were distinguished the following basic functions:

To download and synchronize media-files from other online platforms and social networks such as YouTube, SoundCloud, Spotify, etc.
To upload the files from the desktop library of media files
To generate playlists in a fast and easy way
To organize the stream in the image and manner of a radio station.

The author also considered the additional functions, one of which was to enable the simultaneous general streaming from several different devices, for example, when people gather at the party or anywhere they want to listen to music together.

Working on the task, the designer had to take into account two important pre-conditions:
– High level of competition as there are a lot of already promoted and popular music services on the web and app sphere
– The maximum possible level of adaptability and responsiveness of all the versions of the application that was expected to be used on all possible kinds of gadgets. It was vital to provide 100% adaptability of all the features in order to maintain a high usability level.

Process

User Experience (UX)

Music is an integral part of human life, but at the same time, that is not the sphere where people would like to make any additional efforts. For most listeners in most cases music is where a person relaxes or, vice versa gets energy — not the place for hard work demanding elaborate skills. The wider is the target audience of the music service, the simpler and clearer it should be. Everything the user needs here is clear navigation and fast work. However, considering the number of competitors in this market, it’s necessary to think also about something original in design so that the service can stand out from the crowd.

Taking all these issues into account, the designer started the work on the site from the research of existing products and creating the concept of user experience. The decision was made to begin with designing the mobile version which was supposed to be more widely used and simpler for the target users. The next stage of design was going to provide the implementation of the mobile version into the web.

Working out the screens

On the basis of the review and analysis of existing social networks, the following screens were planned:
– Launcher screens (educational steps animation)
– Sign-in screen (including login, registration, password recovery)
– User main screen (feed, profile, stream creation, audio files addition, search, slide menu)
– Screen of settings and editing profile

Let’s look into details of all the screens mentioned.

Launcher screens (educational steps animation)/ Sign-in screen (including login, registration, password recovery)

Launch of the application started with the slides which were animating while scrolling and the user got the basic description of the service. After the last slide the sign-up/sign-in screen appeared with the basic set of standard operations (e-mail — password — password recovery). The service was integrated into all widely used social networks so it provided direct logging in with the profiles on Facebook, Twitter, Google+, and so on. After registration, the application made it possible to link up all the user’s accounts in social networks to share the streams and see the friends’ streams. Therefore, after the user signs up, he/she is offered to follow the friends from other accounts or find new friends according to musical tastes.

User main screen (feed, profile, stream creation, audio files addition, search, slide menu)

The profile was designed to work in 3 different modes:
– DJ Mode (Party Mode) — allows users to download audio files, create playlists as well as send invitations to listen to the playlists for the limited number of people.
– Home Mode — allows users to play the songs from the playlist remotely on different devices within the radius of a room
– Listener Mode — allows users to download and listen to both own and friends’ playlists.

Screen of settings and editing profile

This screen contained standard settings: connect or disconnect with social networks, push notifications settings, changing the password, deactivation of the account, signing out.

Due to the fact that many screens were required and the convenient transition was needed, the designer chose to construct the application with slide menu. The sandwich button on the left enabled opening the menu panel for the transition to different sections. Also, there was a list of users recommended for following. These recommendations were based on musical tastes, location, circles of friendship, etc. In addition, there was a separate notifications screen that reflected the activity of the followers to the user’s posts in the service or in social networks.

In the iPad version, the split-view was implemented. The sandwich menu and slide menu were set on the left edge of the screen. The size of the posts adjusted to the tablet.

In the mobile application, the difference between Android and iOS is that the design of the upper bar (navigation bar for iOS and action bar for Android) has different functional abilities. In general, action bar for Android, in addition to navigation, includes filters, sharing, data about the current screen. Considering these UI peculiarities of the action bar for Android, the content of slide menus was reflected identically in both versions as the acceptable controller for both operating systems in the aspect of mobile applications. For Android version design was completed according to the guides of material design so the structure of the slide menu was the same as for iOS but the appearance was different.

For the web version of the service, the designer used a typical structure when the header and slide menu duplicated the functionality of the application with alterations on the size of the desktop for the web-version. Therefore, there were more posts visible in the feed in case of adaptation of the mobile applications to the web.

Everything mentioned above shows that the designer didn’t make the attempt to experimenting and that was motivated by the desire to provide the highest possible usability and utility level. As it has already been outlined before, the application was created for fast and easy usage in everyday situations, so from the user experience standpoint, any experiments and extreme innovations in the typical scheme of social network could scare users, make them feel the application confusing and result in poor user experience.

So, the main area of designing something original to distinguish the application was UI.

User Interface (UI)

The Blur effect was taken as the basis: the bars with data or statements blurred the background. The following animation was used on the player screen: the basic background showed the artwork, which presented the album cover for the composition playing. The background of the screen was blurred with the round unblurred central part, around which the effect of the rotating playing record was created with typical visual details.

Visual design of the screens was distinctly distinguished according to their functionality. The screens of entertaining character (feed, profile, navigation bar) were designed with wide application of blur effect: it was dimmed out and the text data was presented in white color. However, standard screen such as settings or profile editing were designed in the simple style with light background and dark text.

The feed screen reflected the stream of friends and included the artwork being the album cover for the composition playing, the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views, and online listening.

One more screen designed here was extended feed screen. Tapping or clicking on the stream, the user could obtain extended data including all the information from the feed screen described above together with a detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application.

Redesign

One of the most important stages while designing the UX/UI of an application or website is its testing. Practice shows that sometimes ideas, which look brilliant on the first glance, turn out to be absolutely impractical for target users. That happened with the first version of the Echo project described above.

Having analyzed the results of user-testing and having worked with focus groups, the author obtained the information that the original design doesn’t work as it was desired. The thing getting the most negative feedback from users was blur effect in extended feed screen. The screen looked dirty and the text seemed unreadable. Animation and non-standard effects demanded long loading that is unacceptable for such simple operations. The feed screen contained too little body of the stream with overloaded controllers whose functionality was not really essential on that screen.

So, on the basis of user feedback, there was made the decision to change the design of the screens. The solution found for them was the following: the blur effect was totally eliminated because its appearance in PSD was absolutely different from what was seen in real, especially low-resolution screens.

To provide a maximum of cleanness and simplicity, all the screens were designed with a light background, elegant and laconic custom icons. The feed screen contained less data and the posts had a bigger size. Extended feed looked much simpler although saving the idea of animation.

The transition from feed to extended feed was realized by tapping or clicking at the artwork on the feed screen: it was given in smaller size in feed and got bigger while transition proportionally to the whole screen and under it all the information about the post (the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views and online listening, detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application) was shown on the white background. To make it even more convenient, in the case of vertical scrolling of this screen the big image of the artwork hid into the navigation bar leaving the place for the content below.

Web-version was simplified to a one-page site with the functionality of viewing the screens and profile.

Work on this project gave the team valuable experience. It shows that modern UI/UX designer should always consider user’s needs and wishes that are vital in creating a successful experience and therefore provide a high level of desirability. Moreover, the Echo project also proved that a designer should always be ready to update or even redesign his work and this decision has to be based on real testing of the product.

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

Tasty Burger. Mobile App for Food Ordering

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce