Interaction Designer and UX Advocate

Planet3 UX Redesign

redesign banner.jpg
 

My Role: UX Designer, Interaction Designer, User Researcher

Senior UX Designer: Patrice Mailloux-Huberdeau

UX Engineer and Visual Designer: Martin Figuero-Ramirez

Software: Sketch, Axure


Context

What's Planet3?

Planet3 is an exploration-based learning company that's transforming science education by presenting the entire earth as a living laboratory. Planet3 is also the name of their product, a learning platform for K-12 STEAM education.

What was my role?

I led the design efforts in redesigning the product's navigation and the data visualization components. I mainly handled the user research, interaction design and handed off wireframes to our visual designer to mock up. I also worked closely with the senior UX designer to redesign the case studies and create a style guide. Due to NDA, not all of my work (including final results) can be shown. Instead, this case study shows my design process in the project.

 

my process

GATHERING USER RESEARCH

I hosted user interviews / usability testing and spoke with teachers, curriculum writers and the marketing team to understand what the teacher's day-to-day life is like. I entered the project later on in the timeline, so there were already research artifacts made by Patrice. 

 

Interviewing a teacher on his lunch break and getting feedback on a concept deck.

 

Image 1: Student Persona by Patrice  /  Image 2: Teacher Persona by Patrice

understanding the teacher's DILEMMA:

  • Heterogeneous Classes. There's only one person in a classroom, catering for 15+ students. All with diverse needs, learning patterns, and backgrounds.
  • Lack of Time. The teacher covers a lot of content in a short school year. On top of that, they deal with moments that take away from their precious class time: standardized testing, admin planned field trips, disaster drills, etc.
  • Pressure from Higher Ups. Teachers don't have the necessary tools and training to meet state standards effectively. State assessments also add more pressure, as they have to train and prepare their students for them on top of the mandated state standards.
  • Outdated Instructional Materials. Sometimes schools don’t provide updated tools. Extra planning & curriculum design then falls onto the teacher.
  • Inability to Work Technology. Sometimes they can't get tech to work properly in the classroom. Teachers can't afford to troubleshoot when they're in the middle of a lesson, managing 15+ students.

UNCOVERING NEEDS FROM THE TEACHER'S PROBLEMS

  • Ease of Use. Teachers aren't looking for a tool that solves all of their problems. They're looking for a tool that's reliable, consistent and engaging for their students.
  • Flexibility. Curriculum can vary greatly between different classes and grade levels. Teachers need to be able to rearrange their content and use whatever content fits their curriculum goals.
  • Tools to Monitor / Get Data on Student Progress. This helps them figure out who’s falling behind and better cater to their students' diverse needs. This doesn’t need to be provided via technology.
  • High Level Overview of Key Points. This enables them to cut corners and focus on key content.
  • Differentiated Instruction and Accessible Features. Need strategies to adapt their curriculum to meet their classroom’s diverse learning needs. Some students may also have disabilities such as dyslexia and vision / hearing impairments, requiring features that cater to their form of content-consumption.


seeing the bigger picture / MAPPING FLOWS

I constantly build flowcharts before doing any UI design to maintain a wholistic understanding of the product's UX. Often times, our timeline was tight and user flows weren't required as a polished deliverable. Instead, we drafted flows on the spot to ground our thinking before delving into wireframes. 

A high-level flow chart I put together on Axure during a remote meeting with Patrice. This helped us think through the case studies navigation.

Image 1: Navigation Flow  /  Image 2: User Flow

sketches, wireframes, mockups galore

Sketching before wireframing enables me to quickly draft out ideas and prevent myself from narrowly focusing on one idea. As I explore ideas, I discover patterns and interactions that continuously appear or needs to be thought through. In these exciting moments, I delve deeper into the interaction in my sketches. In the 3rd image, I discover tool tips being used often and explore it further in my sketches.

Image 1: Student Navigation  /  Image 2: Piechart Variations  /  Image 3: Data Viz Tool Tips

Once I've done most of the thinking and exploration on paper, I choose the best ideas and clean them up on Sketch in preparation for handoff. I present several options since it's easier to compare ideas rather than critique just one idea. The images below are wireframes for student navigation (based off my sketches above in "Image 1: Student Navigation")The best idea was given to our visual designer to mockup.

If our visual designer is busy, I help out with the mockups. Below are some of my mockups for data viz components, focusing on the UI design for graphs, legends and tool tips. These were not finalized as our visual designer finishes the styling.

DELIVERING DESIGNS REMOTELY

Whenever I complete a design, I add notes / specs depending on who I'm delivering it to. If it was for another designer, I add notes that detail my design rationale and include flows to provide a wholistic understanding. If I was delivering it to an engineer or the design lead, we would include different specs such as pixel length and hex codes.

Image: Early-stage Wireframe of Case Study Nav (delivered to another remote designer)

 

PERSONAL REFLECTION

As my first UX project in the company, research, collaboration and design thinking were my most important tools for maintaining project momentum. By finding the right people to talk to and work with, I got onboarded quickly, found a design mentor, and had the opportunity to work on a variety of components, from data visualizations to card displays and navigation.