ENDORSEMENT SYSTEM DESIGN

Empowering Peer Recognition in MOBA Games

Role — Product Designer

Duration — 2 weeks

Goal — Design a system for students recognition.

Synthesis is an online multiplayer platform where students can develop their leadership and teamwork skills. Through engaging gameplay, students practice communication and collaboration, reinforced by the use of "props." Students can give or receive props from teammates for qualities like creative thinking, dedication, or strategic insight.

Moderators—trained adults who observe and coach students on their collaborative skills—can also recognize recently observed teams with props. This recognition system encourages positive behaviors and acknowledges students' contributions in real-time.

As students collect props, they progress through Synthesis's titles, starting from 'Novice' and aiming for the prestigious 'Synthesis Ambassador' title. To achieve this highest honor, students must demonstrate growth and proficiency across all prop categories, as evaluated by both peers and moderators.

My Responsibilities

  • UX and UI research, synthesis, and communication.

  • Low and high-fidelity design mocks for the proposed system.

  • Interactive prototypes to showcase important features, flows, user actions, and animations.

  • Collaborate with developers and stakeholders on technical risks and design reviews.

  • To update and create early art assets required for our revisions.

  • Create a style guide and asset repository for developer and artist hand off.

  • Coordinate materials with Studio Lead for pitch deck completion used in green light meeting with stakeholders.

Synopsis

Discovering style, focus, and themes

Realizing I knew nothing about designing a leveling or skill-development system, I researched the interaction and system design of well known achievement and endorsement ecosystems.

Now with context, I worked out the details of the information architecture and structure of our endorsement system. After several revisions with coaches, developers, and the studio lead, the final result focuses on encouraging team work and collaboration-based soft skills, not winning.

Envisioning our lasting impact on student lives

It was clear at this point that I needed to set a north star and vision to work off of—as our company mission to ‘create super-collaborators’ lacked a future vision. When are students officially supercollaborators? What does our experience look like in Version 10? How can we realistically design ahead of our building pace to reach that vision?

Here is my vision, tweaked and critiqued with the help of our studio lead:
The ultimate goal of Synthesis is to make the 'Synthesis Ambassador' title as credible and respected as an Eagle Scout rank. Students who earn this title have undergone rigorous teamwork coaching, reflecting a high level of commitment and skill. Synthesis proudly recognizes and celebrates this achievement, showcasing the student's journey of growth and accomplishment.

System design focusing on soft skills

Weaving interactions into existing UX flows

To ensure this new system pitch would incorporate well into our existing user experience, I recycled dynamic components where possible and introduced one new screen, to view collected props—like a trophy room!

UI assets for a pitch deck and rapid-prototyping

Earliest versions of UI and art assets were composed of clip art and generative AI art. To give our pitch deck a consistent feel with our existing UI, I developed a low-fi design system to use in mocks and in rapid prototyping. After validating the UX and gaining a green light from stakeholders, I’d work with our studio’s artist to polish assets further.

Key Screens

I designed the necessary key screens to best showcase our new peer recognition feature. The first three showcase the ideal timing—while queueing for the next match— for students to recognize others. The next four contextualize where received props live and new a hover interaction for joining our game queue.