afterhours.

Role

Product Designer
UX Researcher
Visual Identity

Team

Valerie E. Lianggara (myself)

Skills

User Research
Product thinking
UI/UX Design

Visual Design

Tools

Figma

Timeline

January - February 2021

As one of my final projects in university, I explored the education system to create my own brief that questions the future of student learning experiences.

With the sudden shift of online learning and non-optimal student experience, this opens up an opportunity on how we can utilize our access to advanced technology in today’s world of high volatility to develop methods on how to create learning the best experience for students of all ages.

Guided by the research question: ‘How does play and user experience in today's world of advanced technology play a role in further aiding students' tomorrows?’, the challenge was to figure out what we can design and implement to a learning experience to increase active engagement and encourage interaction.

Back in Indonesia, most of my friends and I always had after school activities. Whether it be extracurriculars, private tuitions, club meetings or simply hanging out with friends - it was unlikely to go straight home once school hours were over. It was in our culture and society that private after school tuitions took place in our lives, to aid in our success in our studies and development as adolescents.

With these activities, students also learn new skills which are useful in school life. Skills like teamwork, time management, management of any activity, how to lead a group and many more extra skills. 

Inspired by what we call ‘les’ (translates to tuition) back home, I responded to the brief by designing a digital learning space for after school activites that targets towards personalized learning, clubs & collaboration, and support - targetted towards middle school students.

*featured at Central Saint Martins Graduate Show 2021 🥳

USER RESEARCH

Contextual Inquiry

To better understand and gain empathy for the target group, I proceeded in conducting research through two design methods: semi-structured interviews and surveys.

I conducted a 1:1 interview to gain a deeper perspective on my topic, and my cousin, a family friend and my teacher from my middle school agreed to share more about their thoughts. The idea of online and offline learning was brought to light, and I asked their opinions on personalized learning.

One of the main highlights were how human interaction and communication were essential in learning, and how non-academic subjects were just as important as academic ones.

Despite how qualitative data can better aid my research, I wanted to create an anonymous outlet so that users can speak freely. Through this, I created a Google Forms survey, and asked my friends’ younger siblings and cousins who were still in middle school or within that age group to answer it. This allowed me to gain both qualitative and quantitative data.

MARKET RESEARCH

Digital & Visual References

IDEATION

Problem Space & Mind-mapping

With the data collected from the user research, I decided to create a mindmap to sort out my findings and help me identify what the problem really is.

Reflecting upon my findings, I reminded myself that I am not an educator, and I do not have the knowledge and rights to create or alter an education system. I want to instead focus on exploring learning experiences. During my interviews, it was often assumed that high tech/digital experiences was replacing traditional teaching methods. I want to emphasize how technology doesn’t replace teaching or learning, but instead enhances it.

One of the main elements highlighted in my user research was the social aspect and importance of human interaction in learning, and I wanted to work around that to create a collaborative and personalized space for students. I’m quite unsure of creating an outcome that interferes with the current education system, so the idea of embracing this approach in the form of a digital learning space AFTER SCHOOL as an online study support resource seemed like a solution to allow students to work in their own pace and have additional support in a digital age. This would also allow students to explore different fields beyond the traditional/limited courses that schools provide them with.

To identify the features, pages and information architecture of the app, I created a user flow diagram to organiz all the specific details and interfaces. I created this using Miro, and it really helped me ensure the flow runs smoothly and that everything connects with each other.

SKETCHES

Visualizing features

I decided to use the VARK learning styles to shape my product, as these are the four learning styles of students. V for Visual, A for Audio/Aural, R for Read/Write and K for Kinesthetic. To create a personalized learning experience that matches the user’s unique needs and goals, it is essential to create an experience that suits their best learning style.

^{Source: https://tutoringwithatwist.ca/vark-learning-styles/}

I then started to visualize the features we had in mind based off of our findings through rough wireframe sketches.

WIREFRAMING

Low-fidelity

SOLUTION

High-fidelity

From the low-fidelity wireframes, I incorporated the established design system and additional illustrations to optimize the experience. I solved the highlighted painpoints in afterhours., through the features:

As a first time user in afterhours., the smooth and personalized on boarding process begins with a personalized learning test to identify what kind of learner you are. This will allow afterhours. to cater your learning material and courses in a pace and style that’s personalized to you, and only you.

In afterhours.’s main dashboard page, users can see their upcoming events, to do list, notifications, and other essential information. All important and upcoming events of your life, all in one page.

The dashboard in afterhours. s customizable, providing users an even more personal experience to adjust to their personal needs. Users can choose to remove or switch up the layout of widgets based on their lifestyle needs.

One of the main features in afterhours. is the ‘Courses’ section, where features such as ‘featured courses’, upcoming assignments, live webinars and the user’s courses for the day are accessible. Enroll into courses that you’re interested in, and learn at your own pace.

When picking a course, this is the interface that will appear. There will be specific material, which can
be viewed in full screen, a button to the whiteboard session, a button (top right) to join the class and automatically turns on the user’s mic, and tasks.

An interactive and live whiteboard feature highlights the collaborative and real-time learning experience, ensuring that teachers and students can interact on the same screen at the same time.

In afterhours.’s support page, users can input their mood/thoughts as a diary/reflection space to wind down after school. They can access their mood log entries easily by clicking on them. There is also an advice forum on specific issues and an immediate help button to contact professional and urgent advice.

afterhours. offers a hangouts feature to emphasize on the collaborative and communication aspect of learning. With most schools being online, this can be a center headquarter for all club meetings and events.

DESIGN SYSTEM

Visual Identity

Final Experience

REFLECTION

Key Takeaways

Reflecting on this project, there were a lot of changes I made towards the end - mainly due to how I kept an open mind about research and tried to actively gather new findings. The action of doing so prove to me a much more insightful and impactful end result, as I managed to incorporate such elements into my product.

My goal for afterhours. is to one day be able to help young students optimize their learning experience. Their wellbeing and growth doesn’t only happen in the classroom - what happens after school matters just as much. When designing the information architecture, I took into consideration the skills and knowledge I personally would have wanted to learn when I was younger, and the mental health and support aspect as a teenager.

I initially wanted to incorporate some kind of haptic technology/motion sensory element into my outcome, keeping in mind how young teenagers are still actively enthusiastic and require a lot more physical activity. However, I realized that it was beyond my ability and my time frame, and decided that creating an online platform first would already be a first huge step as it is.