11{"id":25557,"date":"2024-08-28T12:26:07","date_gmt":"2024-08-28T12:26:07","guid":{"rendered":"https:\/\/www.purrweb.com\/blog\/?p=25557"},"modified":"2024-08-28T12:26:07","modified_gmt":"2024-08-28T12:26:07","slug":"soak-case","status":"publish","type":"post","link":"https:\/\/www.purrweb.com\/blog\/soak-case\/","title":{"rendered":"What to Consider in App Design to Avoid Problems Later in the Development. SOAK Case"},"content":{"rendered":"<p><b>Disclaimer: The text mentions products related to nicotine use. We do not encourage you to smoke and remind you that smoking any nicotine products is harmful to your health.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">We usually build MVPs from scratch, but sometimes, customers come to us with their own developments. This was the case with SOAK \u2014 they came to us with a ready-made design, but the layout was missing important details.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, we will do a little dive into the customer\u2019s business and their request. This will help you understand everything we will talk about later.<\/span><\/p>\n<h2>Context: developing an app for e-cigarette sellers<\/h2>\n<p><span style=\"font-weight: 400;\">Our task was to create an app for SOAK distributors. They display electronic cigarettes and POD vape devices in their stores and consult customers on models and flavors.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to the client\u2019s idea, the app should help sellers better understand the world of e-cigarettes \u2014 they complete tasks, get prizes for correct answers, and thus, increase their knowledge about the product.<\/span><\/p>\n<div id=\"attachment_25565\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1.png\"><img aria-describedby=\"caption-attachment-25565\" decoding=\"async\" class=\"size-full wp-image-25565\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1.png\" alt=\"Application with gamification elements\" width=\"1584\" height=\"2072\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1-229x300.png 229w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1-783x1024.png 783w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1-768x1005.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1-1174x1536.png 1174w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/1-1-1-1566x2048.png 1566w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25565\" class=\"wp-caption-text\">App with gamification elements: sellers take a quiz about e-cigarettes and get prizes for correct answers<\/p><\/div>\n<h5 style=\"text-align: center;\"><b>The app was designed by a SOAK in-house designer. They just asked us to help them with the development. But when we immersed ourselves in the task, we realized the layouts needed refinement, otherwise there might be difficulties in the development stage.<\/b><\/h5>\n<p><span style=\"font-weight: 400;\">By the way, not long ago we told you about the development of a PWA application for Plonq, an e-cigarette manufacturer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this project, we helped the client\u2019s in-house team solve all the development challenges and create an app for people who want to quit smoking. Read how we took on a burning task and literally became the client\u2019s \u201chands\u201d in <\/span><a href=\"https:\/\/www.purrweb.com\/blog\/how-we-made-an-app-for-those-who-want-to-quit-smoking\/\" target=\"_blank\"><span style=\"font-weight: 400;\">this case study<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n  <div class='universal__container'>\n\n  <picture class='universal__image-bg--mobile' >\n  <source srcset='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_mobile@2x.png 2x'>\n  <img src='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_mobile.png'>\n<\/picture>\n    <div class='universal__title' style='font-size:px;'>Want to develop a mobile app?<\/div>\n    <div class='universal__text' style='font-size: px;'>After 300+ completed projects, we can create an app in any niche \u2014 from FoodTech to marketplaces. Contact us and get a free project estimation in 48 hours.<\/div>\n    <a  class='universal__btn' href='#footer' style='font-size: px;'>Get an estimate<\/a>\n\n\n    <picture class='universal__image-bg'>\n  <source srcset='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_desktop@2x.png 2x'>\n  <img src='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_desktop.png'>\n<\/picture>\n\n\n    <svg class='universal__bg--mobile' width='479' height='284' viewBox='0 0 479 284' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'>\n      <circle cx='81.5' cy='202.5' r='81.5' fill='#D4FE7C'\/>\n      <circle cx='405.5' cy='73.5' r='73.5' fill='#D4FE7C'\/>\n      <circle cx='363.321' cy='195.321' r='5.00801' stroke='#3D3BFF' stroke-width='0.626002'\/>\n      <circle cx='166.13' cy='127.13' r='2.81701' stroke='#3D3BFF' stroke-width='0.626002'\/>\n    <\/svg>\n\n    <svg class='universal__bg' width='432' height='668' viewBox='0 0 432 668' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'>\n      <circle cx='207.5' cy='460.5' r='207.5' fill='#D4FE7C'\/>\n      <circle cx='322' cy='110' r='110' fill='#D4FE7C'\/>\n      <circle cx='143' cy='151' r='4' fill='#3D3BFF' stroke='#3D3BFF' stroke-width='2'\/>\n    <\/svg>\n\n  <\/div>\n\n<h2>5 things to consider in design to avoid problems in the development<\/h2>\n<p><span style=\"font-weight: 400;\">Here are the things that weren\u2019t originally in the design, but should definitely be included so you don\u2019t get stuck in a round of edits:<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: disc;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>UI kit.<\/b><span style=\"font-weight: 400;\"> Without this, developing and adding new scenarios can become a nightmare.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Store guidelines. <\/b><span style=\"font-weight: 400;\">App stores won\u2019t let you release apps without \u201cI agree to the privacy policy\u201d buttons and other not-so-obvious little things.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>User journey. <\/b><span style=\"font-weight: 400;\">Otherwise, a user may end up in a scenario that designers haven\u2019t rendered and get confused.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>UX patterns. <\/b><span style=\"font-weight: 400;\">These are established user habits, and their violation can discourage users from using the app.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Small screen adaptation. <\/b><span style=\"font-weight: 400;\">So that the design does not fall apart on older phones.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now, we\u2019ll tell you about all of this in order.<\/span><\/p>\n<div style=\"clear:both; margin-top:0em; margin-bottom:3em;\"><a href=\"https:\/\/www.purrweb.com\/blog\/how-much-does-it-cost-to-develop-an-app\/\" target=\"_blank\" rel=\"dofollow\" class=\"u8b3a41d129fd9edbd86a9eaeb03691da\"><style> .u8b3a41d129fd9edbd86a9eaeb03691da { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#FFFFFF; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .u8b3a41d129fd9edbd86a9eaeb03691da:active, .u8b3a41d129fd9edbd86a9eaeb03691da:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u8b3a41d129fd9edbd86a9eaeb03691da { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u8b3a41d129fd9edbd86a9eaeb03691da .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u8b3a41d129fd9edbd86a9eaeb03691da .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u8b3a41d129fd9edbd86a9eaeb03691da:hover .postTitle { text-decoration: underline!important; } <\/style><div style=\"padding-left:1em; padding-right:1em;\"><span class=\"ctaText\">\u0427\u0418\u0422\u0410\u0419\u0422\u0415 \u0422\u0410\u041a\u0416\u0415<\/span>&nbsp; <span class=\"postTitle\">How much does app development cost?<\/span><\/div><\/a><\/div>\n<h2>1. UI kit<\/h2>\n<p><span style=\"font-weight: 400;\">A UI kit is a set of components that make up an interface. It is found in almost every project related to digital products, from international banking apps to local online stores.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The kit contains the app\u2019s visual details. For example, what the buttons look like <\/span><span style=\"font-weight: 400;\">\u2014 <\/span><span style=\"font-weight: 400;\">their color and outline thickness. It also includes technical parameters for developers: button behavior, color code, and font size.<\/span><\/p>\n<div id=\"attachment_25566\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/2-1-1.png\"><img aria-describedby=\"caption-attachment-25566\" decoding=\"async\" class=\"size-full wp-image-25566\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/2-1-1.png\" alt=\"Elements of the UI kit for SOAK that we helped build\" width=\"1584\" height=\"1130\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/2-1-1.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/2-1-1-300x214.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/2-1-1-1024x731.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/2-1-1-768x548.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/2-1-1-1536x1096.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25566\" class=\"wp-caption-text\">Elements of the UI kit for SOAK that we helped build<\/p><\/div>\n<p><b>With the UI kit, the interface looks uniform and harmonious.<\/b><span style=\"font-weight: 400;\"> It ensures that the design on different screens is consistent \u2014 buttons have the same distance from the text, and logos have the same color.<\/span><\/p>\n<p><b>Without the UI kit, the design feels careless and \u201ccheap.\u201d<\/b><span style=\"font-weight: 400;\"> Also, development becomes more expensive \u2014 programmers will have to choose the parameters of design elements themselves to make the application. By the way, we have already described <\/span><a href=\"https:\/\/www.purrweb.com\/blog\/how-to-keep-design-tidy-and-homogenous-by-assembling-a-ui-kit\/\" target=\"_blank\"><span style=\"font-weight: 400;\">how to build a UI kit from scratch<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h5 style=\"text-align: center;\"><strong>When we started working on SOAK design, the application didn\u2019t have a UI kit. This made the product look heterogeneous.<\/strong><\/h5>\n<p><span style=\"font-weight: 400;\">For example, the same headings had different font sizes on various screens, and similar icons had different outline thicknesses. It was eye-catching and looked careless.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Compare: on the left is the screen created without the UI kit, and on the right is the finalized screen with a consistent design.<\/span><\/p>\n<div id=\"attachment_25567\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/3-8.png\"><img aria-describedby=\"caption-attachment-25567\" decoding=\"async\" class=\"size-full wp-image-25567\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/3-8.png\" alt=\"Design without and with the UI kit - comparison\" width=\"1584\" height=\"1422\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/3-8.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/3-8-300x269.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/3-8-1024x919.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/3-8-768x689.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/3-8-1536x1379.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25567\" class=\"wp-caption-text\">We helped build a UI kit from elements that the client already had. Without the kit, colors, sizes, and fonts have to be chosen by the developer. This is time-consuming and increases the risk of errors.<\/p><\/div>\n<h5 style=\"text-align: center;\"><strong>With the UI kit, it was easy to develop the application and create new screens as needed. And in the case of SOAK, they needed to be added.<\/strong><\/h5>\n<div style=\"clear:both; margin-top:0em; margin-bottom:3em;\"><a href=\"https:\/\/www.purrweb.com\/blog\/how-to-build-a-ui-kit-in-figma\/\" target=\"_blank\" rel=\"dofollow\" class=\"uc81020b98033e707e2493fd153c0d273\"><style> .uc81020b98033e707e2493fd153c0d273 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#FFFFFF; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .uc81020b98033e707e2493fd153c0d273:active, .uc81020b98033e707e2493fd153c0d273:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .uc81020b98033e707e2493fd153c0d273 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .uc81020b98033e707e2493fd153c0d273 .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .uc81020b98033e707e2493fd153c0d273 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .uc81020b98033e707e2493fd153c0d273:hover .postTitle { text-decoration: underline!important; } <\/style><div style=\"padding-left:1em; padding-right:1em;\"><span class=\"ctaText\">\u0427\u0418\u0422\u0410\u0419\u0422\u0415 \u0422\u0410\u041a\u0416\u0415<\/span>&nbsp; <span class=\"postTitle\">How to Build a UI Kit in Figma<\/span><\/div><\/a><\/div>\n<h2>2. User journey \u2014 states and screens<\/h2>\n<p><span style=\"font-weight: 400;\">At the beginning of every design project, we build the user journey. Business analysts describe in detail what the user can do in the app, where they can go, and what situations they will encounter.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The artifact of this stage is the user story map. Designers take this map, work their magic, and get a screen map, or UX map.<\/span><\/p>\n<h5 style=\"text-align: center;\"><strong>The UX map helps to work out the user\u2019s steps in the application. This way, you can immediately see what screens are needed.<\/strong><\/h5>\n<p><span style=\"font-weight: 400;\">The SOAK app design had problems with the user journey. <\/span><b>Here are the things that were missing \u2014 without them, users could easily get lost in the product:<\/b><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: disc;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Linking screens<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Edge case screens<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">button and screen states<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a closer look at them.<\/span><\/p>\n<p><b>Linking screens. <\/b><span style=\"font-weight: 400;\">They show that the app is loading, money has been sent to the card, and task points have been added to the account.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Without them, the user feels like the app is frozen and not working. Distributors can write to support more often, which results in additional load on the client resources and wasted time.<\/span><\/p>\n<div id=\"attachment_25569\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/4-1-1.png\"><img aria-describedby=\"caption-attachment-25569\" decoding=\"async\" class=\"size-full wp-image-25569\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/4-1-1.png\" alt=\"Add a success screen\" width=\"1584\" height=\"1374\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/4-1-1.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/4-1-1-300x260.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/4-1-1-1024x888.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/4-1-1-768x666.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/4-1-1-1536x1332.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25569\" class=\"wp-caption-text\">Added a success screen. If a user completes a task and doesn&#8217;t see this screen, they&#8217;ll think the app is glitching.<\/p><\/div>\n<p><span style=\"font-weight: 400;\">Another example is when registering, the user has to enter a phone number and confirm it with a code from an SMS \u2014 a standard scenario for many applications. However, in the layout for the registration flow, there was no screen with a field to enter the phone number and code. We added it.<\/span><\/p>\n<div id=\"attachment_25570\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/5-1-1.png\"><img aria-describedby=\"caption-attachment-25570\" decoding=\"async\" class=\"size-full wp-image-25570\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/5-1-1.png\" alt=\"Added the missing screen\" width=\"1584\" height=\"1534\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/5-1-1.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/5-1-1-300x291.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/5-1-1-1024x992.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/5-1-1-768x744.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/5-1-1-1536x1488.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25570\" class=\"wp-caption-text\">Added the missing screen<\/p><\/div>\n<p><b>Edge case screens. <\/b><span style=\"font-weight: 400;\">These are rare application usage scenarios, but they are important for a comfortable user experience. For example, in the SOAK app, a user had to enter a unique code to confirm the completion of a task. We had to consider that the user might enter incorrect data or try to send the same code repeatedly, and added warnings for different cases. Otherwise, the user would not understand what the problem was and would think that the application was \u201cbroken.\u201d<\/span><\/p>\n<div id=\"attachment_25571\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/6-3.png\"><img aria-describedby=\"caption-attachment-25571\" decoding=\"async\" class=\"size-full wp-image-25571\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/6-3.png\" alt=\"Entering incorrect data in the field \u2014 a common edge case that needs to be considered at the design stage\" width=\"1584\" height=\"1130\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/6-3.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/6-3-300x214.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/6-3-1024x731.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/6-3-768x548.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/6-3-1536x1096.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25571\" class=\"wp-caption-text\">Entering incorrect data in the field \u2014 a common edge case that needs to be considered at the design stage<\/p><\/div>\n<h5 style=\"text-align: center;\"><strong>Of course, these situations don&#8217;t always happen, but if you don&#8217;t consider them, you could lose a user.<\/strong><\/h5>\n<p><b>Button and screen states. <\/b><span style=\"font-weight: 400;\">These are the states of elements in different contexts. For example, how buttons react when you hold your finger on them, tap them, or leave them alone. If a button cannot be tapped, it must have a corresponding state. Without it, users will keep tapping the button without understanding what went wrong.<\/span><\/p>\n<div id=\"attachment_25572\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/7-1-1.png\"><img aria-describedby=\"caption-attachment-25572\" decoding=\"async\" class=\"size-full wp-image-25572\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/7-1-1.png\" alt=\"Added different states for buttons\" width=\"1584\" height=\"660\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/7-1-1.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/7-1-1-300x125.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/7-1-1-1024x427.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/7-1-1-768x320.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/7-1-1-1536x640.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25572\" class=\"wp-caption-text\">Added different states for buttons: normal state, inactive state, and after a tap<\/p><\/div>\n<p><span style=\"font-weight: 400;\">There were no error states in the SOAK design. If a user entered an invalid login or password in a field, the interface would display nothing &#8211; but it would not let the user proceed.<\/span><\/p>\n<div id=\"attachment_25573\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/8-3.png\"><img aria-describedby=\"caption-attachment-25573\" decoding=\"async\" class=\"size-full wp-image-25573\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/8-3.png\" alt=\"Notify the user when something goes wrong\" width=\"1584\" height=\"660\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/8-3.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/8-3-300x125.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/8-3-1024x427.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/8-3-768x320.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/8-3-1536x640.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25573\" class=\"wp-caption-text\">Notify the user when something goes wrong<\/p><\/div>\n<p><span style=\"font-weight: 400;\">The same applies to points. If a user tried to withdraw money and didn&#8217;t have enough points, the interface wouldn&#8217;t respond. It felt like the app had frozen. So we added a popup with a warning.<\/span><\/p>\n<p><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-25574\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1.png\" alt=\"Added a popup with a warning\" width=\"1584\" height=\"1580\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1-300x300.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1-1024x1021.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1-150x150.png 150w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1-768x766.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/9-1-1-1536x1532.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><\/p>\n<div style=\"clear:both; margin-top:0em; margin-bottom:3em;\"><a href=\"https:\/\/www.purrweb.com\/blog\/app-engagement-what-is-it-and-how-to-increase-it\/\" target=\"_blank\" rel=\"dofollow\" class=\"u6b2f993917b5dd5191701523efc7e808\"><style> .u6b2f993917b5dd5191701523efc7e808 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#FFFFFF; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .u6b2f993917b5dd5191701523efc7e808:active, .u6b2f993917b5dd5191701523efc7e808:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u6b2f993917b5dd5191701523efc7e808 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u6b2f993917b5dd5191701523efc7e808 .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u6b2f993917b5dd5191701523efc7e808 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u6b2f993917b5dd5191701523efc7e808:hover .postTitle { text-decoration: underline!important; } <\/style><div style=\"padding-left:1em; padding-right:1em;\"><span class=\"ctaText\">\u0427\u0418\u0422\u0410\u0419\u0422\u0415 \u0422\u0410\u041a\u0416\u0415<\/span>&nbsp; <span class=\"postTitle\">App engagement: best strategies to retain your audience<\/span><\/div><\/a><\/div>\n<h2>3. UX patterns<\/h2>\n<p>When designing apps, our team takes UX patterns into account \u2014 behavioral patterns that users follow. For example, the \u201cLaw of Proximity\u201d \u2014 elements located close to each other are perceived as a group. Or \u201cMiller&#8217;s Law\u201d \u2014 an average person can hold attention to 7 elements at the same time.<\/p>\n<h5 style=\"text-align: center;\"><strong>UX patterns make it easier to create an intuitive product. The more familiar scenarios an app has, the easier it is to understand it from scratch.<\/strong><\/h5>\n<p><span style=\"font-weight: 400;\">You can ignore the patterns and start making something of your own. But then, you have to hope that the user will figure it out on their own, or be willing to take the time to understand the product.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There were 3 distortions of UX patterns in the SOAK app:\u00a0<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: disc;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Headers look like buttons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Logical errors<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Icon colors don&#8217;t match their meanings<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>On some screens, headers looked like buttons.<\/b><span style=\"font-weight: 400;\"> Users could tap them out of habit &#8211; sitting and waiting for a section to open that didn&#8217;t exist.<\/span><\/p>\n<p><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/10-1-1.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-25576\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/10-1-1.png\" alt=\"Fixed the headings and made them look uniform\" width=\"1584\" height=\"1606\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/10-1-1.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/10-1-1-296x300.png 296w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/10-1-1-1010x1024.png 1010w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/10-1-1-768x779.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/10-1-1-1515x1536.png 1515w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><\/p>\n<p><b>Logical errors. <\/b><span style=\"font-weight: 400;\">For example, in the tests section, some questions require you to select an answer. The designer made the buttons for these options look like checkboxes instead of radio buttons.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With checkboxes, it seems like you have to select multiple answers when you should just click on one. And it feels like the app is glitching because it won&#8217;t let you choose the answer you want.<\/span><\/p>\n<div id=\"attachment_25577\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/11-3.png\"><img aria-describedby=\"caption-attachment-25577\" decoding=\"async\" class=\"size-full wp-image-25577\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/11-3.png\" alt=\"We got rid of logical errors in the UI\" width=\"1584\" height=\"1114\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/11-3.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/11-3-300x211.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/11-3-1024x720.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/11-3-768x540.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/11-3-1536x1080.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25577\" class=\"wp-caption-text\">We got rid of logical errors in the UI. Now, the user looks and immediately understands what to do.<\/p><\/div>\n<p>The colors of the icons did not correspond to their functions. For example, if a user answered correctly, the icon would light up red \u2014 it seemed like the user had done something wrong.<\/p>\n<div id=\"attachment_25578\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/12-3.png\"><img aria-describedby=\"caption-attachment-25578\" decoding=\"async\" class=\"size-full wp-image-25578\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/12-3.png\" alt=\"Fixed inconsistencies in the interface \u2014 everything looks logical and clear\" width=\"1584\" height=\"1630\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/12-3.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/12-3-292x300.png 292w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/12-3-995x1024.png 995w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/12-3-768x790.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/12-3-1493x1536.png 1493w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25578\" class=\"wp-caption-text\">Fixed inconsistencies in the interface \u2014 everything looks logical and clear<\/p><\/div>\n<p>We gathered all the problems with patterns, buttons, and screens we found and left them as comments in Figma. This made it easier for the client\u2019s designer to finalize the screens with states and bring the layouts to a unified look.<\/p>\n\n<h2>4. Store guidelines<\/h2>\n<p>For stores to approve the app, you need to work out the privacy policy and add the button.<\/p>\n<h5 style=\"text-align: center;\"><strong>Without the \u201cI agree with the privacy policy\u201d checkbox, you can\u2019t collect data. If it\u2019s not there, stores won&#8217;t allow the app to be published.<\/strong><\/h5>\n<p>The original design of SOAK did not consider the privacy policy thing. If you leave it as it is \u2014 don\u2019t say anything about it \u2014 the app will not pass the stores\u2019 moderation.<\/p>\n<div id=\"attachment_25580\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/13-3.png\"><img aria-describedby=\"caption-attachment-25580\" decoding=\"async\" class=\"size-full wp-image-25580\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/13-3.png\" alt=\"Added a data processing consent section. It was not in the client\u2019s design\" width=\"1584\" height=\"1540\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/13-3.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/13-3-300x292.png 300w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/13-3-1024x996.png 1024w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/13-3-768x747.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/13-3-1536x1493.png 1536w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25580\" class=\"wp-caption-text\">Added a data processing consent section. It was not in the client\u2019s design<\/p><\/div>\n\n  <div class='universal__container'>\n\n  <picture class='universal__image-bg--mobile' >\n  <source srcset='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_mobile@2x.png 2x'>\n  <img src='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_mobile.png'>\n<\/picture>\n    <div class='universal__title' style='font-size:px;'>Want to launch your app for POD vape devices?<\/div>\n    <div class='universal__text' style='font-size: px;'>We can build your MVP in 4 months and it\u2019ll cost you around $40,000. Contact us and get a free project estimation in 48 hours.<\/div>\n    <a  class='universal__btn' href='#footer' style='font-size: px;'>Get an estimation<\/a>\n\n\n    <picture class='universal__image-bg'>\n  <source srcset='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_desktop@2x.png 2x'>\n  <img src='https:\/\/www.purrweb.com\/blog\/wp-content\/plugins\/wp-purr-universal\/src\/rocket_desktop.png'>\n<\/picture>\n\n\n    <svg class='universal__bg--mobile' width='479' height='284' viewBox='0 0 479 284' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'>\n      <circle cx='81.5' cy='202.5' r='81.5' fill='#D4FE7C'\/>\n      <circle cx='405.5' cy='73.5' r='73.5' fill='#D4FE7C'\/>\n      <circle cx='363.321' cy='195.321' r='5.00801' stroke='#3D3BFF' stroke-width='0.626002'\/>\n      <circle cx='166.13' cy='127.13' r='2.81701' stroke='#3D3BFF' stroke-width='0.626002'\/>\n    <\/svg>\n\n    <svg class='universal__bg' width='432' height='668' viewBox='0 0 432 668' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'>\n      <circle cx='207.5' cy='460.5' r='207.5' fill='#D4FE7C'\/>\n      <circle cx='322' cy='110' r='110' fill='#D4FE7C'\/>\n      <circle cx='143' cy='151' r='4' fill='#3D3BFF' stroke='#3D3BFF' stroke-width='2'\/>\n    <\/svg>\n\n  <\/div>\n\n<h2>5. Small screen adaptation<\/h2>\n<p><span style=\"font-weight: 400;\">During the design process, we take small screens into account, such as the iPhone SE. For this purpose, we made the buttons and headers a bit smaller, so it would be comfortable to use the app on these devices.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the SOAK design we received from the client, the buttons were huge. The distance between the text, the borders of the button, and the caption itself was too big.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These buttons didn\u2019t fit on a small screen \u2014 they had to be cropped to fit on the page. You could try to leave it as it is, but then, you\u2019d have to scroll through each screen to find the button you wanted \u2014 it\u2019s not obvious and inconvenient for the user.<\/span><\/p>\n<div id=\"attachment_25581\" style=\"width: 1594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/14-2.png\"><img aria-describedby=\"caption-attachment-25581\" decoding=\"async\" class=\"size-full wp-image-25581\" src=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/14-2.png\" alt=\"Changed the distance between UI elements and reduced the button size\" width=\"1584\" height=\"1648\" srcset=\"https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/14-2.png 1584w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/14-2-288x300.png 288w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/14-2-984x1024.png 984w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/14-2-768x799.png 768w, https:\/\/www.purrweb.com\/blog\/wp-content\/uploads\/2024\/08\/14-2-1476x1536.png 1476w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><p id=\"caption-attachment-25581\" class=\"wp-caption-text\">Changed the distance between UI elements and reduced the button size to make everything look normal on all devices<\/p><\/div>\n<h5 style=\"text-align: center;\"><strong>All design finalization and preparation for development took 2 weeks. This is a typical Agile sprint for us. All the time we actively communicated with the client&#8217;s in-house designer and together we improved the interface.<\/strong><\/h5>\n<h2>Conclusion<\/h2>\n<p>It took us two months to design and develop the SOAK app. It was downloaded more than a thousand times on Google Play. The client is satisfied \u2014 this product is more about image. And for our help, the guys from the company sent our team e-cigarettes as a gift.<\/p>\n<h2>Checklist: what to consider in design before development<\/h2>\n<p>We&#8217;ve made a Google Doc with checkboxes for you and briefly outlined all the steps. If your in-house designer doesn&#8217;t have much UI\/UX experience, this checklist will help ensure that the design considers all the points we&#8217;ve covered.<\/p>\n<p><a href=\"https:\/\/docs.google.com\/document\/d\/1RUAhlkai7EGrdaPvRH6gE0kqJIQBxOGJKLfZ0Ceg3Kk\/edit#heading=h.vbje1uedrsn0\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Download the checklist from a Google Doc<\/a><\/p>\n<p>Or contact us at <a href=\"https:\/\/www.purrweb.com\/\" target=\"_blank\">Purrweb<\/a>. We can make an MVP from scratch: develop the design, build the app, and release it in the stores. We develop apps for mobile, web, and <a href=\"https:\/\/www.purrweb.com\/blog\/how-we-made-an-iptv-app\/\" target=\"_blank\">smart TV<\/a> platforms.<\/p>\n<p><a href=\"#footer\">Fill out the form<\/a> below to contact us. We will listen carefully to your idea, share our experience, and estimate costs and deadlines.<\/p>\n[wpim]","protected":false},"excerpt":{"rendered":"<p>Disclaimer: The text mentions products related to nicotine use. We do not encourage you to smoke and remind you that smoking any nicotine products is harmful to your health. We usually build MVPs from scratch, but sometimes, customers come to us with their own developments. This was the case with SOAK \u2014 they came to [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":25564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"yes","_lmt_disable":""},"categories":[153],"tags":[],"acf":[],"modified_by":"arina.sycheva","_links":{"self":[{"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/posts\/25557"}],"collection":[{"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/comments?post=25557"}],"version-history":[{"count":12,"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/posts\/25557\/revisions"}],"predecessor-version":[{"id":31308,"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/posts\/25557\/revisions\/31308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/media\/25564"}],"wp:attachment":[{"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/media?parent=25557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/categories?post=25557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.purrweb.com\/blog\/wp-json\/wp\/v2\/tags?post=25557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}