Solo Project

Immerse

Immerse is a mobile application that aims to transform the user’s environment using background and sounds with the objective of increasing productivity and higher academic scores.

Overview

The Covid-19 Pandemic forcibly took students from the classroom and back into their homes. As a result, virtual learning students in K-12thgrades have faced a variety of obstacles such as low academic performance. I planned on using design and research to uncover solutions for these users.

The Problem

  • 97% of U.S. educators report learning loss from students in K-12th grade as a result of the transition into virtual learning. (CNN)
  • In a survey I completed comprised of 20 students, 57% report that there are too many distractions at home to focus.
  • Students associate home with a space of relaxation, so concentration [becomes] difficult. (ScienceDirect)

Solution

  • Mobile application that changes the environment of the user using backgrounds and sounds.
  • Features such as inviting friends to promote socialization and pomodoro timer to stay on task.
  • Personalized recommendations based on productivity habits to improve said habits.

Immerse Project Details

Timeline

10 weeks
February 1st-April 4th 2022

My Role

UX Designer
UX Researcher
Asset Collector

Platform

IOS

Tools

Invision
Figma
Photoshop CC

Project Type

Solo Academic project apart of BrainStation UX Bootcamp

Double Diamond Design Process

Discover
Define
Develop
Deliver

I used the double diamond framework as a guide to arriving at my solution. I discovered the problem through problem identification, secondary research and interviewing. I defined my insights through affinity mapping and theme creations. I developed on ideas through sketching, wireframing and prototyping. Lastly, I delivered a hi-fidelity prototype and understanding of the process through next steps and key learnings.

Back to top
DiscoverDefineDevelopDeliver

Problem Statement

Discovering the problem

This project was a design challenge given by BrainStation to find a human-centered problem of interest that requires a digital solution. I decided to research issues that the Covid-19 pandemic brought to people because the pandemic was a major change to everyone's daily living.

Keeping students at the forefront, I focused on virtual learning because according to 97% US educators have reported there has been some learning loss in students compared to previous years of in-person learning (CNN).

With such a significant number, as a student, I was very interested in finding a digital solution.

~

Secondary Research

Identifying obstacles with virtual learning

Investigating the problem was the first step towards a solution. I started identifying what obstacles virtual learning students were facing when moved online and I found a number of sources that detailed the perils of virtual learning.

Loss of
Confidence

Students are losing their confidence because it’s hard for instructors to provide individualized feedback. (Source)

Loss of
Space

Students are facing a loss of space to work and study with multiple family members at home.
(Source)

Loss of Social Interaction

Students are struggling with the lack of social interaction that traditional schooling provides.
(Source)

Loss of
support

60% of parents with primary school children are having difficulty supporting their children’s learning at home.
(Source)

~

Assumptions

Facing the assumptions I created

Understanding the losses of virtual learning students helped me identify the preconceived notions I had about how students felt about their virtual learning experience. From my research, I assumed that: 

  • Students are suffering from a lack of space because of multiple family members at home or their reliance on how much space in-person schooling gives them.
  • Students aren’t motivated enough with their studies because they are in the same place and seeing the same things everyday.
  • Student’s can’t socialize as easily while they are studying at home. They are limited to seeing their friends only during class time without too much group interactions.
  • Student’s were used to in-person schooling all their lives and now that they have to prepare for an entirely new way of learning, they aren’t as confident that they’ll be able to succeed.

With my assumptions ironed out, I'm able to cross-reference these ideas later to see if I was on the right track about how virtual learning students were feeling in their education.

~

Primary Research

Connecting to Virtual Users to find out more

After evaluating my secondary research and thinking about my assumptions, I was ready to talk to my user. I utilized user interviews and user surveys to find answers.

I spoke with three different users on Zoom between K-12th grade that are currently experiencing virtual learning or have experienced it within the last year.

Insight #1

In an interview with Jeremih (1st grade student),  I found that Jeremih looks forward to social interactions from his classmates.

Virtual learning in turn makes it harder for him to communicate.

Insight #2

In an interview with Adrianna (6th grade student), I found that Adrianna has trouble staying focused in class because of the distractions that home brings.

It isn't easy to stay productive when working at home.

Insight #3

In an interview with Nasia (12th grade student), I found that Nasia misses the individualized attention that instructors would give during in-person lectures.

It's harder for instructors to give individualized feedback virtually.

~

Surveys

Did I talk to enough users?

