Tag Archives: design case study

watering tracker app design tubik

Case Study: Watering Tracker. UI Design for Home Needs.

In all the diversity of applications fulfilling different personal, social and business needs, the special place will always belong to the ones that become our everyday helpers in sometimes basic but necessary operations. Calendars, calculators, to-do lists or fitness timers, apps saving our menus and reminding to take medicine along the schedule — all this simple stuff makes users’ lives much easier. The apps of this kind increase productivity as well as save time and effort for multiple challenges life prepares for us on a daily basis. Designers creating such interfaces become a sort of magicians activating problem-solving potential of modern technology. Today we would like to share a new design case study telling about that kind of UI: welcome to check the creative flow for Watering Tracker App.

 

Project

 

User interface and interaction design for an iOS application tracking plants watering.

 

Process

 

Have you ever forgotten to water plants at home? Being busy with hundreds of tasks, we sometimes miss very basic things and then regret not doing them on time. With pieces of nature, the effect may be even more crucial as they can get sick or even die without proper care. The task for the interface concept of a mobile app was aimed at helping users having plants at homes or offices: first of all, it had to remind users of watering when it’s needed as well as keep the data about watering.

 

As we mentioned in diverse articles devoted to UX design, high-quality user interfaces should harmonically satisfy four basic aspects:

  • usability: the app is convenient, clear, logical and easy to use
  • utility: the app provides useful content and solves users’ problems
  • accessibility: the app is convenient for different categories of users
  • desirability: the app is attractive and problem-solving, it retains users and creates the positive experience which they are ready to repeat.

 

Based on that, Tubik designer Anton Morozov under art-direction by Ernest Asanov set the goal to make the application not only problem-solving but also informative to broaden its utility. Also, the appearance of the app was an object of thorough attention: as that was definitely the app for daily use, why wouldn’t designers add a pinch of elegance and sophistication to grow desirability and aesthetic satisfaction?

 

After the flow of UX wireframing, the designer planned the following set of basic functionality for the app:

— adding plants to the app

— reminders and notifications about watering

— getting information and recommendations about conditions and care for particular kinds of plants

— tracking stats of watering and plans for next week.

 

Let’s check how the layout was designed and what flows of interactions were planned for the mentioned goals.

 

water_tracking_application_ui_tubik

 

Adding items to the app, a user gets his/her own directory of the plants which need to be watered now and then. The left screen on the picture below shows the collection of items which were added by the user: it is shown as a set of tabs. The title above the tab gives the name of the plant while on the tab users can instantly see the notification when the next watering is expected for this position. The icon of drops in the top right corner of the tab helps to set the visual association with water and informs a user that the plant on this tab will need watering soon. In contrast, the lowest tab on the presented screen shows the icon of a tick which means that this item has been recently watered.

 

This way of data organization lets the user quickly scan the state of things right from this screen if there’s no time or need to move to the screens of every particular plant. The background of each tab features an easily recognizable photo of a natural object. And to add a new item, users need just to take a photo, as it’s seen on the right screen below.

 

watering tracker interaction design

 

The tab bar is highly functional and simple: it includes three most demanded zones of interactions. «My Plants» opens the directory of the ones tracked for watering, «Add New» allows to create a new item and «My Profile» goes to all the history and stats data.

 

Adding a plant takes just short seconds. When a user has taken a photo with a smartphone camera, the application recognizes it and offers the data from the app catalog of plants: it includes the name, the background picture and the data of care conditions like temperature, humidity and light rates comfortable for this type. The user may add it to his/her set of tracked plants and it will get seen on the screen with user’s collection. In case there is no data about a particular plant in the app database, the user can create a new item and add it to the app catalog. This approach has two big benefits: firstly, it will strengthen the app with the ability to add user-generated content; secondly, it will inform app creators and support which types of objects have to enlarge the original app database.

 

watering tracker app interactions

 

Here’s the animation showing the interactions described above.

 

watering_tracker_app_interactions_tubik

 

Now let’s look into some details of watering tracking itself. When the date comes, the user gets a notification that the item needs to be watered. Opening the screen of that plant, users see:

 

— the name and the background picture of the plant in the upper part of the screen,

— the interactive zone with the tabs of other plants ready for watering,

— the contrast light tab in the lower part of the screen including information about the plant which can be pulled up to open.

 

watering tracker UI design

 

