Cosmos
How might we find a solution that will improve learning outcomes with online tutoring?

Preface

For this project, a linear UX process (waterfall!) was used, but all UX projects will not flow in a sequential order. A UX process won’t always be linear because it involves various stages and iterations that are not necessarily sequential. Unlike a linear process where one step follows another in a predetermined sequence, UX design is an iterative and fluid process that involves continuous feedback and adaptation.

As well, each stage may overlap or occur in a different order. For example, I might need to go back and revise wireframes after conducting user testing or incorporate new ideas during the development phase.

In conclusion, UX design is not a linear process because it involves continuous feedback and adaptation, and each stage may overlap or occur in a different order based on my needs as the designer and user feedback.

Now that we’ve gotten that out of the way, let’s learn about online tutoring!

Digging in

I began my research by surveying parents to gauge their thoughts on tutoring, both in-person and online. All participants were parents, and 92.9% had never used an online tutoring service. However, 92.3% of those surveyed expressed interest in using online tutoring if it would benefit their child's development. Learning this was a major source of motivation for me.

Following the survey, I conducted interviews with five parents to gain a deeper understanding of their reasons for either using or not using online tutoring services. From these interviews, I discovered that parents believe online tutoring can boost their child's confidence, provide a positive experience, and improve their focus. Some parents also mentioned that if tutoring was presented as a game or a fun activity, their child would be more receptive to it.

These insights helped me to empathize with the users of the product I'm working on, as I realized that parents want their children to receive the help they need to succeed in their education. On a personal level, I received Algebra tutoring as a teenager, and although I was initially hesitant, it ultimately helped me perform well in the class.

Making sense of it all

Affinity Mapping:

To analyze the qualitative data collected from the interviews, I utilized an affinity diagram. This allowed me to identify patterns and trends among the responses from the interview participants.

The affinity diagram was particularly useful in revealing that parents shared similar views on tutoring.

When conducting interviews, a significant amount of information is gathered. However, the affinity diagram helped to organize and make sense of the thoughts and feelings expressed by the parents.

Empathy Mapping:

After completing the affinity mapping session, I used the information to develop an empathy map for the user. This helped me to gain a deeper understanding of the target audience and their needs, based on the insights gathered from the affinity map.

Through the empathy map, I was able to consider the user's perspective, including their goals and challenges when considering a tutor for their child.

The process of creating the empathy map was crucial in developing a solution that could build trust with the parents and help the child see the positive outcomes of tutoring.

Overall, the empathy map helped me to better understand the user and their needs, which was essential in designing a solution that would resonate with them.

Who’s gonna use this?

Once I felt like I learned a lot about the parents’ needs and wants, as well as receiving information about their child/children, I built 2 User personas for the Cosmos application.

Keeping the users' concerns in mind, along with the insights gathered so far, I focused on the problems at hand:

1. How can we make the tutoring experience engaging and stimulating for every student?

2. How can we develop a tutoring solution that fosters confidence and concentration in students?

3. How can we provide regular updates to parents about their child's progress in the course being tutored?

4. How can we ensure that students experience growth and progress in their studies through tutoring?

5. How can we minimize the potential frustration that students may experience when starting a tutoring program?

By addressing these key questions, we can design a tutoring solution that meets the needs and expectations of both students and parents, while also delivering positive educational outcomes.

Thinking it through

I began by creating sketches for a possible solution to the problem. My aim was to design a series of sketches that would facilitate the primary action, which was onboarding to the Cosmos application. The User's secondary action would be to schedule a tutoring session. Initially, I created dropdown components and traditional form fields to gather all the necessary information from the User. However, upon completing and organizing the screens, I realized that collecting too much information during the sign-up process might irritate the user. Despite this, I decided to proceed with my initial sketches and conduct a guerilla usability test.

I conducted a guerilla usability test of the Marvel prototype with 5 participants and received feedback. Based on the feedback, I learned the following:

1. I needed to shorten the onboarding process. Although users appreciated the amount of information I wanted to capture, I did not need to collect all of it to provide a satisfactory signup and scheduling experience to the User.

2. Parents were uncertain about where they would be redirected after signing up and scheduling a tutoring session. Consequently, I started thinking about ways to offer a dashboard to the Parent User.

Here's the link to the sketch prototype (Marvel): https://marvelapp.com/prototype/h04b8d4

The Path of Interaction

After sketching, and before the guerilla usability test, I created the User flow, in which the flow takes the User through onboarding, then scheduling a tutoring session in Algebra 2.

Link to User flow (PDF): https://bit.ly/303orG1

My initial thought upon creating the Cosmos application was to allow for the Student to sign up, so the User flow above was initially made for the Student, but after some thought I realized I want the Parent to go through the onboarding and scheduling process.

My thought behind that is that my goal is to gain trust with the Parent first, then allow the Parent to introduce their child to the tutoring service.

