InPACT at Home Website Gamification

InPACT at Home Website Gamification

InPACT at Home Website Gamification

Enhancing the user experience of the InPACT at Home Website with a focus on encouraging physical activity among youth.

Team

Alaa Shahin, Insun Kim, Michelle Xie, Dhiraj Tadikamalla

Tools

Google Workspace Products, Figma, Miro, Wordpress

Timeline

8 MO / 2022

Award

Winner of the 1st place Innovation/Entrepreneurship Award at the 2022 Spring Student Project Exposition.

Overview

This project was done as part of my BSI UX Capstone experience, in which a consulting team was formed comprising three fellow students specializing in UX design. Our team was assigned to collaborate with a client and contribute to their designated project. Given my interest in understanding the impact of COVID-19 on people's well-being, livelihoods, and overall health, I chose to join the InPACT at Home team from a diverse range of available projects.

InPACT at Home is an evidence-informed home-based physical activity program designed to help K-12th grade students stay physically active and maintain healthy lifestyles during the Covid-19 pandemic and beyond. With a wide array of resources available, including workout videos, play cards, toolkits, monthly InPACT Challenges, and external links, the website fosters engagement in physical exercise among students and families alike.

Goal

The current low visitor engagement on the InPACT at Home website presents an opportunity to revitalize the platform and create a more compelling user experience. By addressing the lack of motivation among parents and children, there is a chance to significantly increase website traffic and encourage active participation in the program's physical exercise opportunities via gamification elements.

Before

After

Before

After

Final Design

Process

Throughout the project, we followed a systematic process that involved the following

Define

Understanding problem space

Defining project goals

Expected methods

Forming a schedule

Research

Journey Mapping

User Interview

Affinity Mapping

Heuristic Evaluation

Competitive Analysis

Design

Sketches

Feedback Session 1

Wireframes mid-fi

Feedback Session 2

Prototype design

Evaluate

User-Based testing

A/B Testing

Expert Evaluation

Design hand-off

Journey Mapping

We began by empathizing with our users and mapping out their journey, understanding the steps they take from initial discovery of our product or service to achieving their desired outcomes. This process allowed us to identify pain points and areas where users may experience frustration or confusion.

To validate our assumptions and gain valuable insights, we engaged in conversations with real-life users. Through these user interviews, we gathered firsthand feedback, ensuring that we truly understood their needs and uncovering opportunities to enhance their experience.

User Interview

To gain a comprehensive understanding of our user base, we conducted interviews with 7 participants, focusing on two primary user groups: K-12 students and their parents. Since students are under 18, we primarily engaged with parents to gather insights into their children's needs and preferences.

During the interviews, we not only tested participants' ability to complete tasks but also delved into discussions about the factors that motivate their children to engage in regular exercise and the common obstacles they encounter. This approach allowed us to gather valuable insights into both the practical aspects of user interaction and the underlying motivations and challenges related to physical activity.

Findings About Kids:

  1. Kids struggled with motivation, lacking a workout partner or exercise buddy to keep them engaged and motivated.

  2. The majority of kids preferred an organic exercise routine without a specific workout schedule, seeking flexibility in their physical activity.

Findings About Parents:

  1. Difficulty in finding suitable exercise time with their child due to their busy work schedules.

  2. Desire to create awareness regarding the significance of cultivating exercise habits within the home environment.

Sketches

To enhance user engagement, we implemented several features. Firstly, we introduced an avatar system that represents the user, accompanied by a personalized weekly goal. To track their progress, users can now visualize their advancement through a progress bar.

Furthermore, users have access to a comprehensive overview of their completed activities for the week, including earned badges and ranks, providing a sense of accomplishment and recognition.

To further boost motivation and awareness, we integrated pop-up notifications on the video page, notifying users when they achieve a badge. This feature serves to reinforce motivation and keeps users informed about their accomplishments.

Wireframes

To ensure a user-centered design that aligned with project objectives, we began by creating wireframes, providing visual representations of the website's structure and layout. These wireframes served as blueprints, enabling us to explore design possibilities and iterate on our ideas. Concurrently, we actively sought feedback from peers and clients, sharing our design iterations, prototypes, and user testing findings. This iterative feedback loop helped refine our designs, ensuring they met project objectives and addressed user needs effectively.

Final Design

Based on the insights gathered from user research, competitive analysis, ideation, and user testing, we developed a high-fidelity prototype of the InPACT at Home website. The prototype included the website's layout, visual design, interactive elements, and content structure. The prototype aimed to provide an immersive and engaging user experience while addressing the identified user needs and project goals.

Track your workout progress

The Progress page we developed offers users a comprehensive overview of their goals, progress, daily tasks, focused topics, and earned badges and ranks. This feature significantly boosts user engagement and motivation, fostering a consistent workout routine.

Set your fitness goal

The existing InPACT at Home website lacks a goal-setting feature, resulting in a multitude of navigation options that can lead to increased decision-making time. Introducing a fitness goal feature would personalize the website and provide users with guidance, ultimately reducing the overall time spent on making decisions.

Learn interface through
guided tour

The features of the progress page will provide clear guidance for new users, eliminating any confusion associated with navigating through the My Progress page.

Earn a badge with smoother
navigation

In the current InPACT at Home website, the video reflection does not immediately appear on the same screen after watching a video, requiring users to remember to scroll down. Additionally, there is no option for users to easily navigate back to the previous screen.

To enhance the design, we have implemented a feature that prompts users to earn a badge immediately after watching a video. This improvement significantly reduces the time spent on navigating the website, ensuring a smoother user experience.

Learning Outcomes

  1. Gained practical experience in conducting user research, including interviews, surveys, and observation.

  2. Developed skills in competitive analysis to identify design patterns and opportunities for differentiation.

  3. Enhanced ideation and brainstorming techniques to generate innovative design solutions.

  4. Acquired proficiency in creating high-fidelity prototypes using industry-standard design tools.

  5. Gained insights into the iterative design process and the importance of user testing and feedback in refining designs.

Reflection

Throughout the project, we faced challenges that required us to make critical design decisions. We carefully reflected on our choices, balancing usability, aesthetics, and technical feasibility. Collaboration, effective communication, and adherence to user-centered design principles proved vital to achieving a successful outcome.

I’m proud to work on such a large-scale project from the very beginning. Thanks a lot to my team for believing in me and supporting me throughout the process. I learned to collaborate with my team and our client to make an impact on people's well-being during COVID-19 and beyond.

Witnessing the launch of the dashboard at the culmination of my internship brings me immense satisfaction. Upon reflection, I acknowledge that there is room for improvement in onboarding both existing and new users to the new dashboard. Given more time, I would continue gathering user feedback and making iterative improvements to the dashboard.

Let's make an impact

Reach out to me to discuss UX projects, collaborate on innovative solutions, and explore the art of crafting exceptional user experiences."