top of page
1.png

StudyRoom: Interactive Education for Adults

Case Study:
UX / UI Design

Untitled design.png

Overview

In 2020, when COVID-19 first reached Prague, many of my friends and former colleagues in the adult teaching world were introduced to an entirely new way of providing a quality education for their students. As businesses and schools shut down, education was suddenly relocated to a new home on the internet. For younger learners, especially those who have constant access to digital devices, this transition may have felt more natural but for adults who had never tried to learn via video-calling, it was much more difficult. I learned from teachers who specialized in adult education that they were rapidly losing students who were no longer able to meet with them face-to-face.

 

I wanted to find out why adult learners were less enthusiastic about learning over video calls and what I could do to make online education better for adults. To do this, I employed the Design Thinking Process to research, design, and evaluate a solution to the problem.

 

StudyRoom is a responsive web application that makes online learning for adults interactive, engaging, and fun. StudyRoom provides a space learners to have a face-to-face video lesson with a private, expert-level teacher while simultaneously interacting in a virtual classroom.

Objective

I designed StudyRoom as part of the course curriculum for CareerFoundry’s UX Immersion course. The main goal of StudyRoom is to provide adult learners and teachers with an interactive digital environment to complete face-to-face lessons. Inspired by my own experience with adult education and online education, as well as the real-life needs of my former colleagues and friends who still work in adult education, I chose this problem space because it was a situation that required immediate attention during the COVID-19 pandemic.

 

Additionally, StudyRoom aims to connect learners of all abilities to professional, “expert-level” teachers in any subject that they wish to learn. By providing a searchable and sortable database of teachers in the marketplace, learners are able to find the perfect match for them. At the same time, meeting teacher needs like providing premade lesson plans, resources, and activities for further student engagement were a goal throughout the design process.

Duration

8 months

Start: November 2020

End: June 2021

Tools

Pen and Paper

Adobe Xd

Miro

Google Forms

Google Sheets

Canva

Optimal Workshop

UsabilityHub

Skills

Research

Competitive and UX Analyses

User Surveys and Interviews

User Stories and Personas

Task Analyses and User Flows

 

Design

Sitemapping

Low-Fidelity and Mid-Fidelity Wireframes

High-Fidelity Mockups and Prototype

Style Guide and Design Language

 

Evaluation

Usability Testing

Affinity Mapping

Preference Testing

Design Process

1.
Empathize

  • Business Needs

  • Competitive Analysis

  • UX Analysis

  • User Surveys

  • User Interviews

  • Affinity Mapping

2.
Define

  • User Stories

  • User Personas

  • Journey Maps

3.
Ideate

  • Task Analyses

  • User Flows

  • Sitemaps

4.
Prototype

  • Paper Sketches

  • Mid-Fidelity Wireframes

  • High-Fidelity Wireframes

  • Interactive Prototype

5.
Test

  • Usability Testing

  • Preference Testing

  • Final Design

1. Empathize

"Understand human needs involved."

Initial Goals

The first phase in my design process was to determine what I wanted to achieve with the project. The project brief provided by CareerFoundry was intentionally broad which afforded me freedom with the direction to take. However, there were some requirements which aided me in determining initial goals.

 

  1. Provide video-calling platform for learners between the ages of 18 and 40 to complete lessons with a private teacher

  2. Develop an intuitive way for learners to find a professional teacher in their desired subject

  3. Create a system to process payments from learners to teachers for their lessons

  4. Attract expert-level teachers for as many subjects and fields as possible

Problem Statement

Adult learners, between the ages of 18 and 40, need a reliable mobile and web platform to have 24/7 access to professional teachers in a variety of subjects for online lessons because adults have their own unique scheduling and learning needs.

 

We will know this to be true when users use an intuitive platform that allows them to book and complete face- to-face online lessons of varying lengths, with teachers qualified in their desired subjects of study.

Business Needs

Executive Summary

The online teaching platform will be a responsive web app that creates a marketplace where teachers and students can connect for the purposes of advancing the education of modern learners. Our primary focus will be on learners who have completed high school and are continuing their education as university students, post-baccalaureate students, or lifelong learners. By creating a learning-focused video calling platform, we will provide learners with a revolutionary approach to the virtual classroom that caters to individual needs.

