

{"id":2617,"date":"2017-01-31T18:40:28","date_gmt":"2017-01-31T15:40:28","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2617"},"modified":"2023-08-15T08:22:27","modified_gmt":"2023-08-15T08:22:27","slug":"case-study-upper-app-ui-design-for-to-do-list","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/","title":{"rendered":"Case Study: Upper App. UI Design for To-Do List"},"content":{"rendered":"<p><span style=\"color: #333333;\">Famous author and motivational speaker Zig Ziglar once said: &#8220;You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.&#8221; Planning our day and managing our tasks is a significant job we have to do regularly and devotedly in case we seek 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 and distribute your time and effort wisely.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400; color: #333333;\">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, a simple and elegant free application for iPhones designed and developed by the Tubik team. Today this motivating app is featured and spinning up at <a style=\"color: #333333;\" href=\"https:\/\/www.producthunt.com\/posts\/upper-app\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Product Hunt<\/a>, so we&#8217;ve also decided to unveil some details of the to-do list design and functionality with our readers.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8697\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/Upper-App-to-do-list-design.jpg\" alt=\"Upper App to-do list design\" width=\"2000\" height=\"1333\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/Upper-App-to-do-list-design.jpg 2000w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/Upper-App-to-do-list-design-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/Upper-App-to-do-list-design-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/Upper-App-to-do-list-design-1024x682.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/Upper-App-to-do-list-design-150x100.jpg 150w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Task<\/span><\/h2>\n<p><span style=\"color: #333333;\">Full-cycle UI\/UX design for the simple and motivational productivity app for iPhones.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Process<\/span><\/h2>\n<p><span style=\"color: #333333;\">Creating the to-do list application, the 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 fields covering a wide and diverse target audience, a variety of 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 <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-alarm-app-ui-design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Toonie Alarm<\/a>, we&#8217;ve established the goal to present a to-do list UI with a totally different look and functionality deeply focused on personal and professional motivation.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8017\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/upper-app-UI-design.jpg\" alt=\"upper app UI design\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/upper-app-UI-design.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/upper-app-UI-design-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/upper-app-UI-design-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/upper-app-UI-design-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/upper-app-UI-design-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p><span style=\"color: #333333;\">From a UX perspective, the to-do list design was concentrated on extremely simple interactions and intuitive navigation, while in the UI aspect, the core concerns gathered around a 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.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Functionality<\/span><\/h3>\n<p><span style=\"font-weight: 400; color: #333333;\">When our team made a decision to design a to-do list, the basic idea set behind Upper was creating a helpful <span style=\"font-weight: 400;\">list app design<\/span>, deeply concentrating the user\u2019s attention on the tasks and deadlines. That\u2019s why it doesn\u2019t include complex functionality, distractions, or decorations. It presents only the features and elements needed for time and task management.<\/span><\/p>\n<p><span style=\"color: #333333;\">Functions and features provide the following:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">All the features of the app are free for everyone<\/span><\/li>\n<li><span style=\"color: #333333;\">The Upper Streak Challenge <a href=\"https:\/\/blog.tubikstudio.com\/two-types-of-user-motivation-design-to-satisfy\/\">motivates users<\/a> to complete all the tasks for the day<\/span><\/li>\n<li><span style=\"color: #333333;\">Statistics of tasks completion<\/span><\/li>\n<li><span style=\"color: #333333;\">Simple and clear navigation<\/span><\/li>\n<li><span style=\"color: #333333;\">Easy adding, deleting and marking tasks<\/span><\/li>\n<li><span style=\"color: #333333;\">Eye-pleasing slight animation<\/span><\/li>\n<li><span style=\"color: #333333;\">Instant sharing achievements with friends<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8016\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-7.jpg\" alt=\"Upper App to-do list\" width=\"2000\" height=\"1333\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-7.jpg 2000w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-7-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-7-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-7-1024x682.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-7-150x100.jpg 150w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<h3><span style=\"color: #333333;\">Design and Layout<\/span><\/h3>\n<p><span style=\"color: #333333;\"><b>Interactions:\u00a0<\/b>The basic functionality of the app is built around a user\u2019s ability to create a list of tasks that can be saved for a 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.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9517\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg\" alt=\"upper app UI design case study-1\" width=\"2000\" height=\"1333\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg 2000w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1-1024x682.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1-150x100.jpg 150w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400; color: #333333;\">Basic functional buttons are placed at 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), and the number of tasks and days in Upper Streak are presented in the uppercase font, supporting both efficient <a href=\"https:\/\/blog.tubikstudio.com\/visual-hierarchy-effective-ui-content-organization\/\">visual hierarchy<\/a> of the layout elements and the harmonic consistency in combination with the product brand name.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9230\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks.jpg\" alt=\"Upper App to do list tasks\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><b>Upper Streak:\u00a0<\/b>The original feature of the Upper App is user motivation with the 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&#8217;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 a bigger number of tasks, so users are motivated to get organized and complete the plans with Upper without missing a day.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8050\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-3.jpg\" alt=\"Upper-App-to-do-list-3\" width=\"2000\" height=\"1334\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-3.jpg 2000w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-3-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-3-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-3-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Upper-App-to-do-list-3-150x100.jpg 150w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<p><span style=\"color: #333333;\"><b>Color and style:\u00a0<\/b>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 a variety of skins and can choose between dark, light, and red skin depending on their personal tastes and wishes. At the moment, the app is presented in dark skin, but the next update coming very soon will enable you to activate any of the three palettes.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8202\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme.jpg\" alt=\"Upper App to-do list color theme\" width=\"1024\" height=\"682\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme-150x100.jpg 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"color: #333333;\">User-friendly navigation, supported with slight eye-pleasing animation, will help users to focus on their tasks. \u00a0No ads, no complications, no extra copy, interface motivating to create short concise notes for the tasks \u2013 nothing will distract from the goals. The application provides a simple calendar, allows saving notes conveniently, checking stats, and planning anything from everyday stuff to business objectives.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8120\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/upper_app_ui_design_tubik_studio.gif\" alt=\"upper app ui design_tubik_studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">To get more information on design and interactions, you can also review the full presentation of <a style=\"color: #333333;\" href=\"http:\/\/uppertodo.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Upper App<\/a> design or check the full pack of the details via Upper\u00a0<a style=\"color: #333333;\" href=\"https:\/\/www.dropbox.com\/sh\/hpxlrhcwj80jybw\/AADmpUimGzyavh2Zld_YQIXTa?dl=0\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Press Kit<\/a>.\u00a0<\/span><\/p>\n<h2>Recommended reading<\/h2>\n<p>If you\u00a0are interested to see more practical case studies with creative flows for\u00a0UI\/UX\u00a0design, here is the set of them.<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-watering-tracker-ui-design-for-home-needs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Watering Tracker. UI for Home Needs<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-home-budget-app-ui-for-finance\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Budget App. UI for Finance<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-night-in-berlin-ui-for-event-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Night in Berlin. UI for Event App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-big-city-guide-landing-page-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Big City Guide. Landing Page Design<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vinny\u2019s Bakery. UI Design for E-Commerce<\/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<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-health-care-app-ui-for-doctors\/\" target=\"_blank\" rel=\"noopener noreferrer\">Health Care App. UI for Doctors<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-wedding-planner-ui-design-concept\/\" target=\"_blank\" rel=\"noopener noreferrer\">Wedding Planner. UI Design Concept<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-alarm-app-ui-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Toonie Alarm. Mobile App UI Design<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/swiftybeaver-ux-ui-design-for-mac-application\/\" target=\"_blank\" rel=\"noopener noreferrer\">SwiftyBeaver. UX\/UI Design for a Mac Application<\/a><\/p>\n<hr \/>\n<p><span style=\"color: #333333;\"><em>Welcome to see the full presentation on <a style=\"color: #333333;\" href=\"https:\/\/www.producthunt.com\/posts\/upper-app\" target=\"_blank\" rel=\"noopener noreferrer\">Product Hunt<\/a><\/em><\/span><\/p>\n<p><span style=\"color: #333333;\"><em>Welcome to download <a style=\"color: #333333;\" href=\"https:\/\/itunes.apple.com\/ua\/app\/upper-app\/id1162733974?mt=8\" target=\"_blank\" rel=\"noopener noreferrer\">Upper App via App Store<\/a><\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The case study about UI design created by Tubik Studio team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.<\/p>\n","protected":false},"author":3,"featured_media":9517,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,7,9],"tags":[100,331,483,101,336,485,102,365,486,108,371,489,138,438,491,147,440,493,212,447,502,233,457,504,237,458,505,255,463,507,256,464,264,465,283,467,16,319,468,20,323,479,57,329,482],"coauthors":[],"class_list":["post-2617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-processes_and_tools","category-ui_ux","tag-design","tag-mobile-ui","tag-user-experience-article","tag-design-agency","tag-motion-design","tag-user-experience-design","tag-design-article","tag-product-design","tag-user-experience-design-article","tag-design-case-study","tag-productivity","tag-user-experience-examples","tag-design-process","tag-to-do-list","tag-user-interface","tag-design-studio","tag-tubik","tag-user-interface-design-process","tag-graphic-design","tag-tubik-studio","tag-ux","tag-human-computer-interaction","tag-ui","tag-ux-design-article","tag-icons","tag-ui-animation","tag-ux-design-best-practices","tag-interaction","tag-ui-design-article","tag-ux-design-examples","tag-interaction-design","tag-ui-design-case-study","tag-interface-navigation","tag-ui-design-examples","tag-iphone","tag-ui-design-practices","tag-animation","tag-mobile-app","tag-ui-design-process","tag-app-design","tag-mobile-design-article","tag-usability","tag-case-study","tag-mobile-screens","tag-user-experience"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Upper App. UI Design for To-Do List<\/title>\n<meta name=\"description\" content=\"The case study about UI design created by Tubik Studio team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.\" \/>\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-upper-app-ui-design-for-to-do-list\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Upper App. UI Design for To-Do List\" \/>\n<meta property=\"og:description\" content=\"The case study about UI design created by Tubik Studio team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-31T15:40:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T08:22:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1333\" \/>\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=\"5 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-upper-app-ui-design-for-to-do-list\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/\",\"name\":\"Case Study: Upper App. UI Design for To-Do List\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg\",\"datePublished\":\"2017-01-31T15:40:28+00:00\",\"dateModified\":\"2023-08-15T08:22:27+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The case study about UI design created by Tubik Studio team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg\",\"width\":2000,\"height\":1333,\"caption\":\"upper app UI design case study-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Upper App. UI Design for To-Do List\"}]},{\"@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: Upper App. UI Design for To-Do List","description":"The case study about UI design created by Tubik Studio team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.","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-upper-app-ui-design-for-to-do-list\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Upper App. UI Design for To-Do List","og_description":"The case study about UI design created by Tubik Studio team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-01-31T15:40:28+00:00","article_modified_time":"2023-08-15T08:22:27+00:00","og_image":[{"width":2000,"height":1333,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/","name":"Case Study: Upper App. UI Design for To-Do List","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg","datePublished":"2017-01-31T15:40:28+00:00","dateModified":"2023-08-15T08:22:27+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The case study about UI design created by Tubik Studio team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/upper-app-UI-design-case-study-1.jpg","width":2000,"height":1333,"caption":"upper app UI design case study-1"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-ui-design-for-to-do-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Upper App. UI Design for To-Do List"}]},{"@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\/2617","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=2617"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2617\/revisions"}],"predecessor-version":[{"id":14645,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2617\/revisions\/14645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/9517"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=2617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=2617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=2617"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}