Online Education

Reading Time: 9 minutes

Client: Online education company.
Platform: Desktop, Tablet, Mobile.
Project duration: 7 months.
Methodology: 2-week sprints and monthly demo releases. Daily status meetings, planning, reviews and retrospectives.
Software tools: Figma, Sketch, Adobe Illustrator, Adobe Photoshop, Balsamiq, Miro, Confluence Cloud, Jira, Trello, Zeplin, InVision, Slack, Google Forms, Google Analytics…

Design thinking

Every design process involves a methodology to obtain the best outcomes. We as designers rely on solid and iterative methodologies such as Design Thinking. This way we get to understand the problem to be solved and provide the best possible solutions, testing, changing, failing, rethinking, improving…

The context

We all witnessed how, overnight, Covid spread like wildfire across the globe. Many businesses had to find a quick and efficient way to adapt to the new circumstances. This company at the time focused virtually all of its business on physical interactive screens installed on the walls of schools. Suddenly this was no longer an option and we didn’t know for sure how far away the end was.

We had to translate all this face-to-face pedagogical experience to a new purely digital one, portable, manageable from any electronic device and understandable by children who no longer had the teacher by their side…

My main role in this whole process would be to design a business model to effectively reach the final B2C customer, achieving a fast adoption growth. This education company was always a leader in its sector, and we had to keep it that way. This product’s main KPI was to position itself among the best existing competitors in online education.

The aim in terms of CRO was its adoption by K-12 districts and schools (USA and Canada initially and Europe, etc. later), as well as acquisition by individual teachers (grassroots).

The method we wanted to test in a first iteration was “try and buy”. For this we would provide a free functional demo (MVP). Finally, we would test different strategies to attract customers through payment and/or subscription.

In a nutshell, we needed to go from this:

to this:

Squad

• Three Product Managers
• Five UX/UI Designers
• One UX Researcher
• Eight devs (Frontend, backend, iOS, Android…)
• One UX/UI Leader

The UX team was in charge of different tasks such as: benchmarking, research, user journeys, experience mapping, wireframes, information architecture, UX writing, prototyping, final design, testing…
Although I collaborated in almost all areas along with the team, I focused mainly on the following tasks:

Approaching the problem

Research goals

Below are some of the main questions we asked ourselves when approaching the problem to be solved:

• What will be our potential audience?
• What motivations would potential buyers of our technology have?
• In what contexts and in what ways would our software be used?
• What other companies have had to solve similar problems and how did they do it?

User interviews

In the empathize stage, I conducted initial individual user interviews (they were all parents of different ages) to understand what our users really needed, and why. I have selected a series of 5 questions.

Style: Interviews.
Number: 8 people.
Duration: 15 minutes each.
Interview type: Contextual interviews.

Initial Questions:

• Now that we are in a pandemic situation, how do you think it will affect your children’s education?
• What electronic devices do your children use on a regular basis?
• Have they used or do they use any App or online educational tool?
• To what extent do you think technology could replace traditional face-to-face education?
• Do you think technology could better help children, youth, everyone, none?

Understanding the User

In the define stage, I conducted thorough user research, including developing personas, user stories and user journey maps.

Synthesizing the data from the interviews, I was able to form two distinct user personas and their pain points. This subsequently allowed me to write definitive problem and hypothesis statements, and formulate their user journeys. The user journey maps helped me understand the problems Gemma and Ian faced on their paths. It also helped reduce the impact of my own designer biases. This new comprehension allowed me to recognize roadblocks and pain points to correct, by identifying improvement opportunities.

And last but certainly not least, it allowed me to design a unified and coherent experience, regardless of the type of customer.

User Story: Gemma Junot

User Story

As a high school teacher, I am concerned that the quality of the classes will be diminished by doing them online. I would need to continue to use the materials I currently use in my face-to-face classes. I don’t know if I would be able to monitor and evaluate students through online classes.

Problem Statement

Gemma has been attending her workplace every day for more than 20 years to teach her classes. She is always very busy and would love to find a way to make her work easier and more efficient. However, the pandemic has made things more difficult and she is a little disillusioned about the medium-term future.

Hypothesis Statement