Three interviewees weren't enough to identify an accurate solution. Working against a deadline, I went with creating and distributing a survey on LinkedIn for more insights.

After gathering 20 results, I was able to identify some key findings:

Click on images to view larger version

~

Affinity Mapping

Identifying patterns from interview findings

In a affinity map, I organized the soundbites of my interviewees into pain points, motivations and behaviors.

After organizing the soundbites, I created themes from the insights that I was learning to find the most opportunity for a solution.

Click on images to view larger version


Noticing that the theme lack of focus had the most pain points, I chose this theme to find a solution for students.

~

Project Brief

How might we help students using remote learning stay focused in order to preserve their academic performance

Journey Map

What is the virtual learning experience?

In the journey map that I created, I noticed that there is an opportunity to help Samantha improve her remote learning experience, if we can think of solutions to limit her distractions from lunch onwards.

Click on images to view larger version

User Stories & Epics

Honing in on a solution

To narrow down a solution that works for students, I created 16 user stories and organized them epics. I chose learn producitivy habits as my chosen epic because it's the solution that would help target the lack of focus virtual learning students were experiencing.

By changing the environment of the student, we can increase productivity to improve academic scores.
15 user stories and organized them into user stories

Click on images to view larger version

Task Flow

Creating a task for the user

With the primary theme identified, I decided that the task that our user would complete would be create your learning room. This was based on the user stories, chosen insight selected and research that I've found to support that personalized desks can increase productivity (Sciencedaily).

Using the idea that personalization can help you become more focused, I initially created the task of creating your own learning room.

Click on images to view larger version

~

User Interface Board

Finding Inspiration

Before starting to craft a digital solution, I needed to see examples of mobile interfaces that would allow users to personalize their space. So I went ahead and created a UI inspiration board to gather ideas for my digital solution.

Image of User Interface board

Click on images to view larger version

Sketching

Initial design sketches

Once I spent some time finding inspiration, I was ready to sketch. I wanted my digital solution to be an application where you had freedom to make the space provided whatever you needed it to be. ‍

  • I added background modal instead of a background screen so you could still see the background while you added it.
  • I wanted the user to utilize sounds to really feel as if they were at the place they selected.
  • I added a feature where students can add their friends to their room for students that work best when they have a partner or a friend with them.
  • I created a motivation section that would give the user daily quotes to give students a sense of drive in their studies. 
  • Lastly, I added a pomodoro timer which I found particularly useful for reminders of when to focus and take breaks.
Login screen sketch

Login screen v1

Login screen email login

Login screen

Sketch of Immerse home screen

Home screen

Sketch of background modal

Background modal

Sketch of sound modal

Sound Modal

Sketch of invite friends modal

Invite Friends Modal

Sketch of pomodoro timer

Timer Modal

Sketch of daily motivation section

Motivation modal

Sketch of closed navigation window

Closed Nav screen

Click on images to view larger version

~

Mid-Fidelity Wireframes

Blueprinting the digital solution

After sketching out my solution, I decided to bring it to life in the form of grayscale wireframes. 

Click on images to view larger version

~

Usability Testing

Ideate, Ideate and.. Ideate

I completed 2 rounds of mid-fidelity testing with 10 different users. I provided my respondents with a scenario, recorded the testers thoughts and interactions and analyzed their thoughts within both sessions. You can view the detailed overview of the scenario and tasks completed here.

See below how I incorporated the feedback.

From this testing session, I found out these key points amongst many about my product:

  • The icons were too small in the navigation bars
  • Inviting friends should have a larger role in the application
  • There should be options to add backgrounds other than GIFs
  • The motivation section of the application as it stands isn't as effective for providing motivation.

I organized the qualitative data that I was learning from my users onto a Prioritization Matrix.

View the second version of my Mid-Fidelity Prototype

~

Usability Testing

Testing the changed solution

I completed another usability testing session to see if my solution was something that would be useful and usable for students. I tested with another 5 users and organized the most common feedback below: 

  • Reading typography on a moving background is difficult for users
  • There should be a confirmation screen so the user knows that the productivity setting is active
  • The opening homepage shouldn’t be blank because it leads the user to believe the page is still loading or broken.
  • The productivity setting should be visible in multiple screens of the application so the user can’t miss the feature. 

I used this feedback to come up with the third version of my mid-fidelity prototype which I've included for you to interact with.

Brand Ideation

Creating a brand

After testing my mid-fidelity prototype and utilizing user feedback, I needed to figure out what the name of my solution would be. I created a moodboard that was composed of words that I wanted user’s to feel when navigating through the app. 

