top of page

The Challenge -

Designing for educators and parents.

Introduction

GO Learning Expeditions is a supplementary education platform that provides academic and adventure learning content for parents, pods, expeditionary teachers, and children with the goal of taking students off screens and into the world.

 

We were given the opportunity to design a website for our client. The target device is a desktop.

problem

Due to the current global health situation and social distancing procedures, more individuals are looking for ways to take learning on the road. 

GO Learning Expeditions wants to provide project-based learning expeditions that allow children the opportunity to learn standards-aligned curriculum through active participation in experiential learning out in the world. 

We were given the opportunity to improve a way to help parents and educators take learning outdoors.

Solution

We believe that by providing parents with an easy way to find trip based curriculum, that features a "teachability rating", parents will feel more confident in their ability to educate their children outside of the classroom.

We believe that by providing free expeditionary lesson plans and resources, educators will have the ability to create engaging lessons for their students outside of the classroom regardless of socioeconomic status or monetary ability of the school.

team

The team equally shared responsibilities in research and design.

 

I co-lead the research throughout the process. I was responsible for half of the user interviews, synthesis of the data, personas, and usability testing. I co-designed, refined, and wrote the content on the landing page, and product listing page. Iris and I determined the design system (colors and typography), with input from the team. I designed, refined, and wrote the content on the team page and the next step mockups (donation page). 

As a team, we split up responsibilities regarding competitive and comparative analyses. My teammates, Dunn, Iris, and Jeff had various responsibilities including journey maps, user flows, sitemap, and Zeplin hand-off. Dunn and Iris designed and hand-illustrated the assets for the team. Dunn was responsible for prototyping. Each team member contributed significantly to the research, design, and overall flow of the wireframes.     

Timeline

3 weeks

ROLe

Researcher

UX Designer

Team

Dunn Del Mundo

Iris Cheung

Jeff Morrow

Tools
Figma.png
asana.png
whimsicalicon.png
lucidchart.png
zeplin icon.png
Deliverables

User Interviews

Competitive and Comparative Analysis

Affinity Mapping

Personas

Journey Maps

User Flows

Sitemap

Usability Testing

A/B Testing

Wireframes

Mid-Fidelity Prototype

High-Fidelity Prototype

Zeplin Hand-Off

Mockup PLP.png

Research

Competitive and comparative analysis

Prior to delving into interviewing, we wanted to gather more data. We wanted to focus on the features various educational and adventure platforms offered and what we can learn from each platform.

Methods

Competitive Analysis

Comparative Analysis

User interviews

Affinity mapping

Personas

Competitive Analysis

We analyzed educational competitors and concluded that our competitors did not have all of these features: curriculum, free resources, reviews, and teachability ratings. We can help fill this gap in the market.

Chart 1b.png
Comparative Analysis

We conducted comparative analyses within travel products, educational subscription boxes, and adventure products. We wanted to identify how these companies display their educational and adventure products, as well as various features like filters and bundles, to determine how we can further implement similar design patterns with Go Learning Expeditions.

GLE Comparative Analysis.png

There are numerous products that offer curriculum, and products that offer adventures, but there is a need for a product that combines the two together.

Due to the current global circumstance of social distancing, there has been an influx in taking learning on the go so that individuals can use the world around them to learn wherever they happen to be.

We wanted to inquire more from users who utilize any type of online learning platform, curriculum, and/or expeditionary learning.

User Interviews

6 Interviews

Educators

Parents

We interviewed 6 individuals to further understand users' needs and pain points when utilizing online learning, curriculum, and expeditionary learning.

individuals seek Empowerment and understanding 
Users want to be able to teach the curriculum
Users want resources when planning trips

We created an affinity map from our interviews and collected two key insights.

 

Through interviews, individual shared that they are concerned about their ability to teach the curriculum, and that they want free resources when planning trips.  

Meet Paula, the Parent

Paula is a mother with several children in different grade levels.

After the current health situation, Paula has been stuck inside the house for the last six months with her children. Paula wants to get on the road, and explore the world around her with her kids, while also providing learning opportunities along the way. Paula's been working full-time so she really doesn't have time to plan out the educational parts, and she doesn't really know how. It just feels like too many moving pieces.

She really just needs an easy way to take learning on the road for her kids.

Paula Persona 1.png
Paula Persona 1.png
Paula, the Parent

Paula Persona

"I just need an easy way to teach my children on the road"

GOALS

  • Feel confident about teaching her child appropriate curriculum for her children's needs

  • Have a way for her children to take ownership of their learning

NEEDS

  • An easy way for her to teach her child curriculum

  • A curriculum to help plan educational trips

  • Way to accomodate for various learning needs including age, grade level, and curriculum

FRUSTRATIONS

  • Difficulty in teaching her children curriculum

  • Not having enough time/resources to help her children

