Migrating to another country is a challenging experience, especially when you are a kid. When you are a child or teenager coming from Taiwan, China, Japan, or Korea to Brazil, you will find a totally different culture, language, and writing system. These differences make it difficult for Oriental Asia's kids to find friends, study, and prepare themselves for job opportunities in Brazil (once they are adults).

"Estrela do Oriente" is a club for Oriental Asian Kids and teenagers (from 8 to 17 years old) in São Paulo, also open for anyone who finds it interesting in oriental culture. This club exists since 2016, and since then all its communications were based on social media and orally. The purpose of creating a website for the club is to better explain its activities for members and non-members and also reach more people.

This was a freelance project, where my role in this project was of the main Product Designer, acting both as UX and UI. As it will be explained below, part of the process of building the website involved teaching Product Design to children and teenagers and co-create with them. Therefore, I also act as a teacher.

Before starting the project, the client already made some research about the user needs, which are kids, teenagers, and their parents. So the first step was to do alignment meetings where we discussed the results of this research and defined the scope of the project. After that, we defined the roadmap for the project, and I created a site map using Flowmap App.

Allison Druin (2002) identify four possible roles for children in the design process of technology:
1: User
2: Tester
3: Informant
4: Design Partner

Discussing with the client, we saw a nice opportunity to involve immigrant children and teenagers, who already are members of the Club, in the design process. Some of the Club's activities involve presenting and teaching professions to its members. 

So the way we figure out to involve children in the process was to work with them as a Design Partner. I organized weekly Product Design classes, where we went together from wire-framing, high-fidelity prototyping, and user testing. In each class, we discuss our work, make decisions, and plan tasks for the next class. These classes were a great way to understand the users, especially since I have never designed for children and teenagers before.

For supporting the class's work on high fidelity prototyping in Figma I created a mini design system, mostly based on material.io. This system must support different alphabets since the website would be on Portuguese, Traditional Chinese, and Simplified Chinese (with plans in the future for adding Japanese and Korean). The typography used is Noto Sans. The reason behind this decision were the good readability of the font and the different weights in both occidental and oriental alphabets. To make this decision I have also consulted a colleague, who is doing a doctorate in oriental typography (Eduardo Araújo de Ávila) and also a Chinese Product Designer (Zeyu Yu). Their contribution was important to choosing the typography and also to creating the typographic system.

The site's development will use a React Library (Metronic 8), with already structured design tokens. Therefore the design system should be structured in a similar way to Metronic 8's structure. Below are some examples of components created for this project.

The design system organization follows atomic design system principles, with simple components, that combined create complex components. One example of this approach was the creation of the calendar component.

Now that the first design version is completed, the students will learn to code and participate in the development process. We also have already mapped some improvements and new functionalities for the website, which will come in the near future.