Starfish – Thai Education Platform for Teachers

RESPONSIVE WEB APP

Starfish Maker mission is to change the education system in Thailand.

Starfish initially tried to run workshops in Bangkok for k-12 Teachers with the help of the government to teach them modern and innovative teaching techniques with the end goal being to get students to be more engaged in the classroom and get better results However, running just a few workshops a year was not enough to really teach teachers effectively. To really assimilate new and innovative teaching techniques, teachers need coaching on a regular basis if they want to progress.

In order to solve this problem, Starfish decided to build a web platform where teachers could learn at their own time, get support from both educators and their peers, keep track of their progress and finally maintain an online portfolio to progress in their career.

We have always been passionate about education so when Starfish approached us with this project this sounded like a worthy challenge to take on. We jumped to the occasion and started in March 2018. We have been working on this project since then.

What we did

Starfish was a very ambitious project from the start. We knew that if we wanted to succeed in this project we had to the Thai educational system and teachers’ behaviors. To do so, we ran a few workshops at the beginning of the project. Once we had enough information, we started designing the information architecture, wireframes, developed a brand guideline and finally designed high fidelity concepts for this education platform. The design was split into multiple phase and this is an ongoing project.

Our Process

Since this project had to be designed from scratch, we decided to do some research first about Starfish staff, educators and K-12 teachers to understand their work flows, processes and Thai bureaucracy in Schools.

Together with our client, we organized a focus group to gather insights quickly with a group of 6 people.

To get a deeper understanding of our target audience, we also did some qualitative research by interviewing a small group of teachers. From there, we compiled and summarized the information in web personas and customer journey map.

Design process for phase 1 of the Starfish project.

Before we jumped into the design, we organized another workshop session with main stakeholders, educators and a couple of teachers to refine the information architecture. This workshop included doing card sorting techniques to structure the navigation and flow, creating user stories, and sketching some initial directions for our user interface. After the workshop, we revised the sitemaps and planned for the next phase of design.

Focus Group

The main goals for this focus group was to get deeper understanding of what features should get into the MVP, learn more about our users and understand the education system in Thailand. For this focus group we invited 3 k-12 teachers and 3 Starfish educators.

The goals:

  • Define user needs, behaviors, requirements, and expectations
  • Discover touch points, constraints and opportunities
  • Brainstorm ideas, features and solutions for the platform

During this session, we learned that teachers have to go through rigorous processes and regulations imposed by the Thai government. In order to be compliant with these regulations, we had to take them into account later in the design.

After the initial session, we organized a second session with the same participants to get deeper understanding of which features should appear in our designs. This session was divided into 2 parts:

  • In Part 1 of this session, we gathered insights to discover common needs and pain points among users. Everyone had to discuss and answer 4 questions around the following themes: challenges, strengths, solutions, self-development. Everyone had to write down their answers on sticky notes and then present it to the rest of the group before putting it up on the wall.
  • In part 2, we brainstormed ideas, features and solutions for the platform by asking each participant to write down the features and ideas on sticky notes. Afterwards, we asked them to categorize the notes in order of importance and in a way that made sense to them.

Research Results

After summarizing the research, we created 2 different sitemaps for the front-end website and the back-end website.

The front end website is for teachers. On this platform, they can see which courses are available, join a course, go through the lessons and then submit their assignments and get feedback from the community.

Front end website sitemap for teachers

The back end website is only for Starfish admins and educators. On this platform, users can manage the content, add new one, add new users, create new schools and add teachers, view the assignments submitted by teachers, etc.

Web Personas

During our research we identified 5 distinct web personas: 3 teachers personas, one for Starfish admins and one for educators.

Above are two of the teachers personas we identified.

Customer journey

To understand what were all the different touchpoints and needs of a user along the journey, it was critical to design a customer journey to map the experience of users for our platform:

First draft of the customer journey

Design Workshop