Plus, with this flow, I was able to see the steps for the onboarding process, in which that reinforced my need to shorten the onboarding and scheduling process.

Moving on, next up I wanted to begin wireframing, essentially building a blueprint for the Cosmos application.

Creating a blueprint

I enjoy the wireframing process because it allows me to really start gathering an idea of what the minimum viable product (MVP) might look like, but without concentrating on the colors and general styling of the product.

The first thing I wanted to work on with the wireframing was the flow of the screens, basically working to find the right amount of information being collected on each screen, as well as removing some information that might not be necessary upon the onboarding process.

The view of the User onboarding, as well as class scheduling process, is below. I felt good with this concept because the onboarding process had been shortened, and right after the User signs up, they’re directed to the scheduling process.

The User does not necessarily have to be directed to the scheduling process right after onboarding, but I knew I wanted to test that process with my hi-fidelity screens later.

As well as the flow for the onboarding process, I included wireframes for what the Home screen, as well as the User profile, and profile settings, screens will possibly look like.

I liked my progress with these wireframes, but before brainstorming on concepts for the MVP (minimum viable product), I decided to create a wireflow to check the interactivity at each step of the onboarding process.

Wireflows

I moved on to creating a wireflow for the Student onboarding process. I wanted to see the flow for the user, documenting the interactions taken to create an account, then begin the scheduling process.

Wireframes are a great way of showing layout, but they don't describe interaction well, and they are sometimes poor at documenting the layout of digital products that have a lot of dynamic content, such as mobile apps.

Branding

After completing the wireflow, I began branding Cosmos to a set of standards that align with the mission and goal of the product. I want the User to feel connected to the Cosmos application so that its usage becomes second nature.

Brand Platform
The cosmos is the universe, thought as a peaceful and calm system, or any peaceful and calm system. Using the word cosmos rather than the word universe implies viewing the universe as a complex and orderly system or entity; the opposite of chaos.

An example of cosmos is the belief that everything in the universe is connected.

With Cosmos, we strive to connect students with tutors in order to remove some of the complexity surrounding learning in a unique environment. The unique environment in this case is an elearning platform.

Mission/Vision
Any student should have access to tutoring, or learning tools to advance their development in a chosen topic. We want to bring students and tutors together to provide a learning platform that feels like a community of students that are eager to learn.

Brand Personality
Cosmos is welcoming, concerned about a student’s experience and needs, & wants to help students at all levels succeed.

Brand Attributes
Caring, welcoming, bright, energetic.

Logo
Below are the references for use of the Cosmos logo, for both Mobile and Web usage.

Visual Design

Before starting on the MVP, I wanted to define a mood and style for the interface - something I could reference as a way to maintain consistency throughout the Cosmos interface.

For the Cosmos UI itself, I wanted it to feel light, not overwhelming in any way, because a simple UI will help the experience feel less complicated.

From here, I started working on the Cosmos style guide. At this stage, I was feeling excited because I knew the concept was really beginning to come to life.

When I started working on the color palette for Cosmos, I initially wanted to work in shades of purple because the color purple has been known to spark creativity.

I like purple a lot, but after giving it some thought, I decided to use Blue as my primary color - mainly because blue is a color that represents education. To accent the Blue, I used bright colors, in which the brighter colors bring about a feeling of excitement at times.

For accent colors, I used shades of grey - tones I felt would work well for content and link colors. I also knew I wanted to use drop shadows in areas, just to add some depth to the interface. Once I had those issues worked out, I decided to move forward and begin building the Cosmos MVP!

MVP Build

Becoming acquainted with the Cosmos MVP!

Upon the initial build of Cosmos, I felt really charged up about preparing it for usability testing.

I knew I tried my best to lay things out the way I intended them to work. Above, on the left, is an image of the Cosmos splash screen, and on the right is an image of the Cosmos home screen. With the home screen, I used horizontal scrolling for the category, new classes, and new tutors images, even though I wouldn’t be testing that functionality in the usability test.

Below is a view of all screens that compose the onboarding, then scheduling process for a student.

I added abstract shapes to the back of each screen - I wanted to add something that could add fun and fluidity to the design, as well as add depth.

Link to all screens (PDF): www.shorturl.at/enpzG

At this point, I wanted to put a prototype together in InVision, then allow my 5 test participants to go through both the primary and secondary actions to see if the flows were working efficiently and smoothly for them.

Link to prototype (InVision): https://bit.ly/3kiajiX

Testing, testing

For the Cosmos usability test, 5 participants were asked to complete two actions - one, I wanted to see if the User would be able to complete the signup process efficiently, and I wanted their feedback on it. For the second User action, I wanted the User to schedule a Math tutoring session, and I wanted their feedback on that action as well.

Two rounds of moderated usability testing were done, and all the sessions were done remotely. After each session, I documented my findings to gain insight and to work on implementing any changes that would benefit the Users’ experience going forward.

