Starfish Labz, Education Platform

A case study for creating an educational online platform. Starfish Labz is an online platform for Thai teachers to learn about Starfish Maker methodology. Starfish Maker is program run by Starfish Education Foundation (https://www.starfishedu.org) which was a client at Morphosis Apps. This program proposes STEAM process which supports the Project Based Learning (PBL) to Thai students. So they will learn and develop 21st century skills that will be needed when they graduate in the future. For the students to learn about these skills, it has to start from teachers. Therefore, Starfish Maker builds the Starfish Labz to support and encourage Thai teachers to learn about the methodology.

Morphosis Apps was in charge of the design of the Starfish Labz platform. This included user research, wireframes, and user interface.

Please note that this part of the project was done in 2018. It may look different in the current version.

My role

Lead UX designer

My contributions

My main contribution was user research. I helped plan the activities and workshops. I facilitated the workshops, collected data, summarized and analyzed them. I also created wireframes in the beginning of the project. In this portfolio, I only focus on my part of the project.

Team members

Pruek Laochaiyapruek
Sora-at Tekaew
Jakrayut Vetthanasuk

Reference

Jérémie Tisseau (CEO & Founder), Morphosis Apps

Disciplines

UX Design
UX Research
Personas
Focus Group
Interview
Customer Journey Map
Workshop
Card Sorting

Launch website

Our team started from user research. Together with our client (stakeholders, Starfish staff) and end users (K-12 teachers), we used the focus group method to gather insights and ideated for some potential solutions. I also did some more interviews with other teachers. From the findings, we created sitemaps, and I created personas and a customer journey map. Then, we did another round of workshop with the Starfish team to align everyone. I was in charge for planning the workshop. We did card sorting, created user stories, and sketched some mock-ups of the user interface. After the workshop, we revised the sitemaps and planned the next phase of development.

The 2 main user groups of the Starfish Labz platform are K-12 teachers and Starfish staff. Though the focus is much more on the teachers because they are actually the real end users. For the user research, there were 3 goals so we used different methods to collect the data.

The first method was focus group to gather insights, needs, and requirements from teachers and Starfish staff. We learned about the teachers and staff, and understood how they would interact with the system. At the same time, they could exchange opinions about the system-how it should be and what it should do.

The last one was brainstorming workshop to find ideas, features and solutions for the platform. Everyone wrote down the features and things that the platform should do on sticky notes. After that, they categorized the notes under themes and prioritized them. Therefore, we could see which feature was the most important and should be implemented first.

After the research, we created 2 sitemaps of the platform-one for teachers (in the photo above) and one for admins (Starfish staff) because these 2 user groups had different purposes using the platform. The teacher group would use this platform to learn and obtain knowledge whereas the admin group would use this platform to create contents and monitor them.

I also developed a draft of customer journey map to visualize the whole system. Starfish Maker system is not only a web app, but also an ecosystem that consists of offline and online services. Starfish Labz is only a part of their online services. Having this map would help us to strategize and plan to support the system holistically.

We arranged a 3-hour workshop with our client. The workshop was to get everyone aligned and to plan the next phase. There were 3 main activities in the workshop: card sorting, user story creation, and user interface sketch.

The participants were split into 2 teams. Before the workshop, we presented the personas, sitemaps, and customer journey map.

I chose card sorting as the first activity because it could help participants to create mental model of the platform and it really helped building the information architecture. We used words from the sitemaps taken from the research results. By doing this activity, we got to discuss about the terminology since it was somewhat confusing and unclear.

Additionally, it clarified the structure of the platform and forced us to discuss the sitemaps with our client. This way, everyone could talk about it openly and get aligned easily.

The second activity was user story creation. We continued with the structure from the card sorting. The point of this activity was to create user stories (teacher’s tasks) as many as possible using the card structure.

This activity was used to help the participants “connect the dots” in their mental model. Here they could see if the structure they made was reasonable. In addition, they had to prioritize the stories.

For the third activity, we sketched a user interface of the platform. The point of this activity was to make the participants become very visual. They needed to visualize their ideas and concepts from their work in the previous sessions using sticky notes and markers. Therefore, they had to create some pages of the most important user story. This helped the participants to think about the user flow of the user story.

Doing this activity, we could get the whole team (us as designers and Starfish staff as stakeholders) to design the user interface together.

At the end of the workshop, both teams presented their work and everyone voted for the best direction. At this stage, even though the work was incomplete, we came down to a consensus. Everyone had a fairly clear picture of how the platform would look like and what it could do.

After the workshop, we revised the sitemaps and planned for the next phase of development.