STEMA

connects girls, educators, and parents to STEM resources, coding tutorials, inspirational stories of STEM women, and people around the world to create a STEM community

ROLE

UX Design

Visual Design

Branding & Identity

3D Design

DELIVERABLES

User Research

Affinity Diagram, Ethnographic Research, Observational Study, User Surveys, Competitive Analysis, User Personas

SPECIFICATIONS

Duration

6 months

Tools & Software

AdobeXD, Figma, Adobe Creative Suite, Maze, InVision, Balsamiq, Solidworks, 3D printer

Collaborators

Senior Designers, STEAM Program Coordinator at Children’s Creativity Museum, Educators with National Board Certification in Early Adolescent Science, Research Assistant at Harvard University at a micro-robotics lab

SUMMARY

STEMA is a social platform that facilitates girls, educators, and parents to form the STEM community to encourage them to stay in the STEM field. With wearable devices, girls can learn how to code and connect to the STEMA website to share their progress and teach each other. The goal of this project was to create a product that is not only appeals to the main users, girls but also provides resources and creates support between essential supporters such as teachers and parents.

PROBLEM

Girls tend to lose interest in STEM

Elementary school girls aged between 9 to 13 tend to lose interest in STEM education. While the scores of standardized achievement tests on science and math between boys and girls in fourth grade have merely no difference, girls continue to lose their interest in STEM-related subjects and activities.

SOLUTION

How can we keep them interested in the field?

The solution is to design a platform and wearable device to facilitate girls, educators, and caregivers to form a STEM community where they can access resources and motivate each other to stay in the STEM field.

User Research

Research Methods

I started this project with affinity diagram, ethnographic research, observational study, user survey, competitive analysis, and user persona to understand the target users in-depth and analyze the existing market so that I could offer the most suitable solution to their problems.

Affinity Diagram

I started the project by brainstorming my awareness of STEM including existent STEM products, programs, media outlets, advertisements of STEM, STEM education, and cost of STEM activities and programs. Then I created an affinity diagram by organizing my attributes. This process helped me to start thinking more deeply about the subject.

Ethonographic Research

The purpose of the ethnographic research was to analyze how girls aged between 9 to 13 years old interact with STEM subjects. I felt that it was essential for me to observe the relationships with each other while learning, the existing STEM programs, the environment, and the interaction with activities and products in order for me to design a product that could help girls interested in STEM subjects.

Observational Study

I started the research by visiting a workshop that was hosted by Apple in Palo Alto to introduce young generations to the technology. I conducted an observational study at the Ardenwood School in Fremont, CA while the “Girls Who Code” meeting was taking place. Additionally, I have visited several science museums such as the Lawrence Hall of Science and Chabot Space & Science Center to observe existent STEM activities, programs, and products and how girls interacted with them.

Apple Workshop

Palo Alto, CA

Girls were more eager to learn a new skill when they were involved in the process where they got to ask questions and actually performed a task.

Girls Who Code

Fremont, CA

Girls helped and taught each other throughout the class. Having a supportive environment was key to help keep learning a new programming language.

User Survey

I took a survey for 30+ girls aged between 9 to 13 years old who were the members of “Girls Who Code” program in Ardenwood school in Fremont, CA. My aim for this survey was to find out the usage of the smart devices, girls’ attitude level in STEM, and their preferable STEM products so that I can design a product that suits their needs and interests while understanding my target users.

Key Findings

Hands-on STEM activities foster girls’ “STEM identity” bolstering their confidence and skills to pursue a career in the STEM.

Girls learn through helping each other and seeing inspirational women in the history.

Girls learn the best when they think the materials are fun and interesting to them.

Competitive Analysis

I conducted a SWOT analysis and heuristic evaluation while studying the user-flow for three competitive companies including Engineergirl.org, stemcareer.com, and mn-stem.com. These competitive platforms aim to inform and promote STEM careers for young audiences as well as their caregivers and educators.

A. Match between system and the real world