Findings - 1st Round of testing:

Overall:
All users felt the signup process was efficient and met their needs. After hearing that, I was happy that I shortened the number of screens/steps for the signup process.

Issue 1:
I realized how important it would be for the Parent to communicate with the chosen tutor beforehand.

Summary:
• Parents would like to communicate with the chosen tutor beforehand. A parent expressed how it would be ideal if she could speak with the chosen tutor in order to explain what her child’s struggles are, as well as to get a feel for who their child is meeting with.

Recommendations:
• I think it would be ideal to add a feature where the Parent can schedule a video session, or possibly even a phone call with the tutor beforehand, so nothing gets lost in translation before the tutoring session.

If not a one-on-one video session with the tutor, another parent suggested the ability to view an introductory video from the tutor, where the tutor can introduce himself and speak on his credentials.

Iteration:
For this issue, I added a screen which allows a Parent to view an introduction video for the chosen tutor, or choose to schedule a video, or phone, call, to discuss their child’s needs with the tutor beforehand.

The screen to learn more about the chosen tutor is accessed from the Learn More section, located within the tutor’s profile. From here, the User would be able to learn more about the tutor before making their decision on whether to schedule a session or not.

Issue 2:
I realized how important it would be for the Parent to have a dashboard, where they can view information about their child’s progress, as well as upcoming sessions.

Iteration:
I added a dashboard for the Parent so they’ll be able to view information about their child’s progress, as well as information about upcoming assignments.

Above, a view of the dashboard that was implemented to provide information for the parent, about their child’s progress.

Findings - 2nd Round of testing:

Overall:
All users felt the signup process was efficient and met their needs. Also, the iterations on the Cosmos application after the 1st round of usability testing were received well by the participants in the 2nd round of testing.

Issue 1:
A parent thought the User flow was fine, and she was able to see the necessary information on the dashboard, but wanted to know how the whiteboard interaction would be between the Student and Tutor - would the sessions always be help via an outside app (Skype, Zoom), or would video sessions be held within the Cosmos app itself?

Summary:
• The Parent wanted more information on how the actual, virtual session would take place.

Recommendations:
• It would have been ideal to have a virtual whiteboard concept in place for the User to see, in which that would definitely be added upon a future iteration. Ideally, I would like the sessions to be held in-app, with other applications such as Skype or Zoom, as the secondary methods.

Issue 2:
A parent User wonders if the Tutors will have background checks done prior to meeting with students.

Summary:
• The parent would feel more safe knowing the Tutor her child is meeting with has been vetted beforehand, to ensure safety at all times.

Recommendations:
• I recommend adding a notification within the Tutor’s profile, showing Parents that a background check has been done, and/or is on file for the tutor. Being able to iterate further on the application would give time to add this feature.

Issue 3:
Will there be a way for a Student to select a ‘panic’, or ‘alert’, button while in a session if they do not feel comfortable about something during a session?

Summary:
• A Parent stated that having a way for the Student to alert someone while in a session would help put the Parent at ease, as well as adding a safety protocol to the session.

Recommendations:
• I highly recommend adding a way for the Student to alert an authority if they begin to feel uncomfortable or threatened while in a tutoring session. Being able to iterate further on the application would give time to add this feature.

Issue 4:
A map where Parents and Students can see if there are tutors nearby, in case an in-person session would be more efficient than a virtual session.

Summary:
• Would a map where Parents and Students can see nearby tutors help the User experience? A parent expressed how it would be ideal to have a map to see nearby availability of tutors, in case an in-person session would be more efficient than a virtual session.

Recommendations:
• I think adding a map feature would gauge more interest, so adding that interactivity would prove beneficial in further iterations. Being able to iterate further on the Cosmos application would allow time to add this feature.

Conclusion
Working on the Cosmos application was such an amazing and eye-opening experience. I learned a lot with the usability testing that was done; time constraints did not allow for further iterations on the application, but my recommendations for features to possibly add, so the User experience can be enhanced, have been documented.

Insights from my experience:

1. If I were beginning this project again, I would make the primary touchpoint a tablet. I was taking a mobile-first approach initially, but I feel using a tablet for the Cosmos would provide a more immersive & interactive experience, allowing more room for a camera and whiteboard to coexist within the screen’s real estate during a tutoring session, if needed.

2. Asking the right questions during User interviews is key to the process. If I were to begin the process again, I would work on developing better questions to ask the User.

3. If there were more time, I would have looked for a way to add a virtual whiteboard. This component would play an integral role in the student’s development and understanding of what they’re being taught.

4. Seeing Cosmos develop from beginning to end was great; working with a team would only make it better. Wearing a hat for every step of the design process was a very good experience for me; if Cosmos were built and iterated upon in a team environment, some of the pain points could have been realized earlier in the process & could have been implemented in the initial release of the MVP (minimum viable product).