{"id":4983,"date":"2018-05-25T17:26:28","date_gmt":"2018-05-25T14:26:28","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4977"},"modified":"2023-10-11T12:13:29","modified_gmt":"2023-10-11T12:13:29","slug":"case-study-slumber-mobile-ui-design-for-healthy-sleeping","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/","title":{"rendered":"Case Study: Slumber. Mobile UI Design for Healthy Sleeping"},"content":{"rendered":"<p><span style=\"color: #333333;\">More and more mobile apps provide great help for users caring about their health. Fitness apps and trackers, calorie calculators, water and food diaries, activity reminders &#8211; today we find numerous apps that can help us day by day to keep fit and feel good. Today we want to share a UI design case study on another product from this area &#8211; a mobile application <a style=\"color: #333333;\" href=\"http:\/\/slumber.fm\/\" rel=\"nofollow noreferrer\">Slumber<\/a> helping people sleep better. The project was assigned to our lead UI\/UX designer Ernest Asanov whom you may remember from the case studies on <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\">Vinny&#8217;s Bakery<\/a>\u00a0and <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-home-budget-app-ui-for-finance\/\">Home Budget<\/a> design.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9515\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg\" alt=\"case study mobile app design-tubik-blog\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Project<\/span><\/h2>\n<p><span style=\"color: #333333;\">UI design for a mobile application helping users sleep well.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Process<\/span><\/h2>\n<p><span style=\"color: #333333;\">Slumber is a collection of stories and meditations for people that suffer from sleep or relax problems. The collection of slumber tracks is made to help users relax and sleep well\u00a0through the night. The major tasks for the interface designer were:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">clear and intuitive navigation: users of such an app want to relax rather than spend hours surfing from one screen to another<\/span><\/li>\n<li><span style=\"color: #333333;\">stylish visual performance of graphics setting the appropriate mood and atmosphere<\/span><\/li>\n<li><span style=\"color: #333333;\">high <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">readability<\/a> and engaging <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">animation<\/a> to support easy interactions.<\/span><\/li>\n<\/ul>\n<h3><span style=\"color: #333333;\">Home Screen<\/span><\/h3>\n<p><span style=\"color: #333333;\">As for the choice of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/color-matters-6-tips-on-choosing-ui-colors\/\">colors<\/a>\u00a0and <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/light-or-dark-ui-tips-choose-proper-color-scheme\/\">background<\/a>,\u00a0 the mobile user interface is designed in accordance with app functionality: it is based on the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/dark-side-of-ui-benefits-of-dark-background\/\">dark color palette<\/a> to transfer the atmosphere of the night and subdued lighting. The screens also feature corresponding graphics that look deep and stylish with dark skin.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7629\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-ui-design.jpg\" alt=\"slumber app ui design\" width=\"800\" height=\"630\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-ui-design.jpg 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-ui-design-300x236.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-ui-design-768x605.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-ui-design-150x118.jpg 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">The home\u00a0screen featured new episodes and popular playlists. The tab bar linked the user to the core functionality zones of the app: home page, library, and profile. As the target audience of the application was quite broad and some users could be of the low or medium level of tech-literacy, the designer <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/visual-perception-icons-vs-copy-in-ui\/\">supported the icons with labels<\/a> to make navigation clear for everyone.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7628\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/Slumber_app_ui_design_tubik.png\" alt=\"slumber app mobile ui design tubik\" width=\"1200\" height=\"876\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/Slumber_app_ui_design_tubik.png 1200w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/Slumber_app_ui_design_tubik-300x219.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/Slumber_app_ui_design_tubik-768x561.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/Slumber_app_ui_design_tubik-1024x748.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/Slumber_app_ui_design_tubik-150x110.png 150w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"color: #333333;\">Another nice and catchy point of the screen was a <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/how-to-create-original-flat-illustrations-designers-tips\/\">custom illustration<\/a> that was animated together with a preloader and made the process of waiting not boring and aesthetically appealing.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7671\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/slumber-app-ui-animation.gif\" alt=\"slumber app ui animation\" width=\"800\" height=\"600\" \/><\/p>\n<h3><span style=\"color: #333333;\">Slumber Library<\/span><\/h3>\n<p><span style=\"color: #333333;\">The app library offered a big collection of relaxing tracks to choose from. To make the process of list skimming quick, each item was supported with a proper theme image.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7630\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/mobile-app-ui-for-sleeping.jpg\" alt=\"mobile app ui for sleeping\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/mobile-app-ui-for-sleeping.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/mobile-app-ui-for-sleeping-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/mobile-app-ui-for-sleeping-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/mobile-app-ui-for-sleeping-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/mobile-app-ui-for-sleeping-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p><span style=\"color: #333333;\">The simple and clear system of filters allows a user to choose the most comforting settings and sound combinations to perfect the experience of meditation or sleep. Tuning background effects, users create personalized sounding. The background image is a consistent element that never disappears in the process of listening and tuning the sound this way uniting all the screens.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7625\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-mobile-ui-design-tubik.png\" alt=\"slumber app mobile ui design tubik\" width=\"1200\" height=\"486\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-mobile-ui-design-tubik.png 1200w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-mobile-ui-design-tubik-300x122.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-mobile-ui-design-tubik-768x311.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-mobile-ui-design-tubik-1024x415.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-mobile-ui-design-tubik-150x61.png 150w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"color: #333333;\">Unobtrusive <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">animation<\/a> adds style and natural looks to the interface in the process of transitions. The choice of fonts is based on high readability and clear typographic hierarchy so that users could scan the screen in short seconds.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8908\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/10\/slumber-app-interactions-ui-animation-design.gif\" alt=\"slumber app interactions ui animation design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">High-quality images used for every item of huge Slumber Library create elegant visual support and set the necessary atmosphere for a harmonic combination of what users see and what they hear.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7627\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-library-ui-design.png\" alt=\"slumber app mobile ui design tubik\" width=\"1200\" height=\"656\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-library-ui-design.png 1200w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-library-ui-design-300x164.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-library-ui-design-768x420.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-library-ui-design-1024x560.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-library-ui-design-150x82.png 150w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3><span style=\"color: #333333;\">Profile Screen<\/span><\/h3>\n<p><span style=\"color: #333333;\">The informative profile screen showed the user all the key information about streaks and sessions. It also enabled to set bedtime reminders, get Sleep Headphones and move to the settings screen to tune Slumber as needed. Pricing screen showed how users can reach Premium mode. Again, the UI design was based on dark color with brightly colored accents that immediately attracted users&#8217; attention to the key elements of the layout.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7626\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-profile.png\" alt=\"slumber app mobile ui design tubik\" width=\"1200\" height=\"872\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-profile.png 1200w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-profile-300x218.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-profile-768x558.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-profile-1024x744.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-app-profile-150x109.png 150w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"color: #333333;\">This project was an interesting challenge,\u00a0requiring the well-thought balance of clear and accessible functionality and stylish visual concept corresponding to the theme of healthy sleeping.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7631\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-profile-screens-design.jpg\" alt=\"slumber profile screens design\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-profile-screens-design.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-profile-screens-design-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-profile-screens-design-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-profile-screens-design-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/slumber-profile-screens-design-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Useful Case Studies<\/span><\/h2>\n<p><span style=\"color: #333333;\">If you\u00a0are interested to see more practical case studies with creative flows for mobile UI design, here is the set of them from Tubik.<\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-letter-bounce-ui-design-for-a-mobile-game\/\">Letter Bounce. UI Design for Mobile Game<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" 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><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-real-racing-graphic-design-for-mobile-game\/\">Real Racing. Graphic Design for Mobile Game<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-manuva-uiux-design-gym-fitness-app\/\">Manuva. UI\/UX Design for Gym Fitness App<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-cuteen-uiux-design-for-mobile-photo-editor\/\">Cuteen. UI\/UX Design for Mobile Photo Editor<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-tasty-burger-ui-design-for-food-ordering-app\/\">Tasty Burger.UI Design for Food Ordering App<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-watering-tracker-ui-design-for-home-needs\/\">Watering Tracker. UI Design for Home Needs<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-night-in-berlin-ui-for-event-app\/\">Night in Berlin. UI for Event App<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\">Upper App. UI Design for To-Do List<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-alarm-app-ui-design\/\">Toonie Alarm. Mobile App UI Design<\/a><\/span><\/p>\n<hr \/>\n<p><span style=\"color: #333333;\"><em>Review the detailed project in the\u00a0<a style=\"color: #333333;\" href=\"https:\/\/tubikstudio.com\/works\/slumber\" rel=\"nofollow noreferrer\">interactive case study<\/a>\u00a0or\u00a0<a style=\"color: #333333;\" href=\"https:\/\/www.behance.net\/gallery\/64118713\/Mobile-User-Interface-Design-Slumber-App\" rel=\"nofollow noreferrer\">Behance Presentation<\/a><\/em><\/span><\/p>\n<p><span style=\"color: #333333;\"><em>Check\u00a0<a style=\"color: #333333;\" href=\"http:\/\/slumber.fm\/\" rel=\"nofollow noreferrer\">Slumber<\/a>\u00a0on AppStore<\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The case study shares the mobile UI design solutions created for Slumber, an app helping users to sleep healthily: interface navigation, custom graphic and motion design.<\/p>\n","protected":false},"author":3,"featured_media":9515,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,4,9],"tags":[331,16,332,20,336,57,447,100,464,107,468,126,479,144,482,147,502,212,504,223,515,224,622,248,623,256,319,324],"coauthors":[],"class_list":["post-4983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-case_study","category-ui_ux","tag-mobile-ui","tag-animation","tag-mobile-user-interface","tag-app-design","tag-motion-design","tag-case-study","tag-tubik-studio","tag-design","tag-ui-design-case-study","tag-design-career","tag-ui-design-process","tag-design-for-health","tag-usability","tag-design-services","tag-user-experience","tag-design-studio","tag-ux","tag-graphic-design","tag-ux-design-article","tag-health","tag-uxui","tag-healthcare-app","tag-healthcare","tag-illustration","tag-healthtech","tag-interaction-design","tag-mobile-app","tag-mobile-design-inspiration"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Slumber. Mobile UI Design for Healthy Sleeping<\/title>\n<meta name=\"description\" content=\"The case study shares the mobile UI design solutions created for Slumber, an app helping users to sleep healthily: interface navigation, custom graphic and motion design.\" \/>\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-slumber-mobile-ui-design-for-healthy-sleeping\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Slumber. Mobile UI Design for Healthy Sleeping\" \/>\n<meta property=\"og:description\" content=\"The case study shares the mobile UI design solutions created for Slumber, an app helping users to sleep healthily: interface navigation, custom graphic and motion design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-25T14:26:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T12:13:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\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=\"4 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-slumber-mobile-ui-design-for-healthy-sleeping\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/\",\"name\":\"Case Study: Slumber. Mobile UI Design for Healthy Sleeping\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg\",\"datePublished\":\"2018-05-25T14:26:28+00:00\",\"dateModified\":\"2023-10-11T12:13:29+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The case study shares the mobile UI design solutions created for Slumber, an app helping users to sleep healthily: interface navigation, custom graphic and motion design.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg\",\"width\":1500,\"height\":1000,\"caption\":\"case study mobile app design-tubik-blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Slumber. Mobile UI Design for Healthy Sleeping\"}]},{\"@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: Slumber. Mobile UI Design for Healthy Sleeping","description":"The case study shares the mobile UI design solutions created for Slumber, an app helping users to sleep healthily: interface navigation, custom graphic and motion design.","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-slumber-mobile-ui-design-for-healthy-sleeping\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Slumber. Mobile UI Design for Healthy Sleeping","og_description":"The case study shares the mobile UI design solutions created for Slumber, an app helping users to sleep healthily: interface navigation, custom graphic and motion design.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-05-25T14:26:28+00:00","article_modified_time":"2023-10-11T12:13:29+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/","name":"Case Study: Slumber. Mobile UI Design for Healthy Sleeping","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg","datePublished":"2018-05-25T14:26:28+00:00","dateModified":"2023-10-11T12:13:29+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The case study shares the mobile UI design solutions created for Slumber, an app helping users to sleep healthily: interface navigation, custom graphic and motion design.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/06\/case-study-mobile-app-design-tubik-blog.jpg","width":1500,"height":1000,"caption":"case study mobile app design-tubik-blog"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Slumber. Mobile UI Design for Healthy Sleeping"}]},{"@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\/4983","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=4983"}],"version-history":[{"count":5,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4983\/revisions"}],"predecessor-version":[{"id":14453,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4983\/revisions\/14453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/9515"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4983"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}