Gen NOW

🏆 Most Impactful Solution (Highest overall score)
🏆 Honorable Mentions; Best UI, Most User-centric
Just Design Designathon 2020

Gen NOW is a web platform that educates teenagers on social justice issues utilizing gamification to create a unique and improved learning process.

Prototype
Role
Ideation, UX/UI Design, Prototyper
Time
36 hours
Teammates
Alyssa Uslander, Christina Yu, Michelle Swolfs, Natasya Aulia👋
Tools
Figma, Adobe Illustrator, Photoshop, XD
BACKGROUND
In an age of immense cultural, political, and wealth disparity, there exist evermore miscommunications between one another. Social justice issues are not thoroughly explained in history classrooms, and as a result, many children grow up without a deep understanding of the world’s most pressing issues. The lack of understanding regarding relevant facts and historical events worsens our battle again social injustices, slowing us down from progressing to an open, inclusive, and diverse society.
PROBLEM TO SOLVE
"How might we promote social justice topics in a digestible and engaging way to increase a better awareness of the issue? What technology and approach should we strive for to prevent further social injustice from taking place?"
Gen NOW home screen with a laptop mockup
THE SOLUTION
Gen NOW is designed to focus on gamification and interactivity. By delivering educational content in visual novel and interactive quiz format, we aim to attract middle-high school students age 13-18 to use our web platform, resulting in a new generation with better awareness regarding social injustice issues.

We believe the best way to prevent social injustice is by educating people as early as possible. We specifically targeted younger audience since they are more susceptible to knowledge, making it plausible to create greater impact in the next generations.
PROCESS OUTLINE
Process outline for Gen NOW: Research, Ideation, Design, and Evaluating Insights process
User research
We conducted a quick interview with three high school students to thoroughly understand their perspectives. We asked an array of questions that delved into their daily learning scheme in school, how they typically learn social justice issues and what challenges they face during the process, etc.
Key takeaways
Lack of exposure to social justice issues
Students admitted that social justice issues are not highlighted enough in middle and high school curriculums.
Uncurated and unreliable learning resources
The abundance of the resources online can make it challenging to find and sort reliable information about social justice issues.
Tight school schedule
School responsibilities are time-consuming and it is tricky for students to allocate time for other activities, including for learning about social justice issues.
Play with friends
Students typically find that activities where they can engage with their friends are more enjoyable.
Determining user goals

We extracted the insights from the user persona we created to determine the user goals that they want to achieve from Gen NOW. We also broke down the learning process into two parts: learning and demonstrating. We defined the goal for each process to create a more specific solution to the initial problem.

Enjoyable and streamlined learning process

To evoke their self-motivation to learn. The materials delivered need to be concise to suit their tight school schedule.

Sense of empowerment when demonstrating their knowledge

Students fear exams because making mistakes and scoring low in exams invite negative judgements from the people around them. It is important to make the users feel heard and empowered instead of judged when they make mistakes.

On-demand learning

The on-demand system allows students to learn anytime they want, offering flexibility to learn about social justice commitment-free.

Why gamification?

We then followed the process with ideating about specific features that directly answer these goals. We decided to utilize gamification with visual novels and interactive quizzes as the main approach in our solution.

Visual novel delivers learning materials with visual appeals, making the learning process feels like an entertaining activity instead of a task.
The quiz that we place right after the learning materials allows the students to demonstrate their knowledge without the fear of getting things wrong.
Gamification allows us to fit in components such as points and leaderboard system to positively motivate students to learn.
Outlining use cases
Gen NOW use cases diagram
Visual Design
Since we were planning to use visual novel in our approach which is illustration-heavy for the Story part of Gen NOW, we strived for a simpler interface design concept to balance the overall visual appeal.
Interface Design Inspiration for Gen NOW using Netflix and school-themed hackathon website
After further explorations, we decided to choose a classroom concept for Gen NOW. All of us had shown interests and agreed to experiment with dark theme, one of the latest trends for interface design. We then proceeded to create our moodboard inspired by classroom concept and dark theme that helped us determining the feeling we wanted to achieve Gen NOW's design concept.
Gen NOW's moodboardGen NOW's style guide with color palette and typefaces chosen
Final Result
Gen NOW dashboard with laptop mockup
Featured Story

Home page features story from recent social justice issues to keep the users updated with the latest news.

"Continue where you left off"

List of incompleted stories with a progress bar to inform the users how much time they need to complete the story anytime per their demand.

Topic -> Subtopic

Scalable categorization to help simplify the information offered to the users. Breadcrumbs added to help users navigate their path from one topic to another.

Choose a story
Users can explore a variation of stories that we have categorized into the subtopic they have chosen previously.
Built-in glossary

Technical words and terms are introduced to the users within the story to make the users' experience with Gen NOW even smoother.

Visual novel

Learning materials about social justice issues is served with a visual novel with compelling graphics to fit our target audience and keep them engaged.

Interactive quiz and point system

Leaderboard to evoke a sense of competition and to support social interaction

Leaderboard (Friends page)

Mini interactive quiz to test their knowledge about the story they read. Point system is added to incentivize the users to learn through Gen NOW.

Design for Quiz feature on Gen NOW
Interface design for Quiz feature on Gen NOW
Interface that shows user points after completing a quiz
A leaderboard page
Insights gleaned

The four of us started as strangers but it's not an exaggeration to say that I couldn't have asked for a better teammates. Working with a team of four designers with creative minds and untamed imagination, the decision-making process was definitely challenging, yet remarkable. We maintained communication, understanding, and teamwork ethics through out the 36 hours time crunch and those key values brought us to our victory.

We were awarded as the winner of the Most Impactful Solution category and the honorable mentions in Best UI and Most User-centric Design categories with the highest overall score among all teams competing!
Winning announcement for Gen NOW at Just Design Designathon
Bonus: our ✨creative process✨
A drawing of two stickmen that we did for fun
NEXT WORK
Zoom's Closed Caption