Target Audience

The minimum target age demographic for the responsive web app are learners who are 18, as their needs are the most dynamic of any age. The upper age range is 40 as most Ph.D. students are between the ages of 26 and 37. The mindset of our target user is someone who is looking to expand their knowledge in a given subject beyond what they are able to access in their daily lives. Personal situations have great variance throughout the world, but an accessible online teaching platform can bring great education to learners anywhere.

S.M.A.R.T. Objectives
  1. Create a competitive responsive web application with the ability to corner the 18-40-year old learner market

    Measured by: Initial and continued user tests and market size.

    Delivered by: 2 to 3 months from project start date

  2. Gain 50 new teachers and 500 new learners within two months of launching

    Measured by: Teacher registration and learner signup count within first 60 days.

    Delivered by: 60 days after product launch

  3. Create and deliver 30 premade lesson plans and activities by launch date

    Measured by: Lesson plan count at product launch Delivered by: 2 to 3 months from project start date

Competitive and UX Analysis

Despite having a wealth of teaching experience, I had never personally taught adult learners online so it was important for me to understand the market, the big players in the field, and what problems were not being addressed. I did surface-level research on dozens of online tutoring sites to determine which ones I could learn the most from. iTalki and Preply were two of the companies that really stood out to me as leaders in the market so I chose them to do competitive analyses, S.W.O.T. analyses, and UX analyses on.

User Research Goals

I employed the methods of user surveys as well as user interviews to complete my user research. It was at this stage that I decided I would need to focus on two sets of user groups—learners and teachers—in order to best understand the needs of all stakeholders and users. When writing my surveys and scripts, I had the following goals in mind:

 

  • To better understand teacher and learner behavior when using online education apps.

  • To determine how all users engage with online education apps beyond the scope of just completing lessons.

  • To identify and understand the ultimate goals of learners who are using online education apps.

  • To identify pain points and frustrations all users have with existing online education apps.

User Surveys

Insights

Understand Teacher and Learner Behavior

  • A strong majority of students take one or two 60-minute lessons per week.

  • Students have a strong desire to do additional tasks beyond lessons.

 

Determine How All Users Engage with Online Education Apps

  • Most students have used some online platform but they rarely spend time on it outside of their lessons.

  • Students would welcome additional materials from online platform

 

Identify and Understand the Ultimate Goals of Learners

  • Although hard to identify this goal, the survey results do show that most students dedicated only one or two hours per week to online learning.

 

Identify Pain Points and Frustrations

  • No conclusive findings were determined from learner surveys but teachers have a lack of desire to use marketplaces for advertising. This could limit options for learners.

User Interviews

My user interviews were conducted in two phases with the two target audiences being equally represented.

 

Participants

Interview Participants

Insights

Understand Teacher and Learner Behavior

  • Teachers are passionate about teaching and love their careers

  • Adult learner motivations are primarily career-related

  • COVID-19 has forced both teachers and learners to use online education

  • Adult learners typically take 1-3 lessons per week, 60-minutes is the most popular lesson length

  • Teachers spend between 5 and 8 hours per day teaching online

 

Determine How All Users Engage with Online Education Apps

  • All participants prefer video-calling services that are already familiar to them

  • Teachers rely heavily on searching the internet for resources and materials to conduct lessons

  • Most participants expressed a desire to continue online education after the COVID-19 pandemic is over

 

Identify and Understand the Ultimate Goals of Learners

  • Language learners have broad goals like “become conversational”

  • Language learners are motivated by a desire to embrace culture or live abroad

  • Most adult learners have goals that are influenced by their careers

 

Identify Pain Points and Frustrations

  • All participants expressed a desire for more interaction during video-call lessons

  • Teachers are frustrated by inconsistent availability of resources

  • Adult learners do not feel they receive enough guidance when learning independently

  • Video-calling platforms have bugs and latency is an issue when teaching subjects like music

2. Define

"Reframe and define the problem in human-centric ways."

User Stories

Teacher Marketplace