Meet Eddie, the Educator

Eddie is a veteran teacher living in Los Angeles. He has been teaching at a charter school in a disadvantaged neighborhood for the the last 7 years. He grew up in this neighborhood and is fully aware of the lack of funding that plagues local schools. He recently learned about the expeditionary learning model and is eager to pilot it with his class. He is looking for ways to implement expeditionary learning with the limited resources and budget of the school he works at.

"I wish i could try expeditionary learning with my class, but it might be too expensive"

GOALS

  • Engage his students in academic learning in an outdoor environment

  • Student learning is aligned to standards

NEEDS

  • to have access to a curriculum that he can use for an expeditionary learning field trip

  • Affordable resources

  • Information based on local destinations/sites

FRUSTRATIONS

  • Might not have enough money/resources to afford trip

  • Large class size

Eddie Persona 2.png
Eddie Persona 2.png
Eddie, the Educator

Eddie Persona

what do users need?

Through synthesizing the research, two problem statements emerged.

Paula Persona 1.png
Paula Persona 1.png

Paula

Parents need a better way to facilitate academic learning on an upcoming family trip because they are not comfortable with their ability to teach the content.

Eddie Persona 2.png
Eddie Persona 2.png

Eddie

Educators need a better way to access curriculum that can be used to engage students in expeditionary learning, but they may not have the budget to purchase a package.

ideation

How Might we?

We wanted to explore how to solve the problem for the users.

Methods

HMW

Journey Maps

Sitemap

Design studio

Wireframing

Design review

HMW

Provide an easy way for parents to teach their child curriculum?

HMW

Provide access to underrepresented groups?

HMW

Provide students a way to take ownership of their learning?

HMW

Accommodate for the diverse learning needs of students?

HMW

Facilitate a convenient way to choose the best package for the person's needs?

HMW

Provide a way for students to socially interact?

The two HMW's we focused on were:

HMW provide Paula with the ability to locate a curriculum plan that is easy to teach her children on her own?

HMW provide Eddie with a cost effective way to educate and engage with his students outside of the classroom?
solutions

To solve the problem, we used data to inform our decision.

 

We believe that by providing parents with an easy way to find trip based curriculum that features a "teachability rating", parents will feel more confident in their ability to educate their children outside of the classroom. 

We believe that by providing educators with free expeditionary lesson plans and resources, educators will be able to create new engaging lessons for their students outside of the classroom regardless of the socioeconomic status of the school they teach at.

Journey Maps
Paula's journey
Journey Map Paula.jpg
eddie's journey
Journey Map Eddie.jpg
initial sketches

We completed a design studio sketching the task flows for each persona.

Dunn Sketch.png
Jasmine's Sketches.png
Iris Sketch 1.png
Iris Sketch 2.png
Jeff Sketch 1.png
Jeff Sketch 2.png
SiteMap

Before moving into mid-fidelity wireframes we created our sitemap to ensure site organization.

GLELandingnobg.png

Go Learning Expeditions

Website

design

Mid-Fidelity wireframes

After combining the sketches and implementing the sitemap, we turned the initial sketches into digital wireframes. We began building our mid-fidelity screens. 

PLP.png
Meet Our Team.png
Paula's Mid-Fidelity wireframe

Paula arrives at the landing page, she searches for a plan by entering in her children's grade, desired destination, and duration. She arrives at the product listing page. Here she has two choices: to choose a package of her liking and continues on the purchase flow, or requests a specific consultation with the GO Learning Expedition team for a custom expedition plan.

Eddie's Mid-Fidelity wireframe

Eddie, new to expeditionary learning, arrives at the landing page. He wants to learn more about expeditionary learning, and what GO Learning Expeditions offers, so he will explore the landing page. After learning more, Eddie will click on "build on your own" to explore the free resources. He will download a free resource and explore the other websites.

Usability Testing Findings:

Mid-Fidelity Prototype

6 users

100%

completion

rate

(task 1 & 3)

We tested 6 users, per flow, with a completion rate of 100% for task 1 and task 3 flows. Task 2 had a completion rate of 83%.

We tested users with the following tasks:

Task 1: Please download free resources so that you can create your own expeditionary learning plan

Task 2: Submit a request form for a custom expedition consultation

Task 3: Locate and purchase a package learning plan for a Hawaii trip

After analyzing the test results:

  • We eliminated the wizard as it confused users and it was too many clicks to get to the content

  • We ensured that the contact button stood out as a call to action, as users did not know how to request a consultation

  • The free resources page needed a download button so that users know how to interact with the link

"That's my natural flow, I'd rather scroll down and learn more"

We started with a wizard to help users learn about expeditionary learning

Wizard.gif
Stationarywizard.png
GLE Newscroll.png

Scrollable landing page was more intuitive for users

BEFORE

AFTER