The interactive zone with the tabs of other plants ready for watering can also be extended. In this case, it opens the graph showing the progress  — aka watering workload — for the current week.  This zone is presented on the dark background which makes the graph look stylish and deep and also sets the good level of contrast with the information tab below presented on the light background. The information tab is grounded on light and airy solution: in combination with bold sans-serif fonts in the interface, it provides high readability level and contributes much to the effective visual hierarchy of the layout.

 

When the plant is watered, the user just needs to tap on the icon with drops and it will transform into a tick.

 

watering tracker user interface design

 

Slight unobtrusive animation makes the interactions live and enhances the general usability of the user interface.

 

watering_tracker_app_ui_tubik

 

Working on the concept of mobile user interface aimed at solving simple but everlasting problems of everyday life, the designer made the screens informative, efficient and stylish. First of all, the app of this kind could be helpful at home, taking over the responsibility of a reminder and tracker. Moreover, it could effectively help workers of the offices, public and private gardens or parks,  landscape firms and services — all those who are in charge of taking care of plants and supporting the beauty of nature around us.

 

watering tracker app design tubik

 

Recommended reading

 

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

 

Home Budget App. UI for Finance.

Night in Berlin. UI for Event App.

Big City Guide. Landing Page Design.

Vinny’s Bakery. UI Design for E-Commerce.

Upper App. UI Design for To-Do List.

Health Care App. UI for Doctors.

Wedding Planner. UI Design Concept.

Toonie Alarm. Mobile App UI Design.

SwiftyBeaver. UX/UI Design for a Mac Application.


Welcome to see designs by Tubik on Dribbble and Behance

home budget app case study

Case Study: Home Budget App. UI for Finance.

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 the high level of legibility for both letters and numbers. 

 

Dashboard

 

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

 

Dashboard_home_budget UI

 

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 the 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 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 navigation and make interactions intuitive. 

 

Home_budget_app_dashboard_animation_tubik

 

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.

 

home budget app mobile screen

 

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.

 

home budget app mobile notifications

 

To get the 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.

 

Home Budget app interactions motion tubik

 

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

 

home budget app interaction animation tubik

 

Another piece of 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.

 

home budget app case study

 

This project has started the deeper immersion into the world of digital products for finance management for 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.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

big city guide web ui design

Case Study: Big City Guide. Landing Page Design.

People say the world is a book and those who do not travel read only one page. It’s hard to argue since traveling is always a chance to learn new things, meet new people and do something absolutely extraordinary. What’s more, a nice trip can become a source of life energy and inspiration. Today, travelers have more opportunities than ever before and the World Wide Web plays the significant role here. The Internet provides loads of information about various countries and their cultures helping travelers decide where to wend their way.

 

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

 

tubik ui designer

 

Task

 

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

 

Process

 

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

 

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

 

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

 

Berlin big city guide ui

 

big city guide berlin tubik

 

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

 

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

 

Madrid big city guide ui

 

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

 

Big City Guide Madrid tubik

 

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

 

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

 

Stockholm big city guide ui

 

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

 

web ui design city guide

 

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

 

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

 

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

 

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

 

Big City Guide animation tubik

 

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

 

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

 

Tubik UI Fridays go on for more concepts and case studies we will share with you soon. So, follow our blog and Dribbble not to miss the updates.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

upper app UI design case study

Case Study: Upper App. UI Design for To-Do List.

Famous author and motivational speaker Zig Ziglar once said: «You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.» Planning our day and managing our tasks is the significant job we have to do regularly and devotedly in case we seek for success. Tons of books, articles and interviews from successful and productive people generally send the global message: to be productive you have to plan your day and tasks distributing your time and effort wisely. 

 

Would you like to have a reliable helping hand in the process of planning your days and setting goals effectively and without any distractions? Welcome to try Upper, simple and elegant free application for iPhones, designed and developed by Tubik team. Today this motivating app is featured and spinning up at Product Hunt, so we’ve also decided to unveil some details of the to-do list design and functionality with our readers.

 

Upper App to-do list tubik

 

Task

 

Full-cycle UI/UX design for the simple and motivational productivity app for iPhones.

 

Process

 

Creating the to-do list application, Tubik team realized the high scale of competition in this sphere of utilities: that was a step into the red ocean. Still, as it usually happens in the fields covering wide and diverse target audience, a variety of the products is another user-friendly feature: it allows choosing the styles and features every particular user likes. Continuing the theme of personal productivity, which was started with our previous app Toonie Alarm, we’ve established the goal to present the to-do list UI of totally different look and functionality deeply focused on personal and professional motivation.

 

 upper app UI design

 

