Soundboxing is a VR aerobics game where players box to the rhythm of their favorite songs, designed by an active community of creators. I was commissioned as a UX and Visual Designer to research and redesign the brand, game interface, and marketing page.
I began with an open ended survey to get a better sense of the users’ personalities. With the results, I defined the positioning and brand voice (for marketing) and most sticky points of the game (for product development). I was able to better understand the most enjoyable part of gameplay, the emotions and motivations that drive people to play again and again, and understand what shapes the mindset of a challenge creator.
SoundBoxing exists at the intersection of dancing, boxing, and music appreciation. A large portion of users were using the game for cardio or physical therapy, reporting decreased muscle pain and even calorie and weight loss. This man lost 50 lbs playing SoundBoxing.
While other rhythm games provided pre-made content, SoundBoxing was entirely user generated. Since the VR handsets recorded players’ individual movement style, each beat map showcased unique dancing talent. Top SoundBoxing players described other games in the space as stiff and mechanical in comparison.
When asked how they would describe SoundBoxing's personality, several trends showed up in the word cloud. Friendly, fun, happy, charismatic, particular, technical, skilled, intelligent, hard to please, perfectionist, rewarding. Undoubtedly, this reflected the game’s energy, but reading the responses, this also applied to the players themselves. Comprised of software engineers, teachers, fitness enthusiasts, and musicians; the verbosity of these enthusiastic players revealed not only their intelligence and skill, but also the extent to which SoundBoxing had changed their lives.
With a positioning statement defined, I moved on to brand design. I developed a logomark that conveyed a sense of movement reminiscent of the orbs in gameplay. The wordmark combined Overpass and Work Sans. For colors and textures, I drew upon the metaphor of digital turntables at a DJ set, the robot mascot's eyes, and the shape of a boxing glove.
I developed textures with various arc lengths and rotations, to be used in the marketing page as backgrounds in both the brand red and blue. I also created button styles and header/footer styles, and established the style guide for headings and body text. I also wrote all copy for the marketing page, keeping in mind learnings about the core user from the research stage.
Before development, I tested a functional prototype of the marketing page using Invision, Usability Hub, and UserTesting Peek. I used learnings to further refine the copy and presentation.
Simultaneously, I worked on the UX for existing users. The cards I created were optimized to be viewed on desktop and mobile (on Web VR enabled devices), and in the game itself as a floating screen.
On mobile, I did not condense to a hamburger menu because there was enough room to display a condensed search bar, the two top level nav items, and a user profile picture with carat. In my experience, it is better to avoid hamburgers unless absolutely necessary.
Before the redesign, challenges showed number of punches before clicking a card. But for a very long or difficult song, this was neither a gauge of difficulty nor popularity. I replaced punches with total plays, along with a universally recognized play icon, which is more meaningful than punches for popularity data. In contrast, punches are a great metric for individual users, so I put that on the user profile page.
Since Playlists were a great way to curate challenges and categorize them by difficulty, genre, and other factors, I added a button to each challenge card that allowed users to add challenges to a playlist. For the global Challenges and Playlist pages, I focused on adding sort functionality, including by time and popularity, both in terms of plays and likes, since this was a major pain point that surfaced in the research.
For each challenge, I redesigned the high score view to make data easier to scan. Clicking through each score leads to the player's profile page, with subnavigation for recent scores, challenges created, likes, and playlists created.