REMOTE EDUCATION
UX/UI CASE STUDY

OCT 2020

THE PROBLEM

Original School Website

Remote learning has diminished the supportive physical school environment previously provided to students causing parents to become homeschool teachers causing immense stress for both parents and students.

In additional, student are also constrained in their physical, social, and developmental needs.

THE SOLUTION

Redesigned School Website

In order to emulate a supportive physical school environment and provide parents some relief, implementing a learning hub will provide additional resources for both parents and students with lesson videos and direct messaging capabilities.

Also in incorporating daily challenges motivated by social sharing, students are provided an outlet for social, physical, and creative needs.

TEAM

Bonnie Ward

Bonnie
Ward

Omar Rehman

Omar
Rehman

Samantha Yee

Samantha
Yee

Brian Kim

Brian
Kim

TOOLS

figma google drive adobe creative suite trello github bootstrap 4 HTML CSS
computer and tablet mockup of West Holllywood Elementary School Website

MY ROLE

I took the role of Project Manager on the team. To keep us on track and assign work, the Gnatt Chart was used. I reviewed every part of the design process, created a new school logo, and was the primary Frontend Developer.

TIMELINE

2 week design sprint

design process

01

DISCOVER

proto-persona

We began our research by creating a proto-persona. We wanted to have a clear picture of who we were trying to reach so we could appropriately build our process on how we could properly obtain data. We gathered our collective knowledge, information from the media, friends with kids grades K-12, and teachers to visualize Carolina who represented all the parents struggling to balance life with work, family, and covid.

We held interviews to understand users’ motivations and needs on a qualitative level moving education from a physical classroom to a virtual classroom. Our goal was to gather how were parents, students, and teachers were handling the change in daily routines, navigating resources, and handling tech issues.

As the interviews took place, it was surprising to learn that covid-related information wasn’t lacking nor were tech issues were of concern. We could see how passionate parents were about creating a nurturing environment for their children in how they responded. We could also hear the stress and frustration in their voices as they spoke about their experience juggling with the new role of at-home teacher.

We took the opportunity to go deeper with a survey that would provide quantitive data to support data we had already collected from the interviews.

INSIGHTS

Melissa
Melissa

I am unable to work a full time job AND be my kids tutor! I am scared of COVID-19 but I need them to go back to school.

Andrew
Andrew

I have to re-learn all of the lessons my kid learns so that I can tutor her. It is so hard to have to help your kid and not know how.

Teresa
Teresa

Nothing compares to kids learning from other kids. They are lacking social time.

02

DEFINE

proto-persona

Each response was analyzed and placed on a card that could be sorted in an affinity diagram which not only provided insights but allowed us to fully empathize with our users. We then created an empathy map and begin to get to the root of the problem.

The problem was that remote learning has diminished the supportive school environment previously provided to students causing immense stress for both parents and students.

Parents are stressed by the lack of time, teaching resources, and supportive community.

Students are constrained in their physical, social, and developmental needs.

How were we going to overcome such massive obstacles? Originally, we had reviewed the Los Angeles Unified School District website but we realized that wasn’t where there was a need, even though there were issues with the usability and the design left a lot to be desired. We reevaluated our research and decided we could make the most impact at the school level. We selected West Hollywood Elementary School to redesign. Parents and student were logging into virtual classrooms through the school website. They weren’t even visiting at district website in nearly all cases. We backtracked slightly and completed a new heuristic evaluation and annotation of the West Hollywood Elementary School website. Aesthetically it wasn’t appealing, there seemed to be so much content that it was cluttered, there were videos all over the page, and the call to action was difficult to perceive.

We were ready to ideate. The issue we wanted to address foremost was the lack of mentoring support. How could we best support parents with teaching and provide a tool for students? We decided on creating a new feature that was a virtual learning hub. Parents could use it to watch lessons recorded during virtual classes to better understand the content and in turn help their children by explaining the content in another way. This would alleviate parents from wasting time on youtube or google trying to find answers.

We created a user scenario to help determine the best plan of action and storyboarded our idea. We were ready to card sort and implement this new feature as part of the redesign.

03

DEVELOP

proto-persona

Beginning with the wireframe, we tried various layouts to highlight the new features. We wanted the homepage to be easily navigated with clear sections to minimize the clutter and overwhelming look of the original website.

We purposefully kept it simple. Due to time constraints we were not able to test. We moved right into high fidelity mockups. Each of us had varying ideas so it was unanimously decided that we would each present, receive critique and move forward with the best design.

We chose the one that that emote happiness and youth yet was still professional that came from the creative mind of Samantha. We made modifications, adjustments and updated the content. It was one of the rare occasions that we could choose a font similar to comic sans without appearing unprofessional.

Click to view wireframe

design sample 1
design sample 2
design sample 3

Once the prototype came together we could start the usability testing and obtain valuable feedback from users. It lead us to iterate on our prototype three more times. It was important to get it right. Our usability test revealed that there wasn’t a clear call to action with the sliding hero images. They also wanted consistency in lining up elements rather than an artistic flare. Also, the cards needed more context. Users didn’t really know what they were getting or if they should click on the card button.



High Fidelity Prototype

iteration
style guide

As the style guide came together, we could proceed with front-end developing. We chose to challenge our skills utilizing bootstrap 4. We did overcome some obstacles due to how we had designed. The focus in the development was to finish the education flow. We created a virtual learning hub that allowed for teacher emailing and video viewing from previous classes.

04

DELIVER

Once ready to Front-end develop, I chose to challenge myself and used bootstrap 4. It did come with some struggles due to how artistically we had redesigned the website. I had to learn to manipulate and over-ride to customize it the way we had designed. With the help of Brian, I was able to build out the main virtual learning hub user flow.



View the redesign

West Hollywood Elementary School Website Redesigned
West Hollywood Elementary School Website new learning hub feature mockup West Hollywood Elementary School Website

05

Next

Ideally, the next step would be to:

  • build out the entire website to include global languages
  • design and build out the daily challeges sections
  • further the calendar display
languages selection feature share feature build out calendar feature build out

Takeaways

As the Project Manager, I needed to guide the team in thinking through various approaches and ideas so that the best could be chosen unanimously. It was extremely important to build trust and communication right away.

I spent a lot of time reviewing the work and the problem through each team member's point of view. It isn’t enough to follow just one approach because innovation is a process. A breakthrough is when all ideas are considered equally.

I had to be considerate of our time frame with only two weeks, so selecting an attainable goal was key. As much as the team and I wanted to solve every problem with one go, it just wasn't feasible. We needed to utilize each team member’s strength to successfully meet our deadline and present our work.

Overall, I was lucky to have been a part of such a passionate group of individuals. We collaborated well and each brought a different set of skills. We were able to overcome challenges easily, but as UX/UI designers we could always improve, learn, and continue to make spectacular user experiences.

Thank you!

Back to Top