We created a wizard to help users learn more about expeditionary learning in an engaging way. User testing revealed that the wizard is not a typical design heuristic they are familiar with or utilize. To simplify and make the design more intuitive we created two solutions:

- After clicking a button on the landing page to learn more, cards will appear on a separate page and describe the three options users have

- Buttons that users can click by scrolling on the landing page

After A/B testing, users preferred having the options on the landing page that they can scroll down and learn more. This allowed a more seamless and faster user flow and increased understanding. Users did not like that they had to click multiple times to get the information they were seeking.

"I don't know where I can go to request a consultation. this is confusing"

Interviews elucidated that individuals spent a long time attempting to find how to request a consultation. This was an important aspect as users frequently request custom consultations with the client. We wanted to ensure that the contact button was more visible and stand out as a call to action, The button changed color from the green placeholder color, as we moved into high fidelity.

"What am I supposed to do on this page? Can I actually download this?"
GLE Contact1.png

BEFORE

GLE Contact 2.png

We wanted to make the contact button more visible and stand out as a call to action

AFTER

resources.png

BEFORE

Free Resources Page.png

We wanted to make the resource button as a call to action and utilizing heuristics.

AFTER

The last key insight from mid-fidelity usability testing includes the resources page. This page confused users because there was no apparent button or call to action for the user to download the offered resources. Through interviewing, we discovered that users did not know if it was a static list of information, or if they could click on links. As a result, we added a download button that is a clear call to action button and known heuristic so that the users can clearly understand how they can interact with the resources.

high fidelity

Custom assets

We moved into high fidelity designs and iterated on our mid-fidelity designs based on the insights from user interviews. We were inspired by the colors of the outdoors. We wanted to incorporate the yellow and warmth of the sun, with the combination of the water and trees in the forest. We combined the two and chose teal, as well. 

 

After speaking with our client, we created custom design assets throughout her website that she can use as her products grow.

 

The team created:

- Illustrations that were connected with the offered destinations

- Illustrations of the various options users have when choosing the products 

- A logo system that is modifiable, tied to the destination, and representative of the company's name of going out into the world to learn

20.png
Art 1.png
Art 2.png
Art 3.png
GLElogopalm.png
GLElogotree.png
GLE Logomtn.png
banner img.png
yosemite.png
Hawaii.png
5.png

Usability Testing Findings:

High-Fidelity Prototype

We tested the high-fidelity prototype on 4 users with the same 3 tasks as the mid-fidelity prototype.

100% Completion rate

After user testing, we iterated on our high-fidelity designs.

We iterated on the consistency and spacing within our designs.

We ensured the prototype links were all clickable.

High-fidelity prototype

Paula's Flow

Paula arrives at the landing page, she searches for a plan by entering in her children's grade, desired destination, and duration. She arrives at the product listing page. Here she has two choices: to choose a package of her liking and continues on the purchase flow, or requests a specific consultation with the GO Learning Expedition team for a custom expedition plan.

Eddie's Flow

Eddie, new to expeditionary learning, arrives at the landing page. He wants to learn more about expeditionary learning, and what GO Learning Expeditions offers, so he will explore the landing page. After learning more, Eddie will click on "build on your own" to explore the free resources. He will download a free resource and explore the other websites.

Accessibility
"About 17 percent of american children have a disability" (CDC, 2017)

As this is an e-commerce website, we want to ensure the website is accessible to all.

Through user testing, data demonstrated that the sizing on the buttons needed to be adjusted as users didn't see some of the buttons due to the size, and we needed to iterate on the buttons to create consistency which ensures overall ease of use and decrease of cognitive load.

 

The Web Content Accessibility Guidelines (WCAG) -

  • We ensured the normal and large text with the background and foreground colors passed the WCAG, especially for our button as this is a call to action, it needs to be accessible.

  • All of our background and foreground colors passed the Web Content Accessibility Guidelines AA and AAA standards with the lowest ratio of 6.11:1. 

 

User testing demonstrated that adaptability of the curriculum was important. As discussed with the client, the curriculum is adaptable and accessible for all students including those with disabilities, which is highlighted on the landing page, as well as on the product listing page, as this targets a pain point of the user, and encompasses accessibility for all users. 

User testing also illustrated an insight about adding a donation option to include those who do not have monetary access which helps further create an accessible and equitable product, which leads into next steps.

Text
Text
Text
Text
btn.png
circle-arrow-right.png
getintouchbtn.png
landingdesktop.png

Next Steps

GO Learning Expedition website design provided a way for users to take learning outdoors.

Next steps include a donation option, input testimonials from verified purchasers (there is a current placeholder), and implement the ability for educators to input their own lesson plans.

We created several next step mockups; however, there would need to be additional testing in order to ensure usability and user interest. 

These next steps will further heighten the user's experience and the ability to take learning out into the world around them.

mockuplanding.png
bottom of page