B. User control and freedom

C. Consistency and standards

D. Recognition rather than recall

E. Flexibility and efficiency of use

Right match between content and the target audience: Engineeringgirl.org speaks the users’ language making it easier for the young audience to engage in their content with color and friendly-font.

Disorganized user flow & site organization: It is hard to understand where the content is located making it confusing for users to find the information they are looking for.

Simple & clear navigation: mn-stem.com provides a simple and straight-forward platform that is easy to navigate.

User Persona

After several user research, I interviewed and created 2 personas who represent our target users. They are looking for a solution to keep staying in the STEM field while creating the STEM community they can turn to when they need support.

Lilian

13 years old

“When I get stuck with a coding problem, I need a friend who I can ask to.”

Pain Point:

It is hard to find other girls who are interested in STEM

Racheal

Mom of 13 years old

“ I do not know where to get the STEM resources to support my daughter’s interest.”

Pain Points:

Scattered information, limited resources, & lack of community for parents

Based on the extensive user research including affinity diagram, ethonographic research, observational study, user survey, competitive analysis, user persona, I decided to design and develop a platform that facilitates girls, parents, and educators to create STEM community where they can share, find resources, inspirational stories of STEM women, coding tutorials, and connect with others to create a supportive community.

INFORMATION ARCHITECTURE

User Stories

With user research in mind, I created user stories to determine the priority of the user stories as a new user and a return user.

As a New User

• I want to be able to sign up so that I can save interesting events, news, and tutorials.

• I want to connect with other girls who also love STEM

• I want to be able to search STEM Events near me

As a Return User

• I want to access STEM resources for parents

• I want to be able to save events and information

Site Map

I sketched and created a site map to demonstrate the overall hierarchy of a website's page structure, as well as the relationship of subsequent pages to each other. I added the most recent events and updates on the home page so that every user of the website is informed. I kept the page structure simple and straightforward for users can find the information they are looking for.

Wireframes

Based on the user research, persona, and user flow, I sketched wireframes. Two key elements while designing wireframes were that easy navigation and attractive layout with plenty of visual images for our target users.

USER TESTING 1

Usability Testing on Wireframe

After creating the high fidelity wireframe, I wanted to test to see how users can navigate through the wireframe.

Tasks

• You found a STEM website. How would you sign up?

• You are trying to find a STEM event near you. How can you do that?

• You want to find friends who are also interested in Arduino. How can you add a friend?

Based on the user feedback, I iterated a few more wireframe designs, and here are the 2 main improvements I made.

1. Clear Search Fields

Add clear search boxes to specify the event users are looking to attend. With attractive cards, they are encouraged to browse and find more events.

2. Make it Obvious

It was hard for users to find how to search for friends and groups, so I made it obvious by placing the search bar right above the friends list.

USER TESTING 2

A/B Testing

After I designed the high-fidelity mockups, I performed an A/B test for 2 particular designs which included a top navigation horizontal bar and an event display.

1. Clean & simple top navigation

89% of testers prefered the clean top navigation design using only one color instead of 2 colors.

2. Attractive card design

98% of testers preferred the card design with an attractive picture and icons. Not only they made it easier for users to find information easier but also made each event more inviting to attend.

The preference test overall helped me to see the current design objectively making it easier for me to step back and understand which design was connecting better for the target users.

Usability Testing on Prototype

I conducted the usability test to examine how my prototype was working for potential users.

• To sign up

• To find a STEM woman of the day

• To find an event near you and save it

• To find a friend who is interested in Arduino and send a friend request.

Based on the user feedback and results, I made 2 main improvements.

1. Clear Visual Hierarchy

The initial home page design was cluttered and hard to navigate, so I redesigned it to offer a clear visual hierarchy for users to find information more effectively.

2. Visually Appealing Content

Users spent a long time looking for information on the initial "Your STEMA" page, so I redesigned it to make the content easily accessible by utilizing visual images and plenty of white space between.

