{"id":12630,"date":"2020-12-07T15:48:10","date_gmt":"2020-12-07T14:48:10","guid":{"rendered":"https:\/\/uxstudioteam.com\/?p=12630"},"modified":"2022-05-19T14:33:56","modified_gmt":"2022-05-19T13:33:56","slug":"how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/","title":{"rendered":"How We Helped a Language App Reach Its Target Audience With Visual Design"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12811\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/xeropan-case-study.png\" alt=\"xeropan case study\" width=\"1440\" height=\"840\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/xeropan-case-study.png 1440w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/xeropan-case-study-720x420.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/xeropan-case-study-768x448.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/xeropan-case-study-1024x597.png 1024w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><a href=\"https:\/\/xeropan.com\/\">Xeropan<\/a> is a pedagogical game built by teachers of English as a foreign language. By playing, learners can get a level of instruction and results that are usually only possible in a real-life classroom. <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/churn-rate\/\">In 2018 we worked on the UX of this app<\/a>, this time we focused on the UI and visual storytelling.<\/p>\n<p><!--more--><\/p>\n<h2><strong>The problem<\/strong><\/h2>\n<p><span>In the fall of 2019, Xeropan\u2019s CEO reached out to us because, although he was receiving great feedback on his product, his conversions in the app stores weren\u2019t living up to his expectations. Additionally, he had the feeling that his ratio of <\/span><b>paying customers to total users could be improved.<\/b><\/p>\n<p>This case study is an in-depth project description. We also have <a href=\"https:\/\/uxstudioteam.com\/case-studies\/xeropan-case-study\/\">a short and sweet page<\/a> if you&#8217;d like a quick overview.<\/p>\n<h2><strong>Discovery<\/strong><\/h2>\n<p><span>In order to solve the problems at hand, Antoine, our researcher,\u00a0 <\/span>first needed to understand the causes of these problems.<\/p>\n<p><span>To <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/\">increase conversions<\/a>, he had to explore which part of the funnel could be improved and what was the problem in the first place, so he decided to ask potential users to find the app, download it and play around with it while leading him through their impressions, thoughts, and questions.<\/span><\/p>\n<p>To find a way to increase the ratio of paying users, Antoine also asked participants what difference they saw between the free and premium plans, in terms of value. Also, he questioned them about their willingness to pay.<span> He then asked them about past experiences where they had paid for a similar service, to understand the motivations that triggered the buying decision.<\/span><\/p>\n<h2><strong>Findings<\/strong><\/h2>\n<p><span>The most important findings from this discovery phase were the following:<\/span><\/p>\n<ul>\n<li><b>The segment of users that are more willing to pay are young adults<\/b><span> who need to learn English for traveling or professional purposes<\/span><\/li>\n<li><span>The <\/span><b>first impression<\/b><span> our target audience had was usually that the <\/span><b>app was designed for a younger audience than them<\/b><span>, which led them to believe that probably the content of the app wouldn\u2019t be suitable for their age group\u2019s needs<\/span><\/li>\n<li><span>However, when interacting with the product, users loved the exercises, describing them as fun and a useful way to learn English<\/span><\/li>\n<li><span>Users that were willing to pay perceived the price as reasonable, but it became clear that the difference in value proposition between the free and premium plans had to be emphasized more<\/span><\/li>\n<\/ul>\n<h2><strong>Ideation &amp; Preference tests<\/strong><\/h2>\n<p><span>The company wanted to act on this right away, so UX studio set up a two-person team: D\u00f3ri, a skilled UX researcher, and myself, a UX designer with a strong background in visual design. Together, we came up with a one month experiment.<\/span><\/p>\n<p><span>Our hypothesis was that <\/span><b>the main reason people don\u2019t connect with the design is because of the <\/b><b>too-powerful presence of the main character (or mascot), Professor Max, and a very colorful and playful storyline about his time travel adventures. <\/b><span style=\"font-weight: 400;\">Since this story was the first impression users would get after downloading the app, they could rightfully think that the lessons were not serious enough.<br \/>\n<\/span><\/p>\n<p><span>We asked testers on UsabilityHub to <\/span><b>give us their feedback on the original version and three modified versions.<\/b><span> We conducted <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/fine-tuning-first-impressions-with-5-second-tests\/\">Five Second Testing<\/a> to ask about their impressions of Professor Max. After that, we showed them the App Store mockups and asked the following questions:<\/span><\/p>\n<ul>\n<li><span>What kind of app do you think it is?<\/span><\/li>\n<li><span>Who do you think are the users of this app?\u00a0<\/span><\/li>\n<\/ul>\n<p><span>Parallelly, we conducted in-person <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/user-interviews\/\">interviews<\/a> with prototypes, where we asked the same questions and tried to understand the reasons behind the answers.<\/span><\/p>\n<h3><strong>01 \u2013 Original version<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-12638 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/01-\u2013-Original-version-720x369.jpg\" alt=\"\" width=\"720\" height=\"369\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/01-\u2013-Original-version-720x369.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/01-\u2013-Original-version-768x393.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/01-\u2013-Original-version-1024x524.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/01-\u2013-Original-version.jpg 1500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span>Reactions:<\/span><\/p>\n<ul>\n<li><i><span>\u201cProfessor Max: It doesn\u2019t look like you will learn English. I would prefer a skyline of London, something that evokes the English language.<\/span><\/i><\/li>\n<li><i><span>Looks childish, not professional, not serious\u201d \u201cIs it for kids?\u201d \u201cLooks cartoonish, I think it\u2019s for kids.\u201d<\/span><\/i><\/li>\n<li><span>\u201cEinstein.\u201d \u201cMedical app.\u201d<\/span><\/li>\n<\/ul>\n<h3><strong>02 \u2013 With a younger professor teacher<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-12640\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/02-\u2013-modified-version-720x369.jpg\" alt=\"\" width=\"720\" height=\"369\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/02-\u2013-modified-version-720x369.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/02-\u2013-modified-version-768x393.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/02-\u2013-modified-version-1024x524.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/02-\u2013-modified-version.jpg 1500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span>Changes:<\/span><\/p>\n<ul>\n<li><span>Professor Max became young and more professional-looking, more teacher-like.<\/span><\/li>\n<li><span>As the users found the island distracting and hard to navigate because of the many details, we started with removing elements. To make the level topics more visible, we changed their colors and connected them with a line to guide users\u2019 eyes.<\/span><\/li>\n<\/ul>\n<p><span>Reactions:<\/span><\/p>\n<ul>\n<li><span>This smaller iteration didn\u2019t make that much of a difference in terms of how the users perceived the design: they still said it was childish, but the estimated age of the target audience got a bit older.<\/span><\/li>\n<\/ul>\n<h3><strong>03 \u2013 Without the story<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-12641\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/03-\u2013-Without-the-story-720x369.jpg\" alt=\"\" width=\"720\" height=\"369\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/03-\u2013-Without-the-story-720x369.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/03-\u2013-Without-the-story-768x393.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/03-\u2013-Without-the-story-1024x524.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/03-\u2013-Without-the-story.jpg 1500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span>Changes:<\/span><\/p>\n<ul>\n<li><span>Professor Max lost his cloak as we tried to make him look like a young teacher.<\/span><\/li>\n<li><span>We left out the concept of the island and time travel but kept the colors and style of the original interface.<\/span><\/li>\n<\/ul>\n<p><span>Reactions:<\/span><\/p>\n<ul>\n<li><span>The estimated age of the target audience got significantly older: \u201cpeople, adults, professionals.\u201d<\/span><\/li>\n<li><i><span>But respondents got confused about what the app was exactly for. \u201cI think it\u2019s more for business people\u201d \u201cThis white professional guy\u2026 I wouldn\u2019t think of language learning.\u201d<\/span><\/i><\/li>\n<\/ul>\n<h3><strong>04 \u2013 Full redesign with story<\/strong><i><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/i><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-12642 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/04-\u2013-Full-redesign-with-story-720x369.jpg\" alt=\"\" width=\"720\" height=\"369\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/04-\u2013-Full-redesign-with-story-720x369.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/04-\u2013-Full-redesign-with-story-768x393.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/04-\u2013-Full-redesign-with-story-1024x524.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/04-\u2013-Full-redesign-with-story.jpg 1500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span>Changes:<\/span><\/p>\n<ul>\n<li><span>We decided to bring back the gamification element (the concept of time travel and the character) but made the design more simple and clean, not so childish.<\/span><\/li>\n<li><span>We changed the professor to an explorer character to fit the story better.<\/span><\/li>\n<\/ul>\n<p><span>Reactions:<\/span><\/p>\n<ul>\n<li><span>The estimated age of the target audience got to a general level: \u201cpeople.\u201d<\/span><\/li>\n<li><span>More respondents understood that the app is for language learning. However, it also gave people the impression that the app was travel related.<\/span><\/li>\n<\/ul>\n<h2><strong>The redesign<\/strong><\/h2>\n<p><span>Based on the results of the preference tests, we consulted with the client and decided to continue the collaboration. We chose the last concept, the fully redesigned version, and agreed on a 3-month long project plan during which we would redesign the main screens of the application, develop a new visual language and help Xeropan implement them with illustration and imagery guidelines.\u00a0\u00a0<\/span><\/p>\n<h4><strong>The goal<\/strong><\/h4>\n<p><span>The goal of the redesign was to improve app-store conversions and retention by adapting the visual language and value proposition to the people who were most willing to pay for the product while keeping the gamification and story aspects of the app.<\/span><\/p>\n<h4><strong>Creating a new visual language<\/strong><\/h4>\n<p><b>The setup<\/b><\/p>\n<p><span>When you first download the app, you\u2019re presented with an onboarding where you can select your language, goals, and current English level, and get introduced to the story. The app has 13 levels based on language difficulty. Most people downloading the application are beginners; they start on level 0 or 1.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-12643 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Onboarding-screens-720x345.jpg\" alt=\"\" width=\"720\" height=\"345\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Onboarding-screens-720x345.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Onboarding-screens-768x368.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Onboarding-screens-1024x491.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Onboarding-screens.jpg 1500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span>Since we didn\u2019t want to change the structure of the lessons, we had to build around them. Obviously, the most significant change happened on the level screens:<\/span><\/p>\n<ul>\n<li><span>The illustrations became much simpler: instead of a noisy children\u2019s book story, we painted a friendly, spacious, and calming scene using metaphors, a simple color palette, and lots of negative space.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span>We changed the layout from horizontal to vertical. Users often got lost in the previous version, as it was hard for them to find where they\u2019ve left off their studies. Now with auto-scroll, the app always shows you where to continue.<\/span><\/li>\n<li><span>Instead of simply writing out the name of the topic, we wanted to motivate users more to continue their studies. We designed detailed topic cards for them where they can see their progress.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-12644 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Level-and-lesson-screens-720x345.jpg\" alt=\"\" width=\"720\" height=\"345\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Level-and-lesson-screens-720x345.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Level-and-lesson-screens-768x368.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Level-and-lesson-screens-1024x491.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Level-and-lesson-screens.jpg 1500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<ul>\n<li><span>We emphasized the difference between the levels with colors: we wanted users to realize on which level they are at the moment quickly. Color schemes helped us guide them visually.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-12645 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/All-levels-685x720.jpg\" alt=\"\" width=\"685\" height=\"720\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/All-levels-685x720.jpg 685w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/All-levels-768x807.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/All-levels-975x1024.jpg 975w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/All-levels-24x24.jpg 24w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/All-levels.jpg 1500w\" sizes=\"(max-width: 685px) 100vw, 685px\" \/><\/p>\n<h3><strong>Introducing a new content type<\/strong><\/h3>\n<p><span>We met with users who thought the story was motivating and liked the playfulness of the app as well as people who only focused on completing the lessons with a perfect score (3 stars).<\/span><\/p>\n<p><b>To motivate both user groups a bit more and to help them connect with the topic of the levels, we came up with Bonus lessons they can unlock after collecting a certain amount of stars.<\/b><\/p>\n<p><span>To give an example: In the first level, the Jurassic Era, bonus lessons teach you about dinosaurs, the Big Boom, and the Jurassic Park movie. You can unlock them one-by-one by completing the \u201cregular\u201d lessons of the level. Since they are not obligatory, the story is not forced on everyone, but it engages those who are motivated by it.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-12646 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Bonus-lessons-720x345.jpg\" alt=\"\" width=\"720\" height=\"345\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Bonus-lessons-720x345.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Bonus-lessons-768x368.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Bonus-lessons-1024x491.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/Bonus-lessons.jpg 1500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i><span>These topics are not final: to test our idea we came up with some placeholders until Xeropan\u2019s content team took it over<\/span><\/i><\/p>\n<h3><strong>But what will the existing users think?<\/strong><\/h3>\n<p><span>When we chose the new design, we based our decision on the reaction of the potential target audience. But to make it successful,<\/span><b> we had to be sure existing users can get used to the change as well.<\/b><\/p>\n<p><span>Towards the end of the three months, when most of the main pages were in the prototype already, <\/span><b>we invited<\/b><span> the biggest fans: <\/span><b>people who\u2019ve been using Xeropan for years<\/b><span> and saw all the changes that happened previously in the app. We were super excited and somewhat nervous <\/span><b>to hear their opinion.<\/b><\/p>\n<ul>\n<li><span>When we gave them the prototype, their first reaction was a shock. Compared to the live version, they described the proto as \u201cless colorful, more serious, clean and&#8230; different.\u201d<\/span><\/li>\n<li><span>After browsing a bit and checking the topics and the lessons, they got relieved: they saw that the structure of the lessons stayed the same, and they were able to find all the important pages easily.<\/span><\/li>\n<li><span>When we asked them about the level screen (which was previously a busy island with horizontal scroll), they said that the new version was much easier to navigate, and they could see their progress better.<\/span><\/li>\n<li><span>They also mentioned that \u201cnow it doesn\u2019t look like it is for children anymore\u201d (and that is the biggest compliment they could give to us).\u00a0<\/span><\/li>\n<\/ul>\n<p><span>All in all, <\/span><b>even though older users need some more time to get used to the new design, we felt the <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/user-interviews\/\">interviews<\/a> were a great success<\/b><span>: we were confident that we solved the problem we were hired to solve. We found the border between childish and gamified and managed to push Xeropan to the right side: now, it is truly a playful way to learn languages for<\/span><i><span> both children and adults<\/span><\/i><span>.<\/span><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p><span>Usually, when we have to redesign a product, the structural and navigational problems are far more important to solve. But this time &#8211; since we tackled those problems in our previous collaborations with Xeropan &#8211; we had the chance to test them again and fine-tune them while working on the new UI.<\/span><\/p>\n<p><b>Changing a couple of buttons and simplifying the Profile section might seem like a small thing, but we often forget that the user experience is never finished. Going back and improving on our previous decisions is just as important as redesigning something from the ground up.<\/b><\/p>\n<p><span>Half a year passed since the release of the new design so we asked Xeropan\u2019s CMO if they\u2019ve noticed any change in app downloads and retention? He said:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span>\u201cIt is quite hard to separate the design-related changes from other, external effects (the release happened in the summer when a lot of people were \u201cset free\u201d from home due to covid). It took us some months to reach and exceed the download numbers we had in the spring. However, we do see a 3% progress in the Day 1 retention numbers and a 5% decrease in trial cancellations on iOS platforms.\u201d<\/span><\/p>\n<p><span>One more very interesting feedback we got from Attila, the CEO is that \u201ccomments regarding the childish look&amp;feel completely disappeared since the release of the new design\u201d. &#x1f389;<\/span><\/p>\n<p><span>All in all, we think that the collaboration with the Xeropan team was a successful one, and we cannot wait to hear your thoughts and feedback! Feel free to try it for yourselves and let us know what you think!<\/span><\/p>\n<h3><b>Searching for the right UX agency?<\/b><\/h3>\n<p><span>UX studio works with rising startups and established tech giants worldwide.<\/span><span>\u00a0<\/span><\/p>\n<p><span>Should you want to improve the design and performance of your digital product, message us to <\/span><a href=\"https:\/\/uxstudioteam.com\/contact\/\"><span>book a consultation<\/span><\/a><span> with us.<\/span> <span>We will walk you through our design processes and suggest the next steps!<\/span><span>\u00a0<\/span><\/p>\n<p><span>Our experts would be happy to assist with the UX strategy, product and user research, UX\/UI design, etc.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Xeropan is a pedagogical game built by teachers of English as a foreign language. By playing, learners can get a level of instruction and results that are usually only possible in a real-life classroom. In 2018 we worked on the UX of this app, this time we focused on the UI and visual storytelling.<\/p>\n","protected":false},"author":64,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[31],"tags":[],"table_tags":[],"coauthors":[139],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How We Helped a Language App Reach Its Target Audience With Visual Design<\/title>\n<meta name=\"description\" content=\"In 2018 we worked on the UX of this app, this time we focused on the UI and visual storytelling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How We Helped a Language App Reach Its Target Audience With Visual Design\" \/>\n<meta property=\"og:description\" content=\"In 2018 we worked on the UX of this app, this time we focused on the UI and visual storytelling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/\" \/>\n<meta property=\"og:site_name\" content=\"UX Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxstudio.hu\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-07T14:48:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-19T13:33:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/xeropan-case-study.png\" \/>\n<meta name=\"author\" content=\"Zs\u00f3fia Pasztern\u00e1k\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zs\u00f3fia Pasztern\u00e1k\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/\"},\"author\":{\"name\":\"Zs\u00f3fia Pasztern\u00e1k\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0\"},\"headline\":\"How We Helped a Language App Reach Its Target Audience With Visual Design\",\"datePublished\":\"2020-12-07T14:48:10+00:00\",\"dateModified\":\"2022-05-19T13:33:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/\"},\"wordCount\":2033,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"articleSection\":[\"Case Study\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/\",\"name\":\"How We Helped a Language App Reach Its Target Audience With Visual Design\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2020-12-07T14:48:10+00:00\",\"dateModified\":\"2022-05-19T13:33:56+00:00\",\"description\":\"In 2018 we worked on the UX of this app, this time we focused on the UI and visual storytelling.\",\"breadcrumb\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How We Helped a Language App Reach Its Target Audience With Visual Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"name\":\"UX Studio\",\"description\":\"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics\",\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\",\"name\":\"UX studio\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"contentUrl\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"width\":1000,\"height\":1000,\"caption\":\"UX studio\"},\"image\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxstudio.hu\/\",\"https:\/\/twitter.com\/UXstudio\",\"https:\/\/www.instagram.com\/uxstudioteam\/\",\"https:\/\/www.linkedin.com\/company\/uxstudio\/\",\"https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0\",\"name\":\"Zs\u00f3fia Pasztern\u00e1k\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/d6dec6522fdb625915afc9513a9893b4\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g\",\"caption\":\"Zs\u00f3fia Pasztern\u00e1k\"},\"description\":\"I'm a UX\/UI designer who is passionate about visual communication. I also love greyhounds and pizza.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How We Helped a Language App Reach Its Target Audience With Visual Design","description":"In 2018 we worked on the UX of this app, this time we focused on the UI and visual storytelling.","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:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/","og_locale":"en_US","og_type":"article","og_title":"How We Helped a Language App Reach Its Target Audience With Visual Design","og_description":"In 2018 we worked on the UX of this app, this time we focused on the UI and visual storytelling.","og_url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2020-12-07T14:48:10+00:00","article_modified_time":"2022-05-19T13:33:56+00:00","og_image":[{"url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/12\/xeropan-case-study.png"}],"author":"Zs\u00f3fia Pasztern\u00e1k","twitter_card":"summary_large_image","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"Zs\u00f3fia Pasztern\u00e1k","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/"},"author":{"name":"Zs\u00f3fia Pasztern\u00e1k","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0"},"headline":"How We Helped a Language App Reach Its Target Audience With Visual Design","datePublished":"2020-12-07T14:48:10+00:00","dateModified":"2022-05-19T13:33:56+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/"},"wordCount":2033,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"articleSection":["Case Study"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/","name":"How We Helped a Language App Reach Its Target Audience With Visual Design","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2020-12-07T14:48:10+00:00","dateModified":"2022-05-19T13:33:56+00:00","description":"In 2018 we worked on the UX of this app, this time we focused on the UI and visual storytelling.","breadcrumb":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/how-we-helped-a-language-learning-app-reach-its-target-audience-with-visual-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"How We Helped a Language App Reach Its Target Audience With Visual Design"}]},{"@type":"WebSite","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","name":"UX Studio","description":"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics","publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization","name":"UX studio","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","contentUrl":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","width":1000,"height":1000,"caption":"UX studio"},"image":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxstudio.hu\/","https:\/\/twitter.com\/UXstudio","https:\/\/www.instagram.com\/uxstudioteam\/","https:\/\/www.linkedin.com\/company\/uxstudio\/","https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/"]},{"@type":"Person","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0","name":"Zs\u00f3fia Pasztern\u00e1k","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/d6dec6522fdb625915afc9513a9893b4","url":"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g","caption":"Zs\u00f3fia Pasztern\u00e1k"},"description":"I'm a UX\/UI designer who is passionate about visual communication. I also love greyhounds and pizza."}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/12630"}],"collection":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=12630"}],"version-history":[{"count":22,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/12630\/revisions"}],"predecessor-version":[{"id":14000,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/12630\/revisions\/14000"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=12630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=12630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=12630"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=12630"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=12630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}