When we had enough research material and some idea of what the platform could look like, we set up a 3-hour workshop with 6 participants to discover what the ideal education platform would look like to them. We split the participants into two groups.

To do so, we organized 3 main activities for our workshop: card sorting, user story creation, and user interface sketching. Each activity was split into 3 steps: brainstorm together as a group group, present to the opposite team and get feedback, and then refine concepts in your group.

Card Sorting

We chose card sorting as our first activity to help participants create a mental model of the platform. To help each group get started, we printed each link from our teachers sitemap on a card and gave them a few blank ones in case they had additional ideas. We gave participants 45 minutes to try to reshuffle the cards in a way that made sense to them. We then asked each group to present their ideas to each other and then refine their sitemap based on the feedback. At the end of the session, each group had quite similar architecture and it gave us (Morphosis), a pretty good idea of which direction to take for our design architecture.

Card Sorting

The second activity was to create user stories (borrowed from the Scrum methodology). We asked each group to quickly write on paper all the tasks they would like to do on the Starfish platform and then to prioritize them in order of importance. This activity allowed us to identify which key features should appear on the Starfish platform.

User Story Creation

For the third and last activity, we asked each group to sketch their ideal interface either on A3 paper or using sticky notes to structure each page. Again, each group had to present their concepts to the opposite group and then refine their ideas before ending the session. During this activity we also asked each group to refer to the sitemaps they created during the card sorting activity and the user stories.

At the end of this activity, each group came with quite different solutions. We asked everyone to put up their concepts on the wall and moved to the last activity of the day. The voting session.

At the end, both teams presented their final work on a wall and we asked everyone to vote for the best ideas (similar to a design thinking workshop) At this stage, even though the work was incomplete, everyone came down to a consensus and it was clear which direction we had to take for the next phase of the project. It was time to start the real design work!

Final voting at the end of the workshop session

Wireframing

Since Starfish is a large and ambitious project, it was important to split the design into multiple phases. The first phase focused on creating a MVP with only the core functions, namely, courses, classes and teacher profile pages. Overtime, we refined our interface and started to add more functions to our interface such as class assessments, quizzes, school profiles, teacher skills rating… and helped design part of the backend interface for the Starfish admins and educators.

Desktop wireframes

Since most teachers use primarily their phones, we also translated all our designs to the mobile screen.

Mobile Wireframes

Branding & UI Design

For this platform, we decided to create a playful design style to encourage non-tech-savvy teachers to learn on our platform and have fun while doing it. Since gamification will be added to the system at a later stage, this design decision will also support it in the long run.

Courses and lesson details
Class details, assessments and teacher profile screens on mobile.

This playful design feeling is also reflected in the simplicity of the task flow, by the heavy use of white spaces and by the use of a colorful palette and illustrations in our design as you can see below.

Simple and friendly Quizz screens to encourage teachers to complete them.

One of the key function of Starfish is the ability for teachers to create and submit a class assessments which will then be reviewed by Starfish educators. Once you have submitted your assessment, you will be asked to review the assessment of 3 other teachers who just completed it. By doing these peer reviews, teachers are encouraged to interact with their colleagues and reflect on their own work at the same time.

Write and submit assignment
Review assignments from other teachers

Under their profile, teachers can review their progress and see how their skills progress over time. They will also be able to access their certificates under this section. The certificates are certified by the Education Ministry of Thailand.

Teacher’s profile and Edit Profile screen.

Final Words

We have been very grateful and honored to be part of this ambitious mission and journey. Changing the education system is not an easy mission anywhere in the world and Thailand definitely comes with its own set of challenges. But we are confident we will get there. We have already done considerable progress and Starfish already started to “sell” it to schools with good results so far.

In the next few months, we will work on a gamification system to get teachers more engaged into the lessons and get rewards for their progress. We will keep you updated with our progress and probably write a follow up to this article. Stay tunned! More work to come soon from the Morphosis team 🙂

Morphosis Footer

Let’s work together!

Are you ready for a creative collaboration that will transform your business?