How to transform an offline product into a digital one with user-centered-design!
This is a Case Study about the process of transforming an offline product into a digital and new product experience. From a main summer camp attraction to an online learning app. How to succeed while doing that with user-centered-design and UX Strategy!
Intro
Smart People is an educational company that offers English (for Spanish speakers) and Spanish (for English speakers) language courses for kids from 12 to 18 years old.
The Challenge
This project is about creating a mobile application for 12–18 year old students. It will transform the in-person learning experience into a 100% digital experience that can be accessed by students whose parents can’t afford or don’t have time to send them to a summer camp.
My partner in crime this time was Seline Valentgoed.
The problem
Smart People’s main attraction is a summer camp. Hundreds of teenagers join every year in the different locations, as they have a very special recipe: they integrate sports, outdoor activities, technology, humor, games, and other cool stuff to their mission of teaching Spanish or English as a second language.
However…
They’re finding many students are unable to attend the summer camp due to cost and time reasons, but still want to access the curriculum.
The Goal
To create a 100% online learning app for children that cannot attend the summer camp due to financial and time reasons. The app aimed at teaching teenagers between the age of 12 to 18 Spanish or English in an online environment that closely resembles the summer camp.
Before getting started
The UX Strategy
UX strategy is the process that should be started first, before the design or development of a digital product begins.
A UX strategy is the plan and approach for a digital product.
I love so much doing UX Strategy and I felt very excited to learn more about it and to focus on this for the third project of Ironhack’s design bootcamp. Doing UX Strategy allows you to be very creative but yet analytical, having in mind the user at the center and to focus on the business and the market.
A solid UX strategy ensures that the business vision, user needs, and technical capabilities are aligned.
It’s the vision of a solution that needs to be validated with real potential customers to prove that it’s desired in the marketplace.
Helps to prioritise a team’s attention and resources by keeping them focused on solving the right problems for target users.
A solid strategy is the difference between success and failure.
How to create from an offline product a digital and new product experience?
First, we wanted to understand what this challenge was about and below I will show you how we did it.
While trying to understand the challenge, that seemed to be very challenging! because Smart People was asking us to transform their offline product into a digital one. A language summer camp!
“Transform the in-person learning experience into a 100% digital experience”.
We decided to focus on the experience.
And how you do that?
Well we started brainstorming about what teenagers get to experience while being in a summer camp. Then tried to understand the values related to that experience and what teenagers find the most interesting on a real summer camp.
After doing a brainstorming session, we find out that people value from a summer camp experience: the social aspect, making new friends, the freedom, to enjoy, have a great time, playing games, have fun, do some active learning, learning something new but without the effort and feeling of being learning, getting new skills, also being in a natural environment, the outdoors activities, the adventure, being able to explore, build things together, the teamwork, collaboration, overcoming fears and being more independent.
After having that understanding we filled in the UX Strategy Blueprint.
So here is an overview of our plan for the app KaraOlé:
The challenge:
We took the challenge to translate the values of a summer camp experience into a digital experience.
The goal of the project is to translate these values into a digital solution. That is gonna be the plan for the digital product to develop and for us to be able to define the product’s UX Strategy.
Aspirations:
When looking at the ideal desired outcomes, we came up with the following:
- Digital solution based on “learning by doing” methodology.
- Help teens to learn a new language, where they want, when they want, how they want it, at their own pace and time.
- Integration of activities to daily life.
Focus Areas:
We ended up with the following focus that we believe will create the most impact:
- The experience and the values of a summer camp.
- Focus first on students that want to learn the Spanish language.
- Focus on the target group 12–14 years old.
- Interaction design.
- Discoverability.
Guiding principles:
- Mobile first. Design for Iphone 8, since young teens are most likely to own an Iphone 8 instead of an Iphone X. (On the prototypes you will see designs for the Iphone 8).
- Personalisation.
- Content Strategy.
- Differentiation from competitors.
Lean UX
What is Lean UX canvas?
Lean UX Canvas gives you the big picture of what you are building, why you are building it, and who you are building it for. You can quickly identify the potentially weak areas of your product and solve your business problems, which lead to creating an excellent customer-centric product.
How we did it?
We used this process to help us frame the work as a business problem to solve (rather than a solution to implement) and then dissect that business problem into its core assumptions.
This is about to understand how you intend to create value for customers and how you hope to create value for your company.
We then weave those assumptions into hypotheses.
Finally, we design experiments to test our riskiest hypotheses.
Identifying the right riskiest assumption was the most important first step.
The product itself must be a solution that encourage teens to keep it using again and again, in order to learn a language, practicing is key and keeping the pace the big struggle. Therefore, we know that we are right if the solution fits into daily basis activities and teens are encouraged to integrate the solution into their daily life.Without retention there is not learning! We decided for the strategy of the KaraOlé app we should be focusing on Customer Retention, not only on Acquisition. And that the concept of the KaraOlé app should be based on this as well. Getting teens retained to keep learning.
Where Your Most Risky Assumption Lies — That’s The Place Where Your MVP is Hiding!
The UX Strategy Blueprint and the Lean UX Canvas were the guidelines for the UX Strategy before starting the design phase. Having in mind all these aspects mentioned above, helped us to have a better understanding of the challenge itself, to be able to define the plan of the product and identify the project’s goal.
So here we go…
The Design Phase
After defining the UX strategy we got clarity about all the planning before getting to here, so we can now move on and get started with the design phase.
On the design phase the user and the problem of the users are at the center of the design process. While doing the UX Strategy not only the users but the business and also the market needs and goals were taking all together into account for that purpose. Having the difference clear.
Let’s start with the design phase.
1. Empathise
These are the research guidelines followed:
The Research Goals:
Research Methods
- We interviewed teenagers, teachers, and parents of language students.
- We asked the teenagers about how they learn best, which apps and games they use and how they stay interested when learning a language, what they are actually doing, their favorite activities, which tools they are currently using. We aimed to dive deep into their motivations and pain points.
- We asked teachers about what is important for language learning online and offline and how to keep students engaged.
- We asked parents to share their experiences about their kids learning a language online and in general how their kids manage to learn, how they help them, which tools they use, and their struggles.
From the research interview, we got to understand what are the things that matter the most to each group. Here are the most important insights:
Other insights:
- Students are most interested in learning when this relates to their life, activities, and hobbies.
- Students want control over their learning path. Learn when they want, what they want, where they want and how they want it.
- They often find learning; time-consuming, getting bored and too much work.
- They find class and school work “unexciting” or “pointless”, and report they don’t feel motivated or challenged by the material.
- Gamification is also key to language learning. Teenagers enjoy playing games.
- 80% of the teens have access to a mobile phone.
- Teenagers like: games, selfies, music, movies, vlogs, social media.
Do you use online tools to help you learn a new language?
“Yes, I use Youtube and Spotify”.
What is the reason you are using these channels?
“There I find music that I love and I get to practice the language in an easy way!”
Competitors analysis
Since from the strategy we aimed on the idea of an app that would recreate the values of a summer camp, therrefore we looked at other language applications that offers the possibility to learn in a fun environment with real life activities.
There are already plenty of them on the market: Rosetta stone, Duolingo, Babbel, Pimsleur, Living language, Fluencia, Fluenz, Buzuu, Memrize, Udemy, Italki, among others.
Almost all of these applications aim to offer lessons and games to learn a language in a fun way. Some of them have focus on active learning skills and integrating games but still using a lot of traditional content and traditional learning methodologies and activities.
We aim to focus on a spot on the market where we can offer the user the possibility to benefit from non-traditional active learning activities that fit the user’s real interests on a daily basis. So the user doesn’t have to make extra time and effort to integrate the learning activity on their daily journey.
Fluenz doesn’t have games or give rewards for completing lessons. Instead, Fluenz aims to connect the Spanish language to culturally significant events and real-world conversational situations.
We aim to compete on the market using cultural similar elements as well, because when we think about Spanish, our first thoughts are strongly related to that: culture, food, warm people and music!
Rosetta Stones is rated as the best app overall for learning a new language. But for long-term purposes is quite expensive. What makes Rosetta Stone so unique is that it prepares you to use the new language in the real world. So it’s not just about the features, but what you’re able to do because of them. With Rosetta tools you can quickly learn useful expressions and basic conversational Spanish.
Business Analysis
Engagement. Benefits on the short-term. Affordability. Time consuming. Apply learnings on daily life. Value.
We looked also at the business from competitors. This allowed us to compare the competitors branding by looking at their value proposition, what are their best for, their features, target audience, name, logo, slogan, prices and brand personality.
After doing the competitors and the business analyzing for different language learning apps, we noticed that currently on the market:
Learning apps are not always related to hobbies or daily activities (social media, vlogs, music, videos, movies, stories, etc). But they do intent to offer learning content that can be used in real world situations and important specific conversational topics, like for example travelling, business, etc.
Most language learning apps are aimed at adults or young children. There is little offer for the teenagers.
We noticed that most of the learning language apps have strong focus only on passive learning activities, like reading and listening. And the ones that encourage active learning like writing and speaking still make a lot of use of traditional learning methodologies, ways of teaching and content.
Therefore we can say that:
“There is room on the market for a product that targets teenagers and offers value for learning a language but without the effort and feeling of being learning and to encourage active learning activities like speaking in an engaging way. The content and the ways of teaching has potential to bring some value to the users”.
2. Define
Affinity Diagram
In the next phase of the design process, we gathered all the findings from user research using an Affinity Diagram, where we identified interesting design opportunities for the app.
How Might We
The HMW questions help us to open up to ideation sessions where we can explore ideas, which can help us to solve our design challenge in an innovative way.
The final HMW statement
From research, we know that students are most interested in learning when this relates to their life, activities, and hobbies. Therefore we came out with this HMW:
Problem Statement
Based on the insights on what we have gathered in the empathize phase, we focus on the users and their needs.
“The user needs a way to keep the pace and stay motivated while learning a new language. They are in need of an online platform to connect an active learning activity with their personal interests and daily life activities”.
Having the problem and hypothesis clearly defined helped us later to brainstorm around how to discover opportunities to solve the HMW. This step is key on the design process.
Empathy map
The Empathy Map allows us to sum up our learning from engagements with students in the field of the research. The map provides four major areas in which to focus our attention on, it’s providing an overview of a person’s experience. The empathy maps is also great as a background for the construction of the personas.
Persona
To better understand the user needs and their point of view, we also created a User Persona and imagined the possible User Journey that the User Persona would go through.
Carmen wants to learn the Spanish language to be able to communicate better with her family who is living in Mexico. She wants to be able to speak Spanish when traveling with her family as well and she wants to feel proud of her roots and connect with her culture and traditions.
Her family can’t afford sending her to attend an immersive language summer camp. She is also busy with school and don’t have much energy left to spend time for extra learning activities. She gets bored so easily and can’t focus really well on learning.
User Journey
With the User Journey, we try to capture the experience, feelings and thoughts that the user Carmen is facing on a typical day.
Constantly exposed to new ideas, social situations, and people. We can imagine that teenagers have busy lifestyles and are exposed often to challenges.
Therefore, we aim to discover an opportunity to make from a lifestyle experience a learning experience for these teens.
During a daily journey there are very often moments when teens are keeping themselves busy and entertain while listening to their favorite music. They have plenty of options to choose from and they are able to decide when and where they want to have access to it. Carmen’s journey is totally about that!
3. Ideate
The Solution
If there is something that can help people to connect with themselves, with other people, with culture, improve time consuming, help them to enjoy, concentrate and relax, that is music! And whenever thinking about the Spanish culture, the first thoughts are specially related to that! Música!
We aim to overcome the “I’m bored” statement when learning and we aim especially to encourage active learning activities, as we discovered at the research stage, that this aspect plays an important role on the learning process.
We aim to offer to the user the possibility to benefit from non-traditional active learning activities that fit the user’s real interests on a daily basis. So the user doesn’t have to make extra time and effort to integrate the learning activity on their daily journey. And we aim for a solution to encourage the users to improve their speaking skills.
Therefore the idea of a Karaoke sounded like music to our ears!
Many studies have shown that musical training can also enhance language skills, according to the MIT, Massachusetts Institute of Technology.
The music itself can be understood as a universal language. And also it can let you experience the culture and the way people feel and think in that specific language. That’s exactly what we want to help the users with. To learn a new language but also to help them to have the understanding and connect with the culture and the people that speak that language.
The solution aims to use strong elements of the Spanish culture, like their music. The idea is to develop an app to have access to music to help teens to learn to speak Spanish in a fun and engaging way while singing their favorite Spanish songs.
- A Karaoke language app that allows teens to have access to music and teaches the Spanish language using Spanish songs.
- The content is based on different music songs and styles, which are adjusted to the user’s taste and language level.
- An app that focus on discoverability like Spotify and is engaging for teens like Snapchat.
How is this solution connected to the summer camp?
Camp helps kids unplug, teach them new skills but without the effort and feeling of being learning, kids are encouraged there to explore a new world.
We found music and summer camps shared values together. We want teens to unplug with Spanish music to explore a new language and result in a different style of learning. Learn by doing with fun content like music.
Goals:
- Minimum Value Product, MVP.
- Learn Spanish through music.
- Explore music with different styles and compatible with different language levels.
- Sing a song, record a video and share it on different channels like social media or WhatsApp.
- Listen to music, read the Spanish lyrics, including translations.
- Create your own vocabulary collection. Collecting your favorite sentences.
To follow with the design process we used the Moscow diagram, Site map, Chart Flow to organize the solution ideas:
Moscow Diagram
In the startup environment, MoSCoW is a way to prioritize our stories, features, tasks, and requirements. That method makes you break all your features down into 4 categories.
After prioritizing, it got clear what the core features for the app are:
Site Map
To organize the content on the app, we created a sitemap.
User Flow
This the happy flow when completing the Karaoke tasks and what the User persona will do while using the Karaoke feature.
4. Prototypes
Wireframes
We created a low-fidelity prototype based on the sitemap, user journey, and happy flow.
Feedback
After discovering some usability issues:
- We added a function to slow down the music in the karaoke game.
- We decide to show less folders on dashboard screen, user can now scroll left and right, arrows not necessary.
- Instead of words to collect, we allow now users to collect sentences, because of the context of the app.
- We left out some double information on screens.
- Left out the “share screen” (they can share info on WhatsApp).
- Left out feature that allows parents or friends to be included while using the app.
We implemented these changes into our mid-fidelity wireframes, which we created in Sketch.
Then mid-fidelity prototype was ready to test with the users.
What we were testing?
- Concept. To test if concept idea was clear to user.
- Usability. If the message and the information given by the navigation and interactive elements was usable, useful and understandable for the user.
- For the MVP we aimed to test the main feature of the app, the Karaoke feature and other secondary goals like, exploring the music dashboard, the listening, and the spelling challenges.
We tested this prototype and here is the feedback we received on each screen.
Feedback
- User doesn’t understand what exactly is “recommended content level” on onboarding page. User says I can tell my own language level (but the wording is not clear). We added now an option that user can choose or take a test to determine language level and the onboarding process to get started got split, first to discover the music interests of the users and then about to determine their language level.
- User says, he doesn’t understand what the tags of the folders on dashboard page are about. What means easy here? We introduce now less and simpler filtering tags.
- User says if he is happy with the score he would be willing and happy to share this result on facebook. Allow user to have a link to share on all social media channels.
- On the spelling challenge screen, user doesn’t understand the order of the sentences and this makes him get confused. We tried to focus on the hierarchy of the content to solve this issue.
Hi-fi prototype
5. Iterations
Here are the changes (only from main screens) we made after evaluating the low- fidelity wireframes, and testing the hi-fi prototype.
We did testing with 3 users in total.
The Iteration process:
Before & After
Signup page: We created a logo and slogan for KaraOlé.
Login page: included option for when forgetting password. Bar on top is gone. Still missing here an option to verify the account or password (to be included on the next steps).
Dashboard page. Goal: Allow user to explore and discover music to learn spanish based on own interests and music taste. We did less folders to preview and less tags for filtering music. Instead we added more personalised categories. User can scroll left and right. Added search bar.
Goal 1: The Karaoke feature, sing karaoke and share video.
First referred as the Singing challenge page we decided to give it a more clear name like Karaoke becasue this is about the app main feature.
Changes on the icons from CTA, at the footer and removed double buttons. An important feature we added a function that allows user to slow down the music in the karaoke game.
Goal 2: Listen to music, read lyrics and collect sentences.
On the listening page we allow now users to collect just sentences instead of words, because of the context of the app and this is easier and faster for the user to accomplish the task.
Goal 3: Take the spelling challenge.
We tried to focus on explaining more clear the task to the user changing the text and improving the hierarchy of the content.
Goal 4: User here can check own collections from previous activities. We sort information now based on activities done instead of language topics and words.
The final Hi-fi prototype
We implemented feedback from the users and this became the final hi- fidelity prototype.
Figma
For this Figma prototype version only the happy flow is clickable.
I aim to do the actually all micro-interactions on Principle. But that would be an update for the next time.
Click and check here the link to see how the prototype works on and don’t forget to scroll down on some screens.
Learnings:
- It was eye-opening to go through the design process and put everything we’ve learned so far into this 3rd. project at the UX design bootcamp from IronHack Amsterdam.
- You are not the user! and design for your user in mind even if that means not following the mainstream. For example, when taken some design decisions we tried to focus always on our users first. We know that it is so cool to present a design solution in the latest Iphone X but on this project we decided to design actually for the Iphone 8 instead of the X version, because our users are very young teens and their parents can’t afford the latest and the coolest mobiel from the moment, so our solution it would not make that sense.
- There is not one, perfect or final solution. There is just a process to help us to improve and always aim to get better and better and better.
- Always return to the user — testing helped us refine our app and reviewing our research throughout the process.
- Brainstorming with classmates and asking for advice and feedback is also very fun, learnful and helpful.
- Designing for kids was a whole new world and a very challenging one.
- UX copy is very important. Unfortunately we tend to leave this task for the last part.
- After the presentation, we received very useful feedback to improve the prototype and already implemented some part of it.
BTW this article is a case study and it was intented more for academical purposes, with a lot of deliverables and I know that for some readers it got way too long. For next projects I think I would focus less on explaining so deep the whole design process and I would keep it short.
So, this is the end but before leaving I had love to hear also something from you, really! So please share anything you want, keep in touch and find me on LinkedIn.
I’m personally looking forward to learn more about UX Strategy and I would appreciate the oportunity to have more insights related to this.
Karen:
Seline:
Thanks a lot for reading ; )
p.s: I’m currently starting week 16 from the 24 weeks User Experience bootcamp and I would be sharing the rest of the projects very soon.