"As a learner, I want to easily find teachers who I can trust are experts in their field so that I can start taking classes quickly with confidence."

Interactive Lessons

"As a teacher, I want to show relevant content and give students additional exercises in the video platform so that I can reinforce learning throughout the lesson."

User Personas

There are two sides to education--the student and the teacher--so both sides needed to have equal representation in the form of user personas. That is why teacher Sam Martinson and lifelong learner Kimmy Peyton were created to serve as the embodiments for their respective target audiences.

User Journey Maps

3. ideate

"Create many ideas for solutions."

Task Analyses

Book a Lesson

Entry Point:

Launch App

Success Criteria:

Confirm Lesson Booking

  1. Download App

  2. Launch App

  3. Sign Up

  4. Onboarding

  5. Search for teachers

  6. Select teacher

  7. Check teacher availability

  8. Select class time

  9. Pay for lesson

  10. Confirmation of booking

Conduct a Lesson

User Personas.png

Entry Point:

Launch App

Success Criteria:

Complete Lesson in Virtual Classroom

  1. Launch App
  2. Sign In

  3. View upcoming lessons on calendar

  4. View learner's lesson history

  5. Determine next lesson topic 

  6. Go to “Planning” screen

  7. Search for lesson topic

  8. Save lesson plan for next lesson

  9. Send pre-work to learner 

  10. Enter the “classroom” to conduct lesson

  11. Complete lesson using virtual classroom

User Flows

Confirm Lesson Booking – 1_2x.png
Complete a Lesson – 1_2x.png

Sitemaps

Although the app would require a majority of the same features for all users, the most important pages for teachers and learners are completely different. To account for this, two sitemaps were created to lay implement orderly information architecture.

 

When creating my sitemaps, I first employed two methods in order to determine what to include and how to organize the app. First, I created a Mobile First Design Plan to provide guidance for everything that should be provided StudyRoom. Then I distributed an Open Card Sort on Optimal Workshop to get peer and user feedback on organization.

4. Prototype

"Develop an MVP of the solution."

Low-Fidelity Wireframes

I initially made the mistake of focusing on high-level details in my first attempt at paper prototypes, but utilizing a broad-tipped marker instead of a pencil allowed the structure of the app to present itself better in my designs. I also started by using larger pieces of paper to get a sense of the "big picture" before moving on to traditional templates. This helped me work from big-to-small in order to really bring the user flows to life in paper form.

Splash / Intro

Onboarding Sketch.png

Onboarding

Home Sketch.png

Home (Learners)

Search Sketch.png

Search Results

Mobile

Desktop

Splash / Intro

Home Desktop.png

Home (Learners)

Mid-Fidelity Wireframes

Once the user journey had been visualized and manifested in paper form, the natural course of action was to increase the fidelity and move the wireframes into the digital world.

 

To create the mid-fidelity wireframes, Adobe Xd was chosen for two main reasons. First, was the familiarity of the program to me while acting as the UI designer in this stage of the design process. The second reason was because of how easy it is to convert the wireframes into working prototypes within the program which would be important later.

Mobile Intro

Splash / Intro

Registration.png

Registration

Mobile Onboarding 1

Onboarding

Mobile Marketplace

Marketplace / Home (Learners)

High-Fidelity Mockups and Prototype

After gathering critical feedback from my peers, tutor, and mentor on what did and didn't work with the mid-fidelity prototypes, the design was iterated upon and the fidelity increased to create high-fidelity wireframes for a working prototype.

 

The highlight of the StudyRoom is the virtual classroom environment. Because this would be important to test in usability testing, I had to be creative in order to replicate the interaction that users would be afforded in the final product.

Intro 2.png

Splash / Intro

Registration.png

Registration

Onboarding 1.png

Onboarding

Marketplace.png

Marketplace / Home (Learners)

5. Test

"Test the solution on real users."

Usability Testing

Methodology

Usability tests were conducted by employing the Moderated Remote Usability Testing method online. Participants for the tests were selected to represent specific target audiences that are represented by the primary personas Kimmy and Sam.

Goal

