FULLMODE Interface Design
Overview
Pump It Up is a dance game machine found in arcades across the world with a rapidly growing online community. I designed an app to accelerate that growth by connecting these communities through remote competition. FULLMODE is a virtual Pump It Up tournament allowing for remote score submission and connects a community of over 100 active users.
Timeline
July 2023 - Present
Skills
User Research / Research Synthesis
Data Presentation
Figma Wireframing
My Role
UX Designer - Product Design, Interaction Design, Interface Design
Problem
🌍Expanding the Competitive Scene for Pump it Up
Though the Pump It Up community continues to grow, there are several factors that hold back its competitive potential:
Machines are local
Leaderboards don’t meet users expectations
Local tournaments require significant time and financial investment
The Solution
👨👧👦United Through Online Competition
Our solution to these user problems is FULLMODE, a remote competition platform that unites Pump It Up Players worldwide. Our app offers an accessible way to compete with other users at a similar skill level by transforming a dominantly local game into a global experience. Users now have an additional way to engage with the community while looking up to others for inspiration to better themselves.
User Research
🗒️Survey Design
To identify key user paint points and to guide our design decisions, I designed a survey with 3 main categories:
Features users want to see from FULLMODE
Feedback on the official leaderboard website
Features on a FULLMODE based website
Each category featured Likert scale questions measuring the enthusiasm or dissatisfaction with specific features, and have been randomized to best prevent question framing bias.
Key Findings
📍Meeting Users where they’re at
I synthesized the data we received from our 25 survey responses, and presented the key findings to my team, shaping our design approach:
“Design Should Meet Users Where They Are” - Features should properly work off users’ existing habits
“Simplicity Drives Engagement” - Focus on the features that users actually utilize
“Competitive Experiences need social features” - create a community for long term engagement
Link to Full Presentation
Persona
Branding
⬛FULLMODE as a brand
With these insights in mind, I began to design the interface, starting with core branding elements, such as the typography, logo, and colors. My goal was to create a theme that reflects the competitive nature of the platform while maintaining a clean and intuitive design to allow users to access key features quickly and efficiently.
Initial Design
📝Focusing on What Matters
As I prepared for the beta season, I prioritized on the core features that users would rely on the most, ensuring that FULLMODE’s tournament functions were clear, intuitive, and convenient to match the users’ life: The app was designed to be used in between users’ resting periods while they are off the Pump it Up Machine, since players typically rest while browsing on their phones in a busy queue, waiting for their next turn to play, making it an opportune time to utilize FULLMODE to submit scores to the leaderboard. This is to streamline the score submission process as much as possible.
In addition, designing an app exclusively for its key features makes including bonus quality of life features more convenient for our front end team!
Testing + Revisions
🚀FULLMODE Takes Flight
After launching our beta season to the community, we gained 100+ active players, testing our remote tournament experience and receiving valuable data on how users interacted with the FULLMODE app. Website traffic insights allowed us to identify areas where the design could improve with regards to usability
Key Revisions:
Letting the Submit Button POP - The submit button looked too familiar to other input fields, giving the overall design a lack of hierarchy. I redesigned the button so it can pop out at the user, solving its past problems in addition to doing its significance justice.
Establishing the Margins - The transition from a Figma frame to a live environment proved difficult for the margins in my design, creating an inconsistently cramped or empty feel depending on the screen the app was being used on. I decided to reestablish some margins in order to create a smoother feel throughout all devices.
Removed the About Page - There was little traffic going on in that page. In addition, everything beginners would need to know could be on the main page below the main actionable so that they’re already where they need to be for more information on FULLMODE
Link to 2nd Figma Draft
Final Product
Reflections
🍷Successful Launch, and Lessons Learned!
I was thrilled at the opportunity for another real world application of the UIUX concepts that I learned throughout my life, particularly through a community which I was heavily involved with (and thus, was designing a product for myself!). Here are some main takeaways from my experience designing with FULLMODE:
🏆 Live with your product - Me thinking about the time that I spent resting, waiting for my next Pump It Up set helped me realize how my product could be most efficiently used, filling in that void in time with an actionable which helps me become more involved with the community. Taking advantage of these opportunities really helped my design to shine.
🔄 Iteration and Testing - as an artist, I know more than anyone that the first draft is ever the final product. After my product was sent into the real world, it helped me identify key design flaws that my eyes couldn’t when I was first drafting the page.
📐 Designs are Never Finished! - I intended for my design to be simply such that implementation for future features (like moving on from beta) would be seamless, and it seemed to have been and will work out really well for our team in the future
Seeing the launch of FULLMODE become so successful was an incredible feeling and learning experience. Designing a product which I also actively use helped me become a real judge to my design, reinforcing the significance of User Centered Design. I’m excited to come back and write about other features we choose to roll out in the near future!
☕Thank you for reading! Please check out my other projects!