Words like creative, open, productive and imaginative were used to think of potential names for the brand.  I went with Immerse as the brand name because I want the user to completely engulf themselves in the new environment the app would bring them. 

Moodboard Image

Click on images to view larger version

Click on images to view larger version

Typography

Logo

Because Immerse allows people to personalize their app experience, I went with handwritten typographies for my brand logo which are known for personability.

I explored known brands with handwritten typographies for inspiration, looked through existing font familys and then sketched a few images on how my wordmark could look .

Click on images to view larger version

Ideation

Ideation

Making Improvements

Before injecting color into the application, I went over my usability testing feedback to see if it was feasible to make additional changes. I decided to include: 

  • Overview section: The productivity setting were really vague in showcasing how it could benefit the user. An overview section would give the user results on their productivity habits after a week of studying in the app and provide a recommendation based on those results.
  • Top navigation text: So users understand what each icon is for, so I added text underneath the navigation.
  • My Room: Option to see who's inside your room, so that the user knows that their friends have joined the room, if the user decides to invite friends.

Ideation

~

Updated Task Flow(s)

Revising the Task Flow

I realized that my original task was very broad and included screens that I revised before reaching hi-fidelity. I decided to create two tasks that are dependent of each other that you can view below.

  • Setup personalized room: Setting up your room is the first step to developing your focusing habits with the application. You would need to create your room and spend time studying in your personalized room so that the application can eventually give you feedback on the progress you've made. Once the timer and goal is set, you are able to begin studying.
  • Viewing productivity habits: To view your overview habits in full potential, you'd need to spend atleast a week inside of the application. Once you've spent a week studying with the application, it's able to give you a recommendation and allow you to see when you've been able to focus and when you've becomed distracted to develop better focusing habits.

Click on images to view larger version

UI Library

Organizing my digital solution into a library

I created a design system for Immerse based on the atomic design principles by Brad Frost. You can find more details about Immerse's color, grid/spacing specs, typography and more within the detailed images here.

Grids and spacing guideline Color specifications
Typography specificationsIconography specifications
Button specificationsMolecules specificationsExamples of Organisms in UI Library
Templates from UI Library
Pages from UI Library

~

Hi-Fidelity Prototype

Prototype

This is the current prototype of my Hi-Fidelity product, Immerse. There are a couple of tasks you can do as a user. 

  • Login
  • Turn on productivity settings
  • Add a new background
  • Add a sound (Figma doesn't allow sound)
  • Invite a friend
  • View who's in your room
  • Add a task
  • Turn on pomodero timer
  • View overview section
  • Close + reopen bottom navigation

This is the current prototype of my Hi-Fidelity product, Immerse. The bullets below are a few of the many tasks you can do as a user. 

~

Marketing Site

Marketing Immerse

After completing my hi-fidelity prototype, I worked on a responsive marketing desktop and mobile site to showcase Immerse. I learned from this process how to view my project from a business angle and explore how to advertise it to my users.

~

Key Learnings

Understanding the 'Niche' of my solution

I noticed that as I was finding inspiration, there were many applications that had a solution similar to the application I wanted to build.

I struggled with finding out what the niche of my product would be.

From this, I learned the importance of identifying other products with similar features to differentiate my solution.

Understanding Epics

Halfway into the design process, I learned that I didn't understand Epics as much as I thought I had.

Originally I thought of Epics as one worded themes when in reality they are extensions of user stories.

I learned that Epics aren't broad but instead a functionality focused action to reach a certain outcome.

Learning the difference between task flows and user flows

My task flow wasn’t a linear process because I felt that I needed more features to make my product different than those already on the market.

I learned that task flows focus on one specific task wheras a user flow can be more complex by adding all the decisions a user can make.

~

Next Steps

Find more feedback

I created a product that might work well for high schoolers and late middle schoolers but not so well for elementary schoolers.

Since my research was for student’s K-12th grade, In the future, I want to test my product on elementary schoolers and see how I can edit it to fit their needs as well as other grades.

Create more user stories

When creating my user stories, I had difficulty understanding what exactly my users needed because of the lack of interviews I was able to complete.

I want to spend more time creating more user stories so that I can properly assess the user's needs and motivations.

Recreate Task Flow

My task flow wasn’t the most linear process because I felt that I needed more features to make my product different than those already on the market.

I learned that task flows typically follow one specific task and I plan to re-create my task flow so it's easier to follow.

~