The clickable usability test after creating a prototype allowed me to see that when I break down information more clearly with icons and visual images, it improved the user’s experience significantly.

BRANDING AND IDENTITY

Branding

First, I conducted branding research, brainstorming, and mind mapping. Then I created a mood board to establish the feel and direction for this project. Since the main target users are young students, I wanted to use attractive and playful colors, font, and languages while keeping the site simple & accessible for all the other users including parents, educators, and mentors.

Why STEMA?

STEMA stands for Science Technology Engineering Math Apprenticeship. It refers to students who are learning and gaining knowledge of STEM.

VISUAL DESIGN

Prototype

The visual design of STEMA offers a clean and simple design with fun and playful elements. The website captures the attention of young school-age girls as well as their parents and educators for its contents and elegant design solution.

View Clickable Prototype

Create your STEM community

Girls can connect, share, learn STEM together no matter where they are so that they can continue to do what they love with all the support and motivation they need.

Get Inspirations & Resources

Girls can get inspirations from innovations, STEM women, and tutorials. They can easily find STEM events to join and find friends in common.

Stay Motivated & Thrive in the STEM world

Girls will stay motivated by personalized page, mini portfolio to share their projects and the tutorial groups to learn new skills.

Support for Parents & Educators

Parents & educators can access variety of STEM activities and resources, so they can support their pioneers the best way they can.

OUTCOME

Improvements we achieved

Since we didn’t have systems in place to gather real metrics and data, I collected qualitative measures of success by sending prototypes out to our potential users. Here are some quotes from people whose passion is also to motivate girls in the STEM field.

If we had the ability to gather metrics and data, I would love to see:

• How many people felt motivated to pursue STEM career while using STEMA: the trend by age group, ethnicity, and user demographics

• The most visited and liked feature of the Stema app

What people say about App

“I really like that this creates a sense of community and girls are able to friend each other based on what projects the other is working on...”

-Isabella P. Mechanical Engineer

"I really love how you integrated personalization and social connection, while staying true to the educational STEM foundation..."

-Leah H. STEAM program coordinator at SF Children’s Creative Museum

"The design of STEMA is fun and approachable, making learning how to code seem so exciting for girls..."

-Emily S. UX Designer

Thank you for checking out my case study. Do you have any questions?

Please get in touch, I would love to answer any of your questions😀

Browse other projects

TONE

Providing users with a direct solution to mitigate the outburst using machine learning algorithms

View Case Study

Behub

Family-friendly all in one App

View Case Study

ROLE

DELIVERABLES

SPECIFICATIONS

Duration

Tools & Software

Collaborators

SUMMARY

PROBLEM

Girls tend to lose interest in STEM

SOLUTION

How can we keep them interested in the field?

User Research

Research Methods

Affinity Diagram

Ethonographic Research

Observational Study

User Survey

Key Findings

Competitive Analysis

User Persona

Lilian

13 years old

Pain Point:

Racheal

Mom of 13 years old

Pain Points:

INFORMATION ARCHITECTURE

User Stories

As a New User

As a Return User

Site Map

Wireframes

USER TESTING 1

Usability Testing on Wireframe

Tasks

1. Clear Search Fields

2. Make it Obvious

USER TESTING 2

A/B Testing

1. Clean & simple top navigation

2. Attractive card design

Usability Testing on Prototype

1. Clear Visual Hierarchy

2. Visually Appealing Content

BRANDING AND IDENTITY

Branding

Why STEMA?

VISUAL DESIGN

Prototype

Create your STEM community

Get Inspirations & Resources

Stay Motivated & Thrive in the STEM world

Support for Parents & Educators

OUTCOME

Improvements we achieved

If we had the ability to gather metrics and data, I would love to see:

What people say about App

Browse other projects

TONE

Providing users with a direct solution to mitigate the outburst using machine learning algorithms

Behub

Family-friendly all in one App

How can I help you?

Contact Seira to find out

Find me Here

© 2019 | Designed and Developed by Seira Yasumatsu