If Gemma makes use of our MVP, she can discover a new way of teaching. She will probably realize that there are alternatives to her methodology. She will discover that she can teach her classes from anywhere and even at any time. Having the educational materials available and being able to share them among students from different courses could make her daily work and class preparation much easier.

User Persona: Gemma Junot

User Research: Gemma’s pain points

Afraid of changes: She is not used to using such software and finds it overwhelming.
Economical: She doesn’t want to pay for software, especially without having tested it well.
Persuade the Principal: Get the principal interested in this software and buy it.

User Journey Map: Gemma

Ideal path Gemma would use to become our user.

User Story: Ian Kelly

User Story

As an administrator, I am always looking for new tools to offer to all my clients. I read something about a new education software being developed by this online education company. This company is a leader in face-to-face education tools and I believe that what they are developing for online education can bring me important benefits.

Problem Statement

Covid has caused me to lose a lot of benefits and even customers. I need to strengthen my sales and take advantage of this situation.

Hypothesis Statement

The system administrator will test the online tool being developed by this education company as soon as possible. The current situation will drive him to offer our product. If he finds value and differentiation in it over other competing products, he will buy licenses and promote us.

User Persona: Ian Kelly

User Research: Ian’s pain points

Concern about finding new products to sell: He thinks that the online education market could be saturated or paralyzed after Covid.
New products: He needs to find new products that will provide sufficient profit margins to maintain business.
Economical: He fears that new online products will be too expensive taking advantage of the circumstances

User Journey Map: Ian

Ideal path Ian would use to become our user.

Benchmarking

First of all I conducted a detailed benchmarking of direct competitors, as well as some businesses whose B2C model could guide and inspire us.

– NEARPOD

Market research on this company revealed that its main online education product was among the top three strongest in the North American and Canadian market. The product’s website clearly highlighted the benefits for different types of target users. In addition, its usability was quite good. Its B2C model was simple and intuitive, with few pain points in the subscription process. Undoubtedly, it was a serious competitor.

– PEARDECK

This was another of our product’s major competitors. They also opted, as seen in the graph below, for a very direct access to their free demo via subscription.

– SEESAW

Totally focused on its three main types of users (students, teachers and families). In this case, to attract new users, they used an explanatory video. A new tab opened in YouTube, which after several research studies, revealed a potential loss of engagement.

– FRECKLE

Its end user lied in schools. Its approach, both commercial and visual, was clearly aimed at younger students than the previous cases (K-2). However, its potential customers were also teachers, schools and districts. The business model followed the strategy finally chosen by us of offering a free demo (try and buy).

– STRIPE

Although it was not an educational product, its B2C model was studied because it was a very powerful company that lead its market niche. This is an example that focuses more on obtaining new leads.

B2C strategy (solution)

Flows and Use Cases

Below are some of the user flows and use cases that I designed to accomplish the B2C business strategy:

– FLOW: NEW TEACHER INTERESTED IN TRYING OR BUYING THE PRODUCT

This flow shows the different ways of accessing the product, both to its marketing page and to the trial or subscription version. Access is straightforward and engagement processes have been simplified as much as possible to avoid losing potential customers.

These use cases focus on the adoption of free subscribers who will then potentially become premium users.

Use Case: Free tier for teachers

• Selects that she is buying for yourself
• Selects “I am a teacher”
• Navigates through the subscriptions (pricing and feature options)
• Select “free tier”
• Provides email address (Google / Microsoft)
• Receives email confirming free tier subscription and benefits around upgrading to paid tier
• Within a few days of inactivity reminder email is sent
• Website: Receives “onboarding” messages around new product features
• Checks content repository

Use Case: Teacher buys license for the first time

• Teacher enters the marketing page of the product
• Selects that she is buying for herself
• Selects “I am a teacher”
• Teacher goes to the product’s pre-registration page
• Navigates through the subscriptions (pricing and feature options)
• Selects subscription
• Creates an account and logs in
• Receives an email to verify user data
• Confirms purchase
• Accepts billing frequency
• Enters payment method
• Confirms, pays and receives confirmation on screen
• Receive email with payment confirmation
• Enters the product website

– FLOW: NEW TEACHER EDITING HER SUBSCRIPTION