The goal of these tests was to assess the learnability for new users interacting with the mobile application for the first time. I wanted to observe and measure how well users understand the product, its purpose, the value of its features, and the ease with which users are able to complete basic tasks such as registration, onboarding, searching on the app, and completing a lesson.

Test Objectives
  • Determine if participants understand the purpose and value of the app quickly and easily.

  • Observe the process participants employ in order to search for teachers and book a lesson with a new teacher.

  • For participants who are teachers, observe the process to search for and use a premade lesson plan for an upcoming class.

  • Observe how participants navigate to the classroom and how they react to completing a lesson in the virtual classroom environment.

Scripts and Prototypes

Participants

Usability Test Participants.png

Test Results

Aside from one in-person test that needed to be canceled to due COVID- related circumstances, all of the usability tests were successfully completed as scheduled. Single Ease Questions (SEQ) were employed at the end of each task to gather quantitative data from the sessions. The recordings of the sessions were then reviewed and analyzed to create an affinity map. The findings from the process of affinity mapping were compiled on a rainbow spreadsheet and a virtual, solo "dot-voting" was completed by highlighting the five most important issues exposed in the usability test sessions.

Key Issues

  • Students wanted quit because they weren’t comfortable providing payment information. (High Severity)

  • Teachers used the wrong “Registration” button. (Medium Severity)

  • Participants are not aware of the in-class toolbar and its functions. (High Severity)

  • Teacher stats are not given priority on any screens. (Medium Severity)

  • Teachers are not sure what the payment screen is for during registration. (High Severity)

Key Issues 1
Key Issues 2

Preference Testing

After concluding and reporting the findings of the usability tests, preference testing for two screens was determined as the next appropriate step in refining the designs of the app. The two preference tests were conducted using UsabilityHub.com to host the tests and produce statistical results for output.

 

The test for the introduction screen was distributed to any willing participants in various Slack channels while the test for teacher's home screen was directly advertised in groups consisting exclusively of teachers on both Slack and Facebook. 15 participants completed the introduction screen test and 20 participants completely the teacher's home screen test.

Preference Test 1
Preference Test 2

Final Design

The feedback from my usability test participants, mentors, and peers was synthesized with the results of preference tests in order to craft the final designs for StudyRoom.

Sign Up.png
Choose Role.png
Registration.png

Splash / Intro

Sign Up / In

Choose Role

Registration

Home (Tablet)

Virtual Classroom (Tablet)

Home (Web)

Pre-Lesson (Web)

Handoff
&
Reflection

Style Guide and Design Language

An aspect of the UX design process that challenges me every day is the visual design element. This project provided me with an incredible opportunity to learn about concepts like Gestalt Principles, typography, and color theory in order to polish the final design of StudyRoom. Even the process of choosing the name “StudyRoom” was something that I spent many hours iterating upon before finding the perfect name to represent my product.

 

Basing my color palette on chalkboards led to a really beautiful combination of colors and it also appealed to my target audience. Conveniently, the target demographic of "adult learners" would be the exact group that I could expect to feel a sense of nostalgia while interacting with StudyRoom. From there, it was relatively easy to start bringing the other UI elements into a conformed design. All of the colors and elements used on StudyRoom were chosen with inclusive design as a primary consideration.

Link to Full Design Language Guidelines

StudyRoom Style Guide.png

Conclusion

StudyRoom was designed to solve a novel problem for one of the oldest industries in the world. Although we are now returning to “normal” around the world, my research has shown that online education for adults is here to stay. By bringing interactivity into the online environment, StudyRoom makes online education more effective, impactful, and just plain fun! Addressing and meeting all of the initial and redefined goals along the way allowed StudyRoom to blossom into a well-crafted solution that could truly help people all around the world.

Future Steps

Although the requirements of my CareerFoundry assignment have been met, the future of StudyRoom may still have life. Throughout the entire process of researching, designing, and testing StudyRoom, the reception for the concept was overwhelmingly positive. Teachers truly yearn for a video-calling platform that offers the interactivity StudyRoom provides. I hope to find enthusiastic UI designers and front-end developers who would like to collaborate on this project to bring it to fruition in the future.

Thank you for watching!

Check Out My Other Projects

bottom of page