{"id":984,"date":"2016-01-29T12:53:39","date_gmt":"2016-01-29T09:53:39","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=984"},"modified":"2023-08-17T14:04:44","modified_gmt":"2023-08-17T14:04:44","slug":"case-study-saily-app-designing-ui","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/","title":{"rendered":"Case Study: Saily App. Designing UI"},"content":{"rendered":"<p><span style=\"color: #333333;\">In one of our previous case studies, we have told you <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-saily-design-logo\/\">about a logo<\/a> that Tubik Studio designed for <a style=\"color: #333333;\" href=\"http:\/\/www.saily.co\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Saily App<\/a>. To continue this bright design story, today\u00a0we are going to get you to some backstage of UI redesign for Saily App.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8611\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/saily-app-design-1024x768.jpg\" alt=\"saily app design\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/saily-app-design.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/saily-app-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/saily-app-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/saily-app-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Task<\/span><\/h2>\n<p><span style=\"color: #333333;\">Redesign of UI for the mobile application for local user-to-user e-commerce.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Tools<\/span><\/h2>\n<p><span style=\"color: #333333;\">Sketch, Adobe After Effects, Adobe Illustrator<\/span><\/p>\n<h2><span style=\"color: #333333;\">Process<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><strong>User Interface<\/strong><\/span><\/p>\n<p><span style=\"color: #333333;\">To remind those who might have missed our previous case study, Saily is a local community app allowing neighbors to buy and sell their used stuff. Although it is a sort of e-commerce app, it includes a strong feature of communication between users. One of the essential accents brought out by the Saily App team puts a deep focus on design and culture at the core of everything they do. User interface redesign of the app, accomplished by Tubik Studio designer Tamara, according to the client&#8217;s vision of the product needed to have a fun and entertaining feel and look. Bearing it in mind and setting the task to make the product trendy, clear and easy-to-use, the designer created the new image for Saily App, which presented a new visual concept and featured new functional points the clients wanted to add to the user experience.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8626\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubikstudio.jpg\" alt=\"saily ui design tubikstudio\" width=\"1024\" height=\"1024\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubikstudio.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubikstudio-150x150.jpg 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubikstudio-300x300.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubikstudio-768x768.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Tubik Studio designer Tamara\u00a0working on Saily App screens<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">In the process of research and analysis of the existing general concept of layout and transitions, the designer concentrated on UI solution which put bright accents at the most important features and provided fast and easy microinteractions. <a href=\"https:\/\/blog.tubikstudio.com\/11-profitable-strategies-for-e-commerce-ui-design\/\">E-commerce<\/a> is the process that a user needs to feel as clear and fast; in addition, the features should be informative and easily recognizable for a quite diverse target audience.<\/span><\/p>\n<p><span style=\"color: #333333;\">So, UI design points that must be thought out were the following:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">easily understandable layout and <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigation<\/a><\/span><\/li>\n<li><span style=\"color: #333333;\">recognizable <a href=\"https:\/\/blog.tubikstudio.com\/small-elements-big-impact-types-and-functions-of-ui-icons\/\">icons<\/a><\/span><\/li>\n<li><span style=\"color: #333333;\">graphic elements not creating an unnecessary distraction from the main points<\/span><\/li>\n<li><span style=\"color: #333333;\">the process of inputting the data about the item as simple and user-friendly as possible<\/span><\/li>\n<li><span style=\"color: #333333;\">interface elements showing data about the item not looking overloaded but containing all the necessary information<\/span><\/li>\n<li><span style=\"color: #333333;\">efficient communication available from any point of the application<\/span><\/li>\n<li><span style=\"color: #333333;\">funny and entertaining graphic elements all harmoniously supporting the same style concept and preferably original to create additional recognizability for the app.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8627 size-full\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/Screen-Tubik-Studio-UI-design-case-study.jpg\" alt=\"Screen Tubik Studio UI design case study\" width=\"1618\" height=\"954\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/Screen-Tubik-Studio-UI-design-case-study.jpg 1618w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/Screen-Tubik-Studio-UI-design-case-study-300x177.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/Screen-Tubik-Studio-UI-design-case-study-768x453.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/Screen-Tubik-Studio-UI-design-case-study-1024x604.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/Screen-Tubik-Studio-UI-design-case-study-150x88.jpg 150w\" sizes=\"auto, (max-width: 1618px) 100vw, 1618px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The general stylistic concept, which was chosen to support the idea of funny and uptown interface which should at the same time be informative and useful, moved around the <a href=\"https:\/\/blog.tubikstudio.com\/light-and-darkness-in-ui-design-matter-of-choice\/\">light background<\/a> and a lot of bright accents in <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigation<\/a> and notification elements of the interface. As it&#8217;s easy to see from the grand-list above, due to this decision the screens get a lot of air and light background promotes good readability which is essential in the case of e-commerce app. Moreover, light background gives an efficient field of presentation for any kind of item brought out to sales.<\/span><\/p>\n<p><span style=\"color: #333333;\">The search followed two directions: actually the search of the actual items and search along the requests that were made by other users. In requests, users left the information about the wished item. Also, the user could save the history of own requests. Requests made by users gave an additional channel of easy matching sellers and buyers letting them know what is actually on-demand at the time. Moreover, requests could be filtered by location and make the process of matching the buyer and the desired item even more efficient. Search field was hidden in the process of reviewing the content not to distract the user and open more space.<\/span><\/p>\n<p><span style=\"color: #333333;\">One of the decisions made to add some interesting visual features was the colorful highlighting of the content photos to make them look interesting and attract the user&#8217;s attention. Colors were used to visually support navigation via color-coding creating conventions and increasing the level of usability. Categories in the navigation were represented with background photos and original icons.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8628\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-categories-ui-tubik-studio-icons-1024x768.png\" alt=\"saily categories ui tubik studio icons\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-categories-ui-tubik-studio-icons.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-categories-ui-tubik-studio-icons-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-categories-ui-tubik-studio-icons-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-categories-ui-tubik-studio-icons-150x113.png 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"color: #333333;\">All the icons for the app were unique and customized so that they could create the harmony of visual perception with all the other graphic elements and at the same time add to the general originality of the visual design of the screens.<\/span><\/p>\n<p><span style=\"color: #333333;\">Tab bar included the basic navigation items enabling the user to activate feed, search, communication features and add a new item or request.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8629\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-UI-screens-tubik-studio-design.png\" alt=\"saily UI screens tubik studio design\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-UI-screens-tubik-studio-design.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-UI-screens-tubik-studio-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-UI-screens-tubik-studio-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-UI-screens-tubik-studio-design-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">All the items, as you can see, were organized along the cards. The card of the item showed all the necessary information about the thing for sale and enabled the potential buyer to connect with the seller at once. To visually present the item, which users wanted to sell, they could upload and customize one to four photos which the user could add from his\/her own device gallery or take a photo right out of the app screen. The sharing function was transferred to the separate screen so that not to overload the card.<\/span><\/p>\n<p><span style=\"color: #333333;\">One more functional side of the application to mention is the features of chatting and planning. As the app is positioned as a highly social, simple and usable chatting feature was seen among the essentials and organized along the standard and common scheme of native chats without too much experimenting so that even the users without a frequent experience of communication via digital channels could feel comfortable with this chat.<\/span><\/p>\n<p><span style=\"color: #333333;\">Planning functionality was realized via \u201cmeetings\u201d feature which enabled a user to fix the time and day of meeting with the seller\/buyer in the app calendar and see this information at the card of the item. In the &#8220;meetings&#8221; mode the image of the item got smaller and moved to the field of the item description while the bigger image featured the image of the meeting place and data.<\/span><\/p>\n<p><span style=\"color: #333333;\">So, the user&#8217;s feed could switch in three different modes and show the chats, meetings, and requests. In the own card of the item, the seller could also change the different status of the item to inform the users who could potentially get interested in it. Also, the application enabled the user to add some items to favorites not to lose their trace in the great bulk of items.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8630\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubik-studio-app-screens-1024x768.png\" alt=\"saily ui design tubik studio app screens\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubik-studio-app-screens.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubik-studio-app-screens-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubik-studio-app-screens-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-ui-design-tubik-studio-app-screens-150x113.png 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"color: #333333;\">The user&#8217;s profile showed basic information like name, location, followers\/following and also activation of the chatting function as one of the basics. The preview of the item card included the photo, main description with the category color code, the price and ability to add it to favorites right from the preview.<\/span><\/p>\n<p><span style=\"color: #333333;\">All UI solutions obtained via numerous discussions and iterations turned around the high level of usability and efficiency which should be supported with all the visual elements available on the screen.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Illustrations<\/span><\/h2>\n<p><span style=\"color: #333333;\">In the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-saily-design-logo\/\" target=\"_blank\" rel=\"noopener noreferrer\">previous case study<\/a>, we have mentioned the Saily <a href=\"https:\/\/blog.tubikstudio.com\/design-me-live-the-power-of-mascots-in-ui-and-branding\/\">brand mascot<\/a> which is a funny little ghost having its own legend. Logo created for the brand by Tubik Studio designer Arthur Avakyan was just the start of the branding process which continued with the next step of branding in UI design.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8623\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/tubik-logo-design-saily.png\" alt=\"tubik logo design saily\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/tubik-logo-design-saily.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/tubik-logo-design-saily-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/tubik-logo-design-saily-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/tubik-logo-design-saily-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">The mascot, as well as the other funny and user-friendly characters, were used in numerous funny illustrations which presenting a sort of entertaining element at the same time became the tool of informing the user about the issues or problems demanding attention.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8632\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/illustration-saily-tubik-studio-app-design-1024x768.png\" alt=\"illustration saily tubikstudio app design\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/illustration-saily-tubik-studio-app-design.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/illustration-saily-tubik-studio-app-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/illustration-saily-tubik-studio-app-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/illustration-saily-tubik-studio-app-design-150x113.png 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8631\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-illustration-tubik-studio-mobile-screens-1024x768.png\" alt=\"illustration saily tubikstudio app design\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-illustration-tubik-studio-mobile-screens.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-illustration-tubik-studio-mobile-screens-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-illustration-tubik-studio-mobile-screens-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-illustration-tubik-studio-mobile-screens-150x113.png 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"color: #333333;\">Also, the team of UI designer Tamara, illustrator Arthur and motion designer Kirill created several animations that livened up the screens, supported general cool style and at the same time had the functions of informing the user about the state of processes such as <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">pull-to-refresh animations<\/a> or loaders.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8636\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/tubik-studio-saily-animation-design.gif\" alt=\"saily app animation tubikstudio design case study\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Enable location animated screen<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8635\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/animation-saily-tubik-studio.gif\" alt=\"saily app animation tubikstudio design case study\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Enable notification\u00a0animated screen<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8634\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/animation-saily-by-tubik-studio-pull-to-refresh.gif\" alt=\"saily app animation tubikstudio design case study\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Pull down to refresh animation<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8633\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-animation-by-tubik-studio-loading.gif\" alt=\"saily app animation tubikstudio design case study\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Search Screen Animation<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">So, the Saily App project became a great and bright challenge for designers to make a trendy, funny and attractive but highly efficient and informative application with user interface aimed at the wide and diverse target audience and having a strong element of socialization.<\/span><\/p>\n<h2>Useful Case Studies<\/h2>\n<p>If you are interested to see more practical case studies with creative flows for mobile UI design, here is the set of them from Tubik.<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-nature-encyclopedia-ui-design-for-education\/\">Nature Encyclopedia. UI Design for Education<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-inspora-brand-ui-design-virtual-stylist\/\">Inspora. Brand and UI Design for Virtual Stylist<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-bitex-app-ux-design-for-stock-analysis-app\/\">Bitex. UX Design for Stock Analysis App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/\">Slumber. Mobile UI Design for Healthy Sleeping<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-real-racing-ux-ui-design-for-mobile-game\/\">Real Racing. UX and UI Design for Mobile Game<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-manuva-uiux-design-gym-fitness-app\/\">Manuva. UI\/UX Design for Gym Fitness App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-cuteen-uiux-design-for-mobile-photo-editor\/\">Cuteen. UI\/UX Design for Mobile Photo Editor<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-tasty-burger-ui-design-for-food-ordering-app\/\">Tasty Burger. UI Design for Food Ordering App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-watering-tracker-ui-design-for-home-needs\/\">Watering Tracker. UI Design for Home Needs<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\" target=\"_blank\" rel=\"noopener noreferrer\">Upper App. UI Design for To-Do List<\/a><\/p>\n<hr \/>\n<p><em>Welcome to read a case study on <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-saily-design-logo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Saily Logo Design<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The case study by Tubik about design for Saily App, devoted to user interface design and packed with loads of images and animations to show the process.<\/p>\n","protected":false},"author":3,"featured_media":8610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,4,6,9],"tags":[256,515,264,533,299,319,320,16,328,20,331,47,336,57,365,100,447,147,457,174,458,212,479,233,482,237,491,248,502],"coauthors":[],"class_list":["post-984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-case_study","category-illustration","category-ui_ux","tag-interaction-design","tag-uxui","tag-interface-navigation","tag-web-design","tag-logo-design","tag-mobile-app","tag-mobile-app-branding","tag-animation","tag-mobile-navigation-design","tag-app-design","tag-mobile-ui","tag-branding","tag-motion-design","tag-case-study","tag-product-design","tag-design","tag-tubik-studio","tag-design-studio","tag-ui","tag-ecommerce","tag-ui-animation","tag-graphic-design","tag-usability","tag-human-computer-interaction","tag-user-experience","tag-icons","tag-user-interface","tag-illustration","tag-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Saily App. Designing UI<\/title>\n<meta name=\"description\" content=\"The case study by Tubik Studio about design for Saily App, devoted to user interface design and packed with loads of images and animations to show the process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Saily App. Designing UI\" \/>\n<meta property=\"og:description\" content=\"The case study by Tubik Studio about design for Saily App, devoted to user interface design and packed with loads of images and animations to show the process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-29T09:53:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T14:04:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/\",\"name\":\"Case Study: Saily App. Designing UI\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg\",\"datePublished\":\"2016-01-29T09:53:39+00:00\",\"dateModified\":\"2023-08-17T14:04:44+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The case study by Tubik Studio about design for Saily App, devoted to user interface design and packed with loads of images and animations to show the process.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg\",\"width\":1024,\"height\":768,\"caption\":\"Tubik Studio UI design-Saily\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Saily App. Designing UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Saily App. Designing UI","description":"The case study by Tubik Studio about design for Saily App, devoted to user interface design and packed with loads of images and animations to show the process.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Saily App. Designing UI","og_description":"The case study by Tubik Studio about design for Saily App, devoted to user interface design and packed with loads of images and animations to show the process.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2016-01-29T09:53:39+00:00","article_modified_time":"2023-08-17T14:04:44+00:00","og_image":[{"width":1024,"height":768,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/","name":"Case Study: Saily App. Designing UI","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg","datePublished":"2016-01-29T09:53:39+00:00","dateModified":"2023-08-17T14:04:44+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The case study by Tubik Studio about design for Saily App, devoted to user interface design and packed with loads of images and animations to show the process.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-UI-design-Saily.jpg","width":1024,"height":768,"caption":"Tubik Studio UI design-Saily"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-saily-app-designing-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Saily App. Designing UI"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=984"}],"version-history":[{"count":5,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":14760,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/984\/revisions\/14760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8610"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=984"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}