Below is the flow with the steps to upgrade the subscription type, change payment methods or cancel the subscription if necessary. Again, the steps have been shortened as much as possible and the interaction, from a human-centered design point of view, always involves corresponding feedback in response to each interaction.

Again, some use cases to define the actions related to editing a teacher’s subscription:

Use Case: Teacher downgrading her personal account

• She goes to the B2C portal site and logs in
• Selects “Change” subscription
• The teacher navigates through the subscription levels
• Selects a lower tier
• Selects the subscription duration
• Confirms subscription details
• Receives an email confirmation of the subscription downgrade

Use Case: Teacher updating (upgrading) her personal account

• Teacher goes to the B2C portal site and logs in
• Selects “Change” subscription
• Navigates through the subscription tiers
• Selects a higher tier
• Selects the billing frequency of the subscription
• Confirms the subscription details and pays the difference
• Receives an email confirmation around her subscription
• Receive payment confirmation

Use Case: Teacher canceling subscription

• The teacher goes to the B2C portal site and logs in
• Edits the subscription to cancel it
• Sees a message around required refund or penalty
• Confirms the changes
• Receives notification around changes

– FLOW: EXISTING ADMINISTRATOR MANAGING PAID SUBSCRIPTIONS

As seen in the next user flow, administrators have full control to manage the subscriptions and users that depend on them. The biggest challenge, as seen below in the wireframes, is to accomplish all these tasks through a simple, unified way that works properly across any type of device.

These are some of the use cases designed to accomplish tasks related to the management of paid subscriptions by an administrator:

Use Case: Administrator increases the number of licenses for his users

• The administrator logs in
• Goes to the administrator account portal view
• Selects the organization on which he wants to increase the number of licenses
• Increases the number of licenses
• Receives a message around price and amount change
• Confirms the changes
• Receives an email confirming the subscription change
• Receives payment receipt

Use Case: Administrator decreases the number of licenses for his users

• The administrator logs in
• Goes to the administrator’s account portal view
• Selects the organization on which he wants to decrease the number of licenses
• Decreases the number of licenses
• Gets a message around the plan price change
• Confirms the changes
• Receives email confirmation of the subscription change

Use Case: Administrator can view invoices

• The administrator logs in
• Goes to his home page
• Selects the organization for which he wants to view the invoices
• Selects “Invoices”
• Reviews the invoices
• Downloads invoices

– FLOW: EXISTING ADMINISTRATOR MANAGING USERS THROUGH SUBSCRIPTIONS

In this flow, the number of options at the first level is kept small to facilitate usability and prevent the cognitive effort from increasing.

The administrator role is crucial in the implementation of our B2C (and also B2B) model. We want to make the management tasks they will have to perform as straightforward as possible. Let’s highlight the following Use Case:

Use Case: Moving users from one subscription tier to another

• Administrator logs in
• Goes to the portal view of the administrator’s account
• Selects Org
• Selects the desired subscription
• Views the list of enabled users within a subscription
• Selects the users to be “Moved” to a different subscription
• Confirms “Move” selection
• Sees the subscription tier with the newly added users

Wireframes

This section shows some of the wireframes I designed. The previous user flows and use cases were taken into account, as well as other UX artifacts such as user stories, personas, etc. All this was developed under our customized Design Thinking model.

– NEW TEACHER SUBSCRIBING TO THE PRODUCT TRIAL

After analyzing and validating the collected data, and always from a human-centered point of view (HCD), I designed wireframes for different user journeys. For the sake of simplicity, only the teacher’s UX is shown below.

– TEACHER BUYING THE PRODUCT FOR HERSELF

For this first iteration I am showing the process that a teacher would go through to purchase the product for herself (without the need for an administrator or vendor to participate). The process is smooth and straightforward.

– TEACHER EDITING HER SUBSCRIPTION

The following graphic contains the wireframes of a teacher editing her subscription without the need for intermediaries. As you can see, the essential needs for an MVP product of these characteristics are covered: renewal, payment methods, upgrades or invoices. A good implementation is crucial to make the system status perfectly clear.

UX Analytics, Testing and Outcomes

Below are some examples of screenshots with key metrics we collected. Combined with the insights obtained through iterative testing, we managed to design our roadmap and drive continuous improvement of our crucial KPIs.

 

View live site

 

Thanks for reading!