A Fun Way to Learn Web and App Design in Winter Club!

Larasti, Hadijah.
Generation Girl
Published in
7 min readJan 25, 2020

I remember a year ago I decided to dive into UI/UX design field as my profession. Though I have only passed one year of experience, I had a desire to share my skills with other people. It was still blurry how could I achieve my calling until I discovered about Generation Girl and their program, Winter Club ❄️❄️❄️

All the mentors, volunteers, rookies, and parents from week-2 Winter Club 2019

When I heard for the first time about Generation Girl, I was thrilled! Firstly, because they support women to play a prominent role in technology. Secondly, they offer an inclusive environment where young girls can learn many subjects related to STEM field. As for the 2019 year-end holiday, they organized a short course for young girls, called Winter Club. I participated as their mentor for one of their Winter Club class, web & app design. I was paired with two other mentors, Nadia and Dije, to teach the rookies about web & app design fundamentals. Our students were between the ages of 12–18 years old who aspire to a fun yet rewarding activities on their holiday. On the final day, all the rookies had to present their projects to their parents. Initially, I thought this could be challenging since I had to entertain them as well as be serious when it came to delivering my materials. Surprisingly, they proactively followed the course well! In the end, the class successfully delivered 3 apps.

Here are why I think they found the fun side of taking part in the web & app design process:

💭 UI/UX Introduction & Finding the Background Problem

All the rookies, mentors, and volunteers in web & app design english class!

On the very first day, Nadia introduced the term UI/UX and basic theory about the design process in the class. We also divided the class into 3 groups. I supervised Group 1 (Janelle, Rania, Diva, and Arletta), Nadia for Group 2 (Shayna, Nawra, and Cathrine) and Dije for Group 3 (Pocut, Fayola, and Alaia).

As this was our first meeting, I captured their confused face when absorbing the lesson. I quite understood since this lesson was not relatable to their subject in school. However, as got closer to the group discussion, their understanding of the materials was clearer. The group discussion was about deciding which problems we wanted to solve for our final project. All the mentors tried to give independent will for the group to define their issue.

By the end of the day, I spotted a similar pattern on their selected problems. Overall they wanted to solve everyday difficulties! For Group 1, they prioritized the experience of getting lost in malls to be solved, Group 2 selected the food & beverage offline branch long queue as their problem, and lastly, Group 3 attempted to dig up personal goals & planning issues.

To ease and stay enthusiastic absorbing the lesson, they indeliberately decided on an issue that had significant relevance to their daily activity. It was also a plus for mentors since we could emphasize implicitly the core trait of a designer, empathy.

🗂️ Gathering Data by Interview and Making Persona

Afterwards, on the next day, mentors presented how to gather data and make personas. The whole day was filled in with more practice materials than yesterday. At the beginning of the session, each team was assigned to plan a list of questions and directly interview it to other rookies outside their group members.

Subsequently, they discussed the interview result and made personas to define their targeted users. In this part, students are allowed to make fictional characters based on their user target traits. They felt satisfied adding freely optional figures in the user personas! Group 1 added Trump photo in the persona whereas Group 3 added Susanti from Upin & Ipin. I’m glad that they managed to create a fun environment in the class while also punctually finishing the task 😃

📝 User Flows and Crazy 8

Before turning our solution into a real product, elaboration was necessary to be implemented. So did happen on day 3, when we finally illustrated our ideas into user flows and wireframes. In this session, I suggested trying to benchmark other well-known apps, as a part of validating their solution. At least, they had objective reasons for figuring out their problems.

I started the day by explaining briefly about generating user flows which were later followed by group discussion. One of the user flow outcomes was for classifying the feature requirements. Thus, when they were asked to sketch, they would be more focused and well-guided with resolved user flows.

Then on the next step, all the rookies should demonstrate their ideas into wireframes. The mentors agreed to exercise wireframing with Crazy 8 method. Within 8 minutes all of the rookies were demanded to sketch roughly 8 ideas on a piece of paper. It didn’t need to be beautiful but had to communicate well their solution. It felt so tense as I asked a rookie about her opinion of trying Crazy 8 for the first time. However, they admitted this was the most interesting part of the whole process. Perhaps because Crazy 8 was the only stage where we used paper (most of our design process using a laptop). As for finalization, each team sorted the most representative sketch to be completed and soon translated it into a prototype.

Final Wireframe

👩‍💻 Prototyping and Presentation

On the fourth day, all the groups dedicated the remaining time for making the prototype and presentation. Each of them did hands-on prototyping using Figma. I was profoundly astonished by their fast-paced learning progress, especially in this stage. They could explore Figma by themselves with little advice from the mentors. We ended the day a little bit longer, just to make sure we finished all the requirements for tomorrow’s big day and had a quality time together!

Group 3 tried to explain their web and app design process

Finally, the big day came. All the rookies only did several improvements from yesterday prototype and presentation. To start the day, I randomly picked the presentation order. At last, all the team presented their works well to the spectators! We closed the day with a big smile and satisfaction

Here are their works 👏 (click the pictures below for detail prototypes):

Web and App Design Prototype

💃 Last but Not Least…

Discussing “Gender Issue” in a workshop conducted by BootUp

If you ask..why it was so busy in the class and no time for rookies to actualize other things? Well, it’s because I haven’t explained completely about the schedule! The most interesting part about this club is we were not only equipped with hard-skill materials but also soft-skill training wrapped with fun activities. For instance, in this Winter Club, we had the opportunity to collaborate with different class students in a workshop conducted by Boot Up! We were also encouraged to exercise our critical thinking in sharing sessions with Ka Hannah Al Rashid (YES, she is that badass girl from The Night Come for Us!), Ka Kartika Jahja and Ka Shera Rindra.

Sharing Session with Ka Hannah

Lastly, here I want to say thank you to all the parties (especially, web & app design English class mentors & volunteers: Dije, Nadia 1, Nabila, and Nadia 2 😋) for their endless contribution to the 2019 Winter Club! By teaching in Winter Club, I understand how to deliver less common subjects suitable to students’ needs. Hopefully, Generation Girl won’t stop sharing this contagious energy!

With all the mentors from week-2 Winter Club!

--

--

Larasti, Hadijah.
Generation Girl

Runner-wannabe by morning, designing experience by day, and a polymath in the making by night.