Justine F
Product Designer | UX Designer

connecting at the fingertips

NATIVE MOBILE NETWORKING APP DESIGN

TEACHER CO-OP IS A MOBILE APP DESIGN FOR TEACHERS OF ALL TYPES TO STAY CONNECTED AND GROW TOGETHER

TEACHER CO-OP IS A MOBILE APP DESIGN FOR TEACHERS OF ALL TYPES TO STAY CONNECTED AND GROW TOGETHER

project overview

Project Scope: 1 week
Project Type: Mobile Networking App
My roles: UX Research | Sketching | Wireframing | UI Design | Prototyping | Usability Testing
Tools: Mural, Miro, MockFlow, Marvel, Figma

AFFINITY MAP CREATED ON MURAL

AFFINITY MAP CREATED ON MURAL

research

I conducted user interviews on teachers of all types to get a feel of their purpose and needs. I used the affinity mapping method to sort out all the data and concluded the following commonalities in their goals and purpose:

  • having and teach self awareness

  • importance in teaching kids

  • benefiting from a growing community

Common obstacles were wanting more ways to:

  • build a stronger community

  • connect with other teachers

  • inspire children

native mobile design

hey friends, its andrea!

Meet Andrea. She is a free-spirited yoga teacher who works for a non profit in San Francisco, California. She has been teaching yoga for three years. She loves being able to connect with people. She enjoys working with children the most and is inspired by their minds.

In this scenario, Andrea wants to improve balancing on her head because she wants to be able to guide her students better with this technique.

"Users want to feel more inspired by connecting with and learning from other teachers."

USER FLOW CREATED ON MURAL

USER FLOW CREATED ON MURAL

user flow

With the commonalities in goals, purpose, and obstacles the users had, I was able to identify the problem:

Users want to feel more inspired by connecting with and learning from other teachers.

Understanding that user journey helped with creating a User Flow to show how Andrea could complete the task of improving with balancing on her head.


native mobile design

sketch

My user flow guided me in the sketch process of my design. It was important to create a flow that was simple with a consistent layout with titles and descriptions that were easy to read so users could quickly connect with other teachers and reference content.

WIREFRAMES CREATED ON MOCKFLOW

WIREFRAMES CREATED ON MOCKFLOW

wireframes

I created digital grayscale wireframes to refine the user flow by highlighting the CTA buttons for each screen that Andrea would select through her journey to learn how to balance on her head by taking a live class.

resulting iteration

After conducting Usability Test interviews for Teacher Co-Op, users mentioned feeling the following ways:

  • an improvement with the quality in the material they want to teach their students

  • inspired to create and teach their students newer material

  • less anxious about having creative blocks under time constraints

PROTOTYPE DEMO BELOW

interactive prototype

interactive prototype was created on figma takes you through events in my community and how to start taking a warm up class with sasha.

prototype demo

this prototype demo was created on marvelapp and takes you through taking a live class with margie.

resulting iteration

After conducting Usability Test interviews for Teacher Co-Op, users mentioned feeling the following ways:

  • an improvement with the quality in the material they want to teach their students

  • inspired to create and teach their students newer material

  • less anxious about having creative blocks under time constraints