{"id":313,"date":"2015-07-29T17:39:57","date_gmt":"2015-07-29T14:39:57","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=313"},"modified":"2023-08-17T15:46:38","modified_gmt":"2023-08-17T15:46:38","slug":"case-study-tracking-app","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-tracking-app\/","title":{"rendered":"Case Study: Tracking App. Designing UI"},"content":{"rendered":"

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, color theory<\/a>, logic\u00a0and 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.<\/span><\/p>\n

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 the 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\u2019s Dribbble shots, and it is high time now we told you more about the project.<\/span><\/p>\n

\"Daria
\nDaria, the UI\/UX designer for Tubik Studio<\/em><\/p>\n

 <\/p>\n

Task:<\/span><\/h2>\n

Design of the interface of a mobile tracking application for iOS and its adaptation to iPad.<\/span><\/p>\n

 <\/p>\n

Tools:<\/span><\/h2>\n

Pencil sketching, Adobe Photoshop, Adobe After Effects.<\/span><\/p>\n

 <\/p>\n

Process:<\/span><\/h2>\n

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 the efficient and bright design of the interface which would have high aesthetic representation but at the same time would not confuse any user.<\/span><\/p>\n

 <\/p>\n

The assignment didn\u2019t 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 a\u00a0new 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.<\/span><\/p>\n

 <\/p>\n

\"wireframing2\"<\/p>\n

 <\/p>\n

\"wireframing3\"<\/p>\n

The first stage of the process: creating the wireframes and the general concept of UI<\/em><\/p>\n

 <\/p>\n

\"screens\"
\nProcessing the screens<\/em><\/p>\n

 <\/p>\n

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:<\/span><\/p>\n

 <\/p>\n