In UX perspective, the to-do list design was concentrated on extremely simple interactions and intuitive navigation, while in UI aspect the core concerns gathered around high readability level and visual hierarchy that would allow users to use the app easily in any environment and on the go. In addition, working on the visual performance of the app user interface, Tubik designer Ernest Asanov made a general stylistic concept choice in favor of minimalist and elegant solutions.

 

Functionality

 

When our team made a decision to design to-do list, the basic idea set behind Upper was creating a helpful list app design, deeply concentrating user’s attention on the tasks and deadline. That’s why it doesn’t include complex functionality, distractions or decorations. It presents only the features and elements needed for time and task management.

 

Functions and features provide the following:

  • All the features of the app are free for everyone
  • Upper Streak Challenge motivate users to complete all the tasks for the day
  • Statistics of tasks completion
  • Simple and clear navigation
  • Easy adding, deleting and marking tasks
  • Eye-pleasing slight animation
  • Instant sharing achievements with friends

 

upper app UI design case study

 

Design and Layout

 

Interactions: The basic functionality of the app is built around user’s ability to create the list of tasks which can be saved for the particular date and time, easily deleted or marked complete. In addition, Upper analyzes task completion progress and shows stats to keep users updated and motivated. The absence of distractions, simple screen design and thought-out typography make the content highly readable and allow using the app easily in any environment and on-the-go.

 

upper app UI design case study

 

Basic functional buttons are placed in the bottom of the screen, which supports usability for users with big devices. Different swipe gestures allow a user to mark the task complete or delete it from the list. Core information such as dates, the words for the closest days (tomorrow, today), the number of tasks and days in Upper Streak are presented in the uppercase font, supporting both efficient visual hierarchy of the layout elements and the harmonic consistency in combination with the product brand name.

 

Upper App to-do list 7

 

Upper Streak: The original feature of Upper App is user motivation with special challenge of non-breaking plans and increasing productivity potential. The app motivates to complete all the planned tasks via Upper Streak Challenge. Streak is the period during which users don’t interrupt completing the tasks with Upper: it shows the achievement of being consistent and productive and encourages not to stop and break the progress. Seeing your determination, the app will challenge you with the bigger number of tasks, so users are motivated to get organized and complete the plans with Upper without missing a day.

 

upper app UI design case study

 

Color and style: The task list design is performed in the minimalist and elegant style of the layout based deeply on quick functionality and intuitive navigation. What is more, users are provided with the variety of skins and can choose between dark, light and red skin depending on their personal taste and wishes. At the moment the app is presented in dark skin, but next update coming very soon will enable to activate any of the three palettes.

 

upper app UI design case study

 

User-friendly navigation, supported with slight eye-pleasing animation, will help users to focus on their tasks.  No ads, no complications, no extra copy, interface motivating to create short concise notes for the tasks – nothing will distract from the goals. Application provides the simple calendar, allows saving notes conveniently, check stats and plan anything from everyday stuff to business objectives.

 

upper app UI design case study

 

To get more information on design and interactions, you can also review the full presentation of Upper App design or check full pack of the details via Upper Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Upper App via App Store

Welcome to see the designs by Tubik Studio on Dribbble and Behance

Toonie Alarm UI design

Case Study: Toonie Alarm. App UI Design.

Designing a product for everyday use, it is vital to ground it on the thorough market research, thought-out design presentation and deep analysis of the target audience. No wonder: the stuff like note-apps, alarms, to-do lists, calculators, calendars and the like surround users in their everyday life, help in common situations and sometimes add color to the routine. We have checked that well and now would like to present you the first case telling the design story of the brand new alarm app for iOS called Toonie Alarm which today is featured on Product Hunt and has reached top-5 in the category Tech in 4 hours after featuring.

 

Toonie Alarm UI design

 

Task:

 

Full-cycle UI/UX design for the simple and engaging alarm app for iPhones.

 

Process:

 

The design process for this case was different from typical ones in the studio as before it we had worked more on outsource projects which means that creating initial product concept and setting the task was done mainly by the client’s side. The process for Toonie Alarm took the other direction and gave us what it was set for: the feeling of full product creation process from the very first steps. We had to set the idea and test it competitive potential, establish its USP and marketing plan, branding and usability foundation and all the other stuff like this.

 

Initially the idea behind the app was to create a simple alarm clock with attractive design and consistent element of motivation and support for such a basic and often far-from-pleasant process as waking up. The basic brand image was set as fun, cute, bright and cheerful, and marketing research supported this concept with the analysis of competition and ideas on adding original features to the app.

 

