{"id":4388,"date":"2018-02-22T16:51:08","date_gmt":"2018-02-22T13:51:08","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4388"},"modified":"2023-07-24T11:51:52","modified_gmt":"2023-07-24T11:51:52","slug":"case-study-manuva-uiux-design-gym-fitness-app","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/","title":{"rendered":"Case Study: Manuva. UI\/UX Design for Gym Fitness App"},"content":{"rendered":"

The mobile app industry is one of the biggest in the digital market. There is no surprise, since many businesses both small and big aim at creating their own mobile app. A powerful application can help to set connection with potential customers as well as bring new solutions to enhance services.<\/span><\/p>\n

UI and UX design is vital for app performance. Every year people\u2019s expectations about mobile applications grow. They want a mobile app to be fast and easy to use due to the delightful interaction and navigation systems. Moreover, UI design should be appealing and original so that an app could catch users\u2019 interest, make them stay and discover the functionality. Today, we share a case study showing the creative process of UI and UX design for a fitness app. A designer assigned to this project was Tania Bashkatova.<\/span><\/p>\n

\"tubik<\/p>\n

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

UI and UX design for a mobile gym fitness app.<\/span><\/p>\n

 <\/p>\n

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

The client was the Manuva Group company from South Africa. They made a request to design a new product called Manuva \u2014 a mobile application for fitness professionals and gym members. The app was aimed at helping people to find personal trainers in various gyms and book a session without being a member of a particular gym. Users would be able to browse for nearest available trainers, gyms, or group classes via a map or a list sorted by distance and closest start time. Moreover, the app could be useful for fitness instructors as a tool for managing clients. The specific feature of the Manuva app was expected to have an in-app payment for a session.<\/span><\/p>\n

Manuva Group wanted the design for their app to be dynamic and youthful supported with original user onboarding<\/a> tutorials. In addition, they asked to pay attention to the navigation so that users could find trainer connections fast and without efforts.<\/span><\/p>\n

 <\/p>\n

UX Design<\/span><\/h2>\n

When all the requests were considered, the designer went to the stage of wireframing<\/a>. A wireframe is a simplified and schematic visual representation of a layout for app screens and transitions. It is a fast way to plan the information architecture and ensure that developers and clients get a clear understanding of the project structure. Furthermore, in case the client wants to make some changes, a wireframe is much easier to reshape.<\/span><\/p>\n

Here are the wireframes created for Manuva app. The designer planned the basic layout including login and home screens.<\/span><\/p>\n

\"user<\/p>\n

The client asked to include an original feature into a login user interface which would allow users to discover Manuva without registration. That\u2019s why the designer added a button \u201cDiscover Manuva\u201d right under the login button providing a choice for users. In addition, to make a profile more personalized the login process also contained a screen where people could choose their goals.<\/span><\/p>\n

\"user<\/p>\n

Home screen contained two sections: the list of fitness instructors and the map. This would help users to find trainers conveniently. Also, UI included a tab bar making navigation<\/a> in the app approachable and clear.<\/span><\/p>\n

All in all, the wireframing stage helped to outline the visual and typographic hierarchy of the Manuva user interface as well as set the interactive zones and elements and plan transitions and interactions.<\/span><\/p>\n

 <\/p>\n

UI Design<\/span><\/h2>\n

When the structure was approved, the designer started working on the presentation of the UI elements. One of the tasks was to find an effective color palette<\/a> for the interface. The thing is that color has a significant influence on our visual perception and the first impression of a product. Inappropriate colors may affect some of the usability aspects such as readability<\/a> of copy elements and user satisfaction. Moreover, it\u2019s important to consider the preferences of the target audience: people perceive colors differently depending on their age, gender, and culture.<\/span><\/p>\n

The designer provided the clients with several options so that they could see their app from different perspectives. There were examples with dark and light backgrounds as well as cold and warm color palettes. Let\u2019s see some of the suggested UI concepts.<\/span><\/p>\n

\"user<\/p>\n

\"user<\/p>\n

The client chose the UI concept with white background and two contrasting colors \u2014 blue and pink. They were expected to be major colors of user interface elements. Moreover, the blue tones corresponded to the colors applied in the Manuva logo which would contribute to better brand recognition. Here are the final UI designs of the fitness app.<\/span><\/p>\n

\"UI<\/p>\n

One of the registration screens offered users to choose their favorite sports directions which were followed by the images of sportspeople. Since the Manuva app was an African product, the client asked to apply the majority of photos featuring people of typical African appearance.<\/span><\/p>\n

\"UI<\/p>\n

To make the user interface look clear and original, the designer created a custom set of vector icons. Simple and aesthetic icons help users get quickly oriented in the navigation system of the app.<\/span><\/p>\n

 <\/p>\n

Custom Illustrations for Onboarding Tutorials<\/span><\/h2>\n

The clients also requested to pay attention to the design of onboarding tutorial<\/a> screens. Just to remind, tutorials appear to users who launch a mobile app for the first time helping them get oriented within unfamiliar features and controls. Onboarding tutorials usually contain short but clear info describing the benefits of the product which make it useful and engage the user to try it.<\/span><\/p>\n

To make the tutorial UI entertaining and captivating, the client and the designer agreed to add custom illustrations<\/a>. This task was given to graphic designer Marina Solomennikova. The illustrations were created in a flat style and the colors corresponded to the common color palette applied in UI. Let\u2019s see the result.<\/span><\/p>\n

\"Onboarding<\/p>\n

Summing up, no matter how many apps exist, there is a way to make yours stand out from the crowd. Innovative features, sufficient user experience, and pleasant UI design can be an effective foundation for a mobile application.<\/span><\/p>\n

\"case<\/p>\n

 <\/p>\n

More Case Studies<\/span><\/h2>\n

If you\u00a0are interested to see more practical case studies with creative flows for\u00a0UI\/UX\u00a0design, here is the set of them.<\/span><\/p>\n

Colony. Landing Page Design for Collaboration Platform<\/a><\/span><\/p>\n

Watering Tracker. UI Design for Home Needs<\/a><\/span><\/p>\n

UI Experiments: Options for Recipe Cards in a Food App<\/a><\/span><\/p>\n

Home Budget App. UI for Finance<\/a><\/span><\/p>\n

Night in Berlin. UI for Event App<\/a><\/span><\/p>\n

Big City Guide. Landing Page Design<\/a><\/span><\/p>\n

Vinny\u2019s Bakery. UI Design for E-Commerce<\/a><\/span><\/p>\n

Upper App. UI Design for To-Do List<\/a><\/span><\/p>\n

Health Care App. UI for Doctors<\/a><\/span><\/p>\n

Wedding Planner. UI Design Concept<\/a><\/span><\/p>\n

Toonie Alarm. Mobile App UI Design<\/a><\/span><\/p>\n

SwiftyBeaver. UX\/UI Design for a Mac Application<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

A practical case study presenting UI and UX design for a mobile gym fitness app: a convenient user interface with custom icons and original onboarding illustrations.<\/p>\n","protected":false},"author":3,"featured_media":10146,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,9],"tags":[332,457,464,475,479,482,20,487,57,492,129,502,189,557,220,248,256,264,319,329],"coauthors":[],"class_list":["post-4388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-ui_ux","tag-mobile-user-interface","tag-ui","tag-ui-design-case-study","tag-ui-for-sports","tag-usability","tag-user-experience","tag-app-design","tag-user-experience-design-process","tag-case-study","tag-user-interface-design","tag-design-for-sports","tag-ux","tag-fitness-app","tag-wireframing","tag-gym-fitness-app","tag-illustration","tag-interaction-design","tag-interface-navigation","tag-mobile-app","tag-mobile-screens"],"acf":[],"yoast_head":"\nCase Study: Manuva. UI\/UX Design for Gym Fitness App.<\/title>\n<meta name=\"description\" content=\"A practical case study presenting UI and UX design for a mobile gym fitness app: a convenient user interface with custom icons and original onboarding illustrations.\" \/>\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-manuva-uiux-design-gym-fitness-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Manuva. UI\/UX Design for Gym Fitness App.\" \/>\n<meta property=\"og:description\" content=\"A practical case study presenting UI and UX design for a mobile gym fitness app: a convenient user interface with custom icons and original onboarding illustrations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-22T13:51:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:51:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1340\" \/>\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-manuva-uiux-design-gym-fitness-app\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/\",\"name\":\"Case Study: Manuva. UI\/UX Design for Gym Fitness App.\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.jpg\",\"datePublished\":\"2018-02-22T13:51:08+00:00\",\"dateModified\":\"2023-07-24T11:51:52+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"A practical case study presenting UI and UX design for a mobile gym fitness app: a convenient user interface with custom icons and original onboarding illustrations.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.jpg\",\"width\":2000,\"height\":1340,\"caption\":\"case study fitness app tubik-blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Manuva. UI\/UX Design for Gym Fitness 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: Manuva. UI\/UX Design for Gym Fitness App.","description":"A practical case study presenting UI and UX design for a mobile gym fitness app: a convenient user interface with custom icons and original onboarding illustrations.","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-manuva-uiux-design-gym-fitness-app\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Manuva. UI\/UX Design for Gym Fitness App.","og_description":"A practical case study presenting UI and UX design for a mobile gym fitness app: a convenient user interface with custom icons and original onboarding illustrations.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-02-22T13:51:08+00:00","article_modified_time":"2023-07-24T11:51:52+00:00","og_image":[{"width":2000,"height":1340,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.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-manuva-uiux-design-gym-fitness-app\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/","name":"Case Study: Manuva. UI\/UX Design for Gym Fitness App.","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.jpg","datePublished":"2018-02-22T13:51:08+00:00","dateModified":"2023-07-24T11:51:52+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"A practical case study presenting UI and UX design for a mobile gym fitness app: a convenient user interface with custom icons and original onboarding illustrations.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/case-study-fitness-app-tubik-blog.jpg","width":2000,"height":1340,"caption":"case study fitness app tubik-blog"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-manuva-uiux-design-gym-fitness-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Manuva. UI\/UX Design for Gym Fitness 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\/4388","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=4388"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4388\/revisions"}],"predecessor-version":[{"id":14476,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4388\/revisions\/14476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/10146"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4388"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}