EliteGamingLIVE Redesign
Revamping ElitegamingLIVE: simplifying dashboards, ensuring interface consistency, boosting engagement with rewards, and enhancing learning modules.
Overview
In the ever-evolving landscape of education, innovative approaches are essential to engage and inspire students in meaningful learning experiences. EliteGamingLIVE (EGL) stands as a beacon of innovation, seamlessly merging the captivating realm of esports with the profound potential of STEM education to cultivate the next generation of leaders from students grades 3-12.
​
This case study delves into the transformative journey of EGL, exploring its inception, evolution, and impact on student engagement and learning outcomes. By examining the unique intersection of gaming and STEM education within EGL, we uncover the key strategies, successes, and challenges encountered along the way. Through a lens of inquiry and reflection, this case study illuminates the profound implications of EGL as a catalyst for innovation in education and a testament to the power of immersive learning experiences.
Join us as we delve into the dynamic world of EliteGamingLIVE, where passion meets purpose, and gaming becomes a gateway to academic excellence and lifelong learning.
Info
Project Type
Website and Platform Redesign
Project Duration
January 2024 - March 2024
Client
EliteGamingLIVE
Team
Danny Barnes, Crystal Chen,
Katherine Lobovski, Wai Ting Zhao
Tools
Figma
Spline
Problem
The company faced a distinctive challenge stemming from budget limitations, which hindered additional user testing and research endeavors. In response, a creative methodology was adopted to comprehend and improve the user experience of EliteGamingLIVE's platform and interface. Acknowledging the significance of direct user feedback, we assumed the roles of end-users, taking on the perspective of the target audience to identify existing challenges and limitations firsthand. I meticulously reviewed the current learner dashboards and assessed the usability of academy sections. This process entailed offering comprehensive feedback to enhance the educational and interactive elements of the platform and identifying areas for improvement. Several issues were pinpointed by examining the user flow of a first-time player through the dashboard, rewards system, academy lessons, and inconsistencies within the interface. It became evident that the onboarding process lacked clarity and intuitiveness, hindering users from seamlessly accessing the platform's features. Additionally, inconsistencies in design elements and navigation pathways posed challenges to user understanding and engagement.
Solution
To address these issues and enhance the overall user experience, we redesigned the platform to streamline the onboarding process. Furthermore, efforts were directed toward refining interface elements for better consistency and clarity, thereby facilitating smoother navigation and comprehension. By focusing on these aspects, the aim was to streamline processes for learning and positive reinforcement within the EGL platform, fostering a more user-friendly and immersive educational experience for participants.
Competitive Analysis: Learning Strategy
In comparing EliteGamingLIVE's (EGL) learning strategy for lessons and quizzes to established platforms such as Canvas, Khan Academy, and Duolingo, each platform offers distinct approaches to feedback during assessments.
Duolingo and Khan Academy Strategy: Check Answer After Each Question
Both Duolingo and Khan Academy prompt users to check their answers after completing each question. This immediate feedback mechanism allows learners to gauge their progress incrementally and correct misconceptions promptly. Khan Academy's extensive library of educational content spans various subjects, offering learners opportunities for continuous review and reinforcement. Similarly, Duolingo, renowned for its language-learning capabilities, leverages this strategy to ensure learners receive immediate feedback, facilitating efficient skill acquisition.
Canvas Strategy: Feedback After Quiz Completion
Canvas, a widely used learning management system (LMS), typically provides feedback to learners after they complete an entire quiz or assessment. This post-quiz feedback approach allows instructors to customize feedback based on overall performance rather than individual question responses. While Canvas offers flexibility for educators to provide detailed feedback and explanations, it may result in delayed feedback for learners, limiting the immediacy of corrective measures and learning reinforcement.
EGL's Transition to Real-Time Feedback Strategy
Initially, EGL adopted a feedback strategy similar to Canvas, providing feedback after quiz completion. However, through a comprehensive case study and analysis, EGL recognized the benefits of real-time feedback strategies employed by Khan Academy and Duolingo. This realization stemmed from research and analysis that immediate feedback fosters greater engagement and learning retention among participants.
​
Comparison with EGL's New Strategy
In contrast to Canvas's post-quiz feedback approach, EGL now integrates real-time feedback for each question during quizzes. By providing immediate insights after each question, EGL creates an interactive learning environment where learners receive timely guidance and reinforcement. This dynamic feedback mechanism fosters engagement, facilitates continuous learning, and enables learners to adjust their understanding in real-time, aligning with EGL's mission to engage students through immersive gaming experiences while imparting valuable STEM knowledge and skills.
Conclusion
Through a thoughtful analysis of feedback strategies employed by Canvas, Khan Academy, and Duolingo, EGL has evolved its approach to prioritize real-time feedback. This shift underscores EGL's commitment to innovation and responsiveness to best practices in educational technology. By embracing real-time feedback within the gaming context, EGL reinforces learning objectives effectively and enhances student engagement, positioning itself as a trailblazer in esports-driven education.
Feedback after quiz completion strategy
Real-time feedback after each quiz question strategy
Dashboard Revision
The player profile serves as the central hub, aiming to provide users with a comprehensive 'home' space where they can effortlessly access vital information. Our objective is to ensure users can easily view critical elements such as their total livescore, upcoming event countdown, gaming statistics, player progression, and academy lesson progression. To streamline the onboarding process and allow existing users to navigate the platform more easily, we redesigned the dashboard with the aim of reducing clutter, prioritizing the most important features, and increasing engagement.
As shown above, the current layout and functionality of various widgets within the dashboard warrant refinement and the dashboard itself is plain and nonintuitive. Some widgets may benefit from expansion to offer more detailed insights, while others may need to be reevaluated for removal. When conducting user testing on the platform as a first-time user, I noticed that various features complicate navigation because of the lack of explanation of each section and the intended user flow. These factors impede user understanding of exploring the site and determining their next steps. To improve the user experience, we analyzed what should be prioritized and important for the navigation and user flow.
In one wireframe iteration, our approach focused on retaining key components of the existing dashboard, refining them where necessary. In another iteration, we undertook a complete redesign to reimagine the dashboard's layout and functionality, optimizing the user experience to function as a "home" for users when they first log onto the platform. We created sections for rewards so players can view their newly earned comp cards and avatars, as well as shortcuts to view the reward collections. We also streamlined the user flow to the lessons in the academy section of EliteGamingLIVE with visual elements indicating which lessons users have recently been working on or completed. We designed features such as a progress bar that conveys the percentage a player needs to reach the next level and a leaderboard that showcases player rankings. For positive reinforcement and to increase player interaction, we designed a daily question feature that serves as a review for users and a way they can earn additional livescore.
In the final mockup of the dashboard, I redesigned the background and theme to create stronger branding for EGL to match its mission control and other space-related features and create contrast so that the sections can be distinguished to capture the users' attention. In addition, I decided that the most integral sections of the dashboard should be daily quests and a daily question for positive reinforcement of rewards and monthly badges and current lessons.
Rewards Revision
The rewards page plays a pivotal role in fostering positive reinforcement, serving as a catalyst to inspire and motivate players to further engage with the platform and continue their learning journey. Initially, I drafted wireframes for key sections including the avatar, comp cards, and badges of the rewards platform. Through competitive analysis of reward features of other platforms, such as Duolingo, Fortnite, Pokemon, Webkinz, Apple Watch, Roblox, and Palworld, I researched positive reinforcement reward strategies and what universally recognized gaming features are such as rarity keys. During the ideation phase, various design options were explored, ranging from a centralized rewards dashboard with ways to earn awards to a timeline feature, and even consolidating all sections onto a single scroll page.
Competitive Analysis: Rewards System
Low-Fidelity Wireframe Iteration I
High-Fidelity Wireframe Iteration I
High-Fidelity Wireframe Iteration II
Final Mockups
The final mockups consisted of revisions to the overall branding of the reward section to strengthen EGL's identity as well as the separation of packs for each rarity rather than the random display of avatars from different packs mixed together. After a user clicks on one pack, the platform takes the user to the specific collection. In addition, avatar and comp card pop-ups convey the percentage of players who have the card, the names of these cards, and an overlay that shows how many of that card or pack the user owns. Lastly, the timeline now includes accomplishments such as completing daily quests and lessons or earning badges and comp cards.
Takeaways & Next Steps
In a small company with limited resources and personnel, adhering strictly to traditional design processes may not always be feasible. Instead, I learned that I must leverage available skills and resources to create the best possible user experience. My approach involved immersing myself in the platform as a first-time user, testing functionalities with teammates, conducting comprehensive competitive analyses on similar education and gaming platforms, and facilitating critiques with both the design and curriculum development teams. By embracing a flexible and collaborative approach tailored to our unique constraints, we were able to iteratively refine the product and deliver a user-centric solution that met our objectives.
From redesigning dashboards to optimizing user feedback mechanisms, every step of the way was guided by a commitment to enhancing the learning experience for EGL users. Through hands-on exploration, iterative design processes, and rigorous analysis, we've not only elevated the platform but also set new standards in esports-driven education. As we reflect on our accomplishments, we recognize that EGL's success is a testament to the dedication and creativity of our team. If budget constraints lessen, we plan to conduct more user testing on the platform by interviewing and surveying the thousands of EGL participants who use the platform. Moving forward, we remain steadfast in our mission to inspire and empower the next generation of STEM leaders through the dynamic intersection of gaming and education.