{"id":13120,"date":"2022-11-03T23:45:38","date_gmt":"2022-11-03T23:45:38","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=13120"},"modified":"2025-10-24T11:26:59","modified_gmt":"2025-10-24T11:26:59","slug":"mobile-design-illustrations-educational-app","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/","title":{"rendered":"Case Study: Roebuck. Mobile Design and Illustrations for Educational App"},"content":{"rendered":"

Our new case study is full of playful vibes aimed at growing people’s knowledge. Welcome to check the creative process for Roebuck, the educational mobile app teaching and reinforcing survival knowledge in users interested in bushcraft and survivalist in an engaging and friendly way. Review the massive bunch of bright and cheerful illustrations, a funny mascot, and a user interface the tubik team made for the application.<\/p>\n

Client and Project<\/h2>\n

Roebuck<\/a> is an educational app that helps users memorize key survival skills. With it, users can complete courses on everything from the core bushcraft techniques of fire starting and shelter construction to helping to deliver a baby outside a hospital setting. It’s really up to a user how advanced they want their knowledge to become, but the world is becoming a dangerous place, and knowledge of survival best practices can’t hurt your situation.<\/p>\n

The client approached tubik intending to create a functional, attractive, and joyful user interface design for the application, and then the scope of work was also extended to creating a diverse and consistent pack of illustrations and icons for the educational goals the application covers.<\/p>\n

The creative team from the tubik side included Anton Morozov, Olya Bazyaeva, Marina Solomennykova, Kirill Erokhin, and Anastasia Ostapenko.<\/p>\n

\"roebuck<\/p>\n

Design Process and Solutions<\/h2>\n

Let’s start with observing the wide variety of graphic materials created for the Roebuck app.<\/p>\n

Here’s a look at the vast consistent set of small icon-like illustrations for the application, visualizing a wide diversity of tools, objects, situations, and associations for the theme of survival skills to mark players’ achievements and illustrate things.<\/p>\n

\"icons<\/p>\n

\"icons<\/p>\n

\"icons<\/p>\n

\"icons<\/p>\n

Another direction was to develop a collection of illustrations featuring people and united with the cross-cutting character of a friendly and experienced survivor. This character accompanies the users across all the educational modules and grows with them in the process of knowledge consolidation as well as supports app communication with the users.<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

Also, we worked on a vast collection of images illustrating various objects of the natural environment, such as animals, fish, plants, etc. Here’s a glance at some of them, bright, neat, clear, but not over-detailed, already packed in a design system with typographic solutions for descriptions and other textual content.<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

Also, there was a vast and diverse pack of images illustrating situations that may arise in different environments and require specific knowledge or skills to survive. They supported the knowledge modules and enhanced understanding of the presented information.<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

The illustrative material, in most cases, needed text hints, explanations, and directions integrated into images. So, the united design system and typographic approach were developed to keep the diversity of screens and images consistent. So, the app users can enjoy many tutorials and schemes packed in one recognizable visual style.<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

The user interface for the mobile application performs in a bright, playful style with straightforward and intuitive navigation. The color palette is based on warm, earthy, and natural colors, with a lot of sunny orange to set the positive and energetic mood.<\/p>\n

Here’s a look at how the mascot<\/a> is used across the application to support gamification mechanics: it starts from a cute baby and grows into an experienced and well-prepared survivor together with the users taking lessons and expanding their knowledge.<\/p>\n

\"roebuck<\/p>\n

The application consists of educational modules with well-arranged and illustrated content on specific topics and a test that helps users to check their knowledge. Here’s how the illustrations shown above work in the interface as a part of an educational module and an element of gamification marking users’ achievements with cool and funny badges.<\/p>\n

\"case<\/p>\n

Here’s a glance at the airy and uncluttered quiz screens focused on intuitiveness, simplicity, and readability to make the process of knowledge checking feel easy-breezy for users.<\/p>\n

\"roebuck<\/p>\n

And here are the screens that show users’ progress and motivate them to go further.<\/p>\n

\"roebuck<\/p>\n

After some time following the app release and usage, the client got back to us to get more graphics needed for the new chapter of the application. Here’s a glance at some of them.<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

\"roebuck<\/p>\n

The design process for Roebuck mobile application was a great chance for our team to participate in creating a product of high educational value, helping people improve and reinforce critical and vital knowledge in a cheerful and engaging way.<\/p>\n

New design case studies from our team are coming soon. Stay tuned!<\/p>\n

More Design Case Studies<\/h2>\n

Here\u2019s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.<\/p>\n

Kaiten. Identity and Product Design for Food Marketplace<\/a><\/p>\n

Glup. Delivery App Branding and UX Design<\/a><\/p>\n

THT. Website Design for Electrical Engineering Service<\/a><\/p>\n

Komuso. Website Design for Wellness Tool<\/a><\/p>\n

PointZero25. Identity and Website Design for Event Agency<\/a><\/p>\n

Nonconventional Show. Website Design for Podcast<\/a><\/p>\n

uMake. Branding and Website for 3D Design Tool<\/a><\/p>\n

BEGG. Brand Packaging and Web Design for Food Product Ecommerce<\/a><\/p>\n

Crezco. Brand Identity and UI\/UX Design for Fintech Service<\/a><\/p>\n

FarmSense. Identity and Web Design for Agricultural Technology<\/a><\/p>\n

Carricare. Identity and UX Design for Safe Delivery Service<\/a><\/p>\n

OOP. Brand Identity Design for Online Flea Market<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

The creative process for Roebuck, the educational mobile app reinforcing survival knowledge: check a massive bunch of bright illustrations, a funny mascot, and a user interface design.<\/p>\n","protected":false},"author":3,"featured_media":13287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,6,9],"tags":[147,440,170,447,177,457,178,468,204,469,212,479,237,482,248,485,256,487,313,489,318,491,319,502,322,504,20,331,515,100,332,569,138,365,604],"coauthors":[],"class_list":["post-13120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-illustration","category-ui_ux","tag-design-studio","tag-tubik","tag-digital-illustration","tag-tubik-studio","tag-education","tag-ui","tag-educational-app","tag-ui-design-process","tag-gamification","tag-ui-design-tips","tag-graphic-design","tag-usability","tag-icons","tag-user-experience","tag-illustration","tag-user-experience-design","tag-interaction-design","tag-user-experience-design-process","tag-mascot-design","tag-user-experience-examples","tag-mobile","tag-user-interface","tag-mobile-app","tag-ux","tag-mobile-design","tag-ux-design-article","tag-app-design","tag-mobile-ui","tag-uxui","tag-design","tag-mobile-user-interface","tag-2d-illustration","tag-design-process","tag-product-design","tag-game-illustration"],"acf":[],"yoast_head":"\nCase Study: Roebuck. Mobile Design and Illustrations for Educational App<\/title>\n<meta name=\"description\" content=\"Creative process by tubik for Roebuck, the educational mobile app reinforcing survival knowledge: bright illustrations, funny mascot, and user interface 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\/mobile-design-illustrations-educational-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Roebuck. Mobile Design and Illustrations for Educational App\" \/>\n<meta property=\"og:description\" content=\"Creative process by tubik for Roebuck, the educational mobile app reinforcing survival knowledge: bright illustrations, funny mascot, and user interface design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T23:45:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-24T11:26:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\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\/mobile-design-illustrations-educational-app\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/\",\"name\":\"Case Study: Roebuck. Mobile Design and Illustrations for Educational App\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.jpg\",\"datePublished\":\"2022-11-03T23:45:38+00:00\",\"dateModified\":\"2025-10-24T11:26:59+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"Creative process by tubik for Roebuck, the educational mobile app reinforcing survival knowledge: bright illustrations, funny mascot, and user interface design.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.jpg\",\"width\":1600,\"height\":1200,\"caption\":\"Case Study Mobile Design Illustrations Educational App tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Roebuck. Mobile Design and Illustrations for Educational App\"}]},{\"@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: Roebuck. Mobile Design and Illustrations for Educational App","description":"Creative process by tubik for Roebuck, the educational mobile app reinforcing survival knowledge: bright illustrations, funny mascot, and user interface 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\/mobile-design-illustrations-educational-app\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Roebuck. Mobile Design and Illustrations for Educational App","og_description":"Creative process by tubik for Roebuck, the educational mobile app reinforcing survival knowledge: bright illustrations, funny mascot, and user interface design.","og_url":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2022-11-03T23:45:38+00:00","article_modified_time":"2025-10-24T11:26:59+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.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\/mobile-design-illustrations-educational-app\/","url":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/","name":"Case Study: Roebuck. Mobile Design and Illustrations for Educational App","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.jpg","datePublished":"2022-11-03T23:45:38+00:00","dateModified":"2025-10-24T11:26:59+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"Creative process by tubik for Roebuck, the educational mobile app reinforcing survival knowledge: bright illustrations, funny mascot, and user interface design.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/11\/Case-Study-Mobile-Design-Illustrations-Educational-App-tubik.jpg","width":1600,"height":1200,"caption":"Case Study Mobile Design Illustrations Educational App tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/mobile-design-illustrations-educational-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Roebuck. Mobile Design and Illustrations for Educational App"}]},{"@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\/13120","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=13120"}],"version-history":[{"count":15,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/13120\/revisions"}],"predecessor-version":[{"id":15760,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/13120\/revisions\/15760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/13287"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=13120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=13120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=13120"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=13120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}