User research and analysis enabled the team to form the USP for the product on the basis of the following set of key features:

  • All the features of the app free for everyone
  • Simple, clear and intuitive navigation
  • Bright and pretty interface
  • Huge set of beautiful stickers
  • Achievements and rewards for waking up
  • Eye-pleasing interactive animation
  • Animated time picker
  • Instant sharing achievement with friends.

 

Let’s look over the details of UI created by Tubik designers.

 

Cute Mascot

 

In one of our previous articles we have already mentioned the great role of mascots in branding and UI design. As for Toonie Alarm, the idea of applying the mascot was set almost instantly as mascot is not only a sort of communicator between interface and user, but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world  brighter and help users to interact with the alarm. It informs users about news, rewards, errors and just adds some fun and color to everyday life.

 

Toonie Alarm mascot design

 

toonie alarm mascot design

 

App Tutorial

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

Toonie Alarm Tutorial design

 

Home Screen

 

The home screen shows the alarms which user already set for particular time and days and the tab with funny stickers already collected for waking up. Active alarms toggles feature the animated sun. Left swipe opens active options for the particular alarm.

 

Toonie Alarm UI design

 

Stickers Screen

 

Various stickers become the reward for waking up at the particular period. Moreover, waking up several times at this time, users can level up their stickers and enrich their collection. All the stickers can be shared to social networks to mark users’ achievements.

 

toonie alarm stickers

 

Toonie alarm stickers screen

 

Time Picker

 

Another prominent feature of the app is the animated time picker. The app has simple navigation and nice motion makes it even more intuitive. Picking time for the alarm, users can enjoy animated march of night and day.

 

Toonie Alarm time picker screen

 

Animated Stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie alarm stickers

 

Logo Style

 

Logo design keeps style of lettering associated with fun and entertainment and creating harmonic link to the fonts typical for cute cartoons.

 

Toonie Alarm logo

 

Product Video

 

To catch more details and see the interactions with the app in real, welcome to review the video guide on Toonie Alarm.

 

 

You can also review the presentation of Toonie Alarm design on Behance or check full pack of the details via Toonie Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Toonie Alarm via App Store

Welcome to see the designs by Tubik Studio on Dribbble and Behance

tubik studio free ebook design for business

Design for Business. Free E-Book by Tubik Team.

Designers are often people involved directly into business processes via their job. Knowing basics of this field makes a designer stronger and more productive in terms of the objectives set for particular projects. This sort of knowledge gets a designer closer to both client and final user of the digital product. With our experience, we would like to share ideas and thoughts on the theme, for the sake of global design community creating more and more products both user-friendly and solving business tasks. In this first issue of Tubik Magazine, the collection of free e-books on design issues, readers are offered the set of basic business terms defined and analyzed in the aspect of design.

 

Hopefully, it will be useful to build successful and productive strategies both for designers working for business and e-commerce and business people wishing to get more about design techniques and their impact on business processes. Enjoy reading and feel free to share the book with those whom it may concern.

 

 

To download the book in PDF, welcome here


Welcome to see the designs by Tubik Studio on Dribbble and Behance

PassFold UI by Tubik Studio

Case Study: PassFold. Designing UI.

In our earlier case studies we have already presented some ideas and strategies for design and redesign of UX/UI (Echo project) and UI (Tracking App project). Today we want to add new case to this collection and present you one more project on UI design.

 

Most designers dream to work on the full cycle of a product creation and launch, from generating ideas to full UX cycle and then full UI cycle. However, in real life there are loads of projects in which a designer works only on UI stage based on existing or already made UX. Mostly, it happens in cases when the product already exists as real and operates successfully, but more trendy looks or more clear and intuitive UI is needed to renovate it and make even more efficient. Somebody might think that this scheme is even easier for a graphic designer as you don’t need to think through all the logic and user behavior, only visualize the given scheme and layout. Nevertheless, in practice it is totally different as efficient UI is always based on polished UX, therefore to keep the consistency, the designer needs to do a considerable job of getting dip into details of the given layout and transitions and sometimes solve some minor UX problems even in the process of UI design. It often happens because new solutions in user interface will not work on the basis of out-of-date UI.

 

And this was the issue which Tubik Studio designer Tamara faced working with UI design for the project called PassFold. Let’s get into some details together.

tubik studio designer

Tubik Studio designer Tamara working on the project

 

Task

Redesign of UI for a mobile application for tickets (passes) management on the basis of existing UX/UI.

 

Tools

Adobe Photoshop, Adobe Illustrator.

 

Process

The idea behind the application under design was basically very clear and practical: it presented the virtual storage for tickets and passes bought online and gave wide opportunities to manage them.

 

Although general UX was already given as the basis for UI solutions, the designer analyzed it deeply and discussed it with the customer so that they could make some minor changes or add some functions significant in order to increase general usability of the application. Among them, there were added notifications about the dates and events which could be set manually, so that users could decide and chose if they wanted to get notifications about all the events they have kept in the storage or only some of them which are, perhaps, the most important.

 

One more step to optimization of both UX and UI of the app was to move the items previously placed in side menu to the tap bar. The logic behind this was rather simple as basic menu doesn’t consist of many options, moving its content to the tapbar makes user experience more intuitive and comfortable. Previous projects and research prove that tapbar is a great solution for the small set of basic options.

 

Passfold by Tubik Studio

 

One of the essential requirements from the customer was to use basic color palette in purple shades therefore the designer carefully thought about the right range of colors and shades to make the application screens both bright and clear as well as smart-looking.

 

In the first version of UI for the application items in the feed they had no footer and the text with data about the particular event was placed right on the photo used as a background. In this version, the designer offered to change this part of layout and separate photo from the text making it placed in the footer with the light background. The reason for such solution was simple: the application used the photos automatically linked to the events from the resources where the tickets or other stuff was bought, therefore it was impossible to control the quality of those photos or to change them manually, so in some cases they could cause illegibility of the text if it was placed right on the photo or picture. This could have significant influence on users’ perception and make it negative. So, solution of creating footer was made to eliminate this risk.

 

PassFold by Tubik Studio

 

User interface in the given application also included some conventions used through all the app screens. Conventions are a very important part of positive user experience in the interaction with the product, especially in highly practical applications, whose operations need to be dynamic and not taking too much time or effort. In PassFold project the consistent element throughout the screens was the tab showing the number of the days left to the event visualized in the form of tickets of different colors as you can see in the image above. The colors corresponded to the color of the event category in the main menu of the app. They enabled user to get fast and easy when they need to define the category of any item in the feed. That is even more precious when the person uses the app on the go which often happens with highly practical apps and tools.

 

Certainly, one of the most important parts of such kind of app is the calendar which represents all the plans according to the tickets and other items stored by the user. The calendar was also solved in pleasant-looking and clean manner with light background so that colorful accents showing the dates with planned events were clear and easily seen. The notifications, as it has been usually mentioned, could be added manually by the user, and if he did it, the date on the calendar showed it with the special small round mark both in the calendar and the line with the event description, as you can see in the image below.

 

Calendar by Tubik Studio

 

It should also be said that one more element influencing on the general concept of UI for the application was its logo. It was also created by Tubik Studio designer Arthur Avakyan and it will take the separate case study to present you the full process of its creation, so it will be the next story in our blog coming soon. It was very reasonable to keep the general concept both for logo and UI, so it can be said that their interconnection and interrelation gave the entire unified design feeling. The logo was added the colors used in the color palette for UI, and UI kept some features and shapes used in logo, including the form of tickets it visualized.

 

Tubik Studio

Arthur Avakyan working on PassFold logo.

 

The designer also paid additional attention to such simple but significant elements of the interface as icons. The customer wanted that UI of the app didn’t look too serious or businesslike, so the icons were not only meaningful elements in the general navigation of the app, but also the flavor of entertainment and fun in also bright and colorful menu.

 

Icons by Tubik Studio

 

One more element of fun was added with the animated pull-to-refresh showing colorful tickets changing.

 

Tubik Studio design

 

The customer also wanted to enable users top obtain information about events via QR-code, therefore a special pop-up window was designed for this function which the user could see by swipe.

 

Ticket detail screen as well as the calendar screen, being one of the most informative parts of the app, was also solved in the color scheme with light background to provide high level of readability.

 

This version of the app also added sharing feature. With special buttons appearing on the long tap the user could share the information about the ticket which was gained with his friends via his social accounts. Moreover, the app also included the feature of sharing the ticket itself via sending it to a friend.

 

Screens by Tubik Studio

 

Every screen involved unobtrusive tutorial prompts in cases where some options or actions could be non-obvious for the user.

 

Here you can see the full scope of UI for PassFold project.

 

UI by Tubik Studio

 

After approving all the screens and UI elements of the app with the customer, the designer also took some time to work on adaptation of all the solutions to iPhone 6/6+ and Android that also demanded deep attention to details that have to look perfect in all the versions and resolutions.

 

Tubik Studio designer

Tamara working on the finalization and adaptation of general UI design

 

The work on the project was the process full of ideas and inspiration, so many that the project could not include them all. That’s why some of the ideas, inspired by this design task, became the basis for Dribbble shots by Tamara presenting her UI concepts.

 

tubik studio app ui

Time management app by Tamara

 

event app UI Tubik Studio

Event App by Tamara

 

This task has become one more proof to demonstrate how much effort, time and creative job should be done to create design of the interface that will look and feel simple and cute but at the same time will satisfy multiple needs of users.


Welcome to see other works by Tamara on Dribbble 

Welcome to see other works by Tubik Studio on Dribbble and Behance

tracking app tubik design UI

Case Study: Tracking app. Designing UI.

User interface of a mobile application or a website is the part of design which combines a lot of various spheres of activity, including art, coloristics, logics 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 being full of responsibility 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 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 tracking app in Daria’s Dribbble shots, and it is high time now we told you more about the project.

 

Daria designer for Tubik Studio
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 which 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 efficient and bright design of the interface which 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 in 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 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 design process.

 

wireframing2

 

wireframing3

First stage of the process: creating the wireframes and general concept of UI

 

screens
Processing the screens

 

The first conception and stylistic decision for the application presented the version created in 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
— In timeline screen
— Details screen
— Order details screen
— Search screen
— Search list screen
— Calendar screen
— Dashboard screen

 

Grand-list_dark

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.

 

screens for ui Tubik Studio
Processing, tracking and transit screens

 

screens UI Tubik Studio

Order, order details and calendar screens

 

The previous version of design had a graphic feature which the customer asked to preserve and transfer somehow into the new of 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.

 

2 Home-screen

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

 

All three circles had the base of the same shape and size made in 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 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.

 

Tracking-App
The set of screens featured with the frame of a device

 

It should be also mentioned that the circles were also featured in original icon created by the designer for Track and Trace position in the menu. The combination of 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.

 

UI screens

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.

 

Animation Tubik Studio

Comp-2_2

Comp-3_3

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 to the site.

 

The site used light colouring 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 scheme, supporting the customers’ wishes and business aims.

 

Grand-list
The version redesigned with light color scheme

 

Having changed the color scheme, the designer obtained positive feedback from the customer and started the last stage of the work — 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 considerable amount of time and efforts to adapt them all to iPad version with no significant changes so that all the versions of application were easily recognizable by the user.

 

attachment-1
The version of landscape orientation for iPad

 

attachment-2

iPad and iOS versions of the application

 

The projects of this kind provide designers with 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 wireframing
Daria working on wireframes for the project

 


Welcome to see other works by Tubik Studio on Dribbble and Behance

Case study Ribbet Designing illustration

Case study: Ribbet. Designing Illustration.

It is not a secret that the fast-paced and dynamic development of web and app design brings new trends into other spheres of creativity in non-stop mode. No doubt, illustration is one of the fields which is constantly and significantly affected by all the numerous changes and currents in the Web. Working on different projects and preparing various shots for Dribbble and Behance, Tubik Studio designers get regularly updated on how multipurpose and versatile can illustration be. So, today we would like to present you the new case study, this time about illustration for a web online editing service.

 

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

 

Tubik Studio designer

Evgeniy Tomashevsky working on sketches

 

Task

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

 

Tools

Pencil sketching, Adobe Illustrator

 

Process

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

 

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

 

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

 

Case Study Ribbet Tubik Studio

General design of the website and logo for Ribbet by Tubik Studio 

 

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

 

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

 

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

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

Tiny part of sketching stage

 

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

 

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

 

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

 

Independence Day

Independence Day card

 

St_Patrick_s_day

St. Patrick’s Day card

 

Thanksgiving

Thanksgiving Day card

 

Remembrance_day-01

Remembrance Day card

 

NY_eve

New Year card

 

Mother_s_day

Mother’s Day card

 

Father_s_day-01

Father’s Day card

 

Valentine_s_day

Valentine’s Day card

 

Wedding_day-02

Wedding Day card

 

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

 

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

 

Case study Ribbet Designing illustration

The set of cards from Ribbet Facebook page

 

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


Welcome to see other works by Tubik Studio on Dribbble and Behance