A proprietary product for one of gaming’s most reputable hardwear brands, Astro Gaming Speaker Tags are available for consumers to personalize through an online customizer.
Speaker Tags are interchangeable plates that adorn Astro Gaming headsets from their magnetic attachments. These unique products can be personalized by Astro Gaming fans through an online customizer. Since there was already a customizer that existed, my job was to create an improved build and experience for those who wanted to create their own tag plates.
Existing flaws
I started by analyzing the state of the current customizer. In addition to the findings below, I also evaluated existing customizers in the marketplace to leverage the design solutions and weaknesses that they presented.
Dated technology
The initial customizer was built in Flash which is dated and flawed in a number of ways. With the responsive design and animation capabilities of HTML5 and CSS3, it was imperative to create this new build in a language that was easy to manage and communicated with the print vendor seamlessly.
The future is here but Flash didn't get the memo.
Limited access points
The existing architecture of the site restrained users from understanding the full spectrum of Astro Gaming’s product line and the Tag Customizer was no exception. The example above defaults A40 speaker tags over A30 or custom ones in the menu even though a user may not own an A40 headset. Optimizing and creating more access points to users would expose them to more relevant products.
Custom tags are buried behind the default tab which may not even be applicable to users if they don't own an A40 headset.
Poor product education
Not only were there limited ways to get to the Tag customizer but once users reached it, they were poorly informed on the product and the shopping process. There were several miscues from the start until completion.
Since we have 2 ears, it makes sense to want 3 tags right? The distinction is actually based on the headset type - one of which allows a detachable microphone. The 3rd tag enables the microphone attachment through an opening.
Cumbersome interface
The existing customizer exposed all of the available tools to the user up front at the expense of being simple and easy to use. Many users tended to be overwhelmed and frustrated.
Need instructions? Good luck customizing your tags...
All of the information gathered made it easy to produce a tangible checklist for the project and helped lay the groundwork for the customizer architecture.
  • Improved system integration
  • Integrate the customizer into the website to match the brand

  • Establish more access points to the customizer throughout the website (ex: improved navigation, upsell opportunities)

  • Form & function enhancements
  • Develop improved layout options, artwork, and usability

  • Add ability to save designs and share via social media

  • Design to accommodate localization for international countries

  • Solid engineering infrastructure
  • Build in HTML 5 to enable responsive design and easier maintenance

  • Speak with newly proposed print vendor to understand printing requirements

My initial step after performing an in-depth analysis on the existing customizer along with those in the marketplace was to outline the necessary features of the product which include those in the following list.
Key elements
A30's or A40's?The first critical step for the user was to define their headset type in order to be matched with the properly sized speaker tags
Single base color or patternAfter our initial call with the printing vendor, their printing process required all tags to maintain the same base color or pattern for cost and print efficiency
Astro, featured, or customBeyond custom artwork, we also wanted to feature Astro or partner artwork like those from Ubisoft’s Assassin’s Creed franchise. It made it easier to categorize the options into these buckets so that the user could easily dictate what they wanted.
TextIn addition to artwork, we also wanted to provide the ability to add text. We ensured this was limited to strategic placements that would limit the obstruction of artwork - an important detail to our partner agreements.
SocialWe wanted users to expose their artwork to their social spheres to not only display their work but also help promote the product.
SaveThis enabled users to finish their designs at a later time. It would require users to create an account with Astro Gaming, increasing its number of registered and connected users.
the pieces
After understanding all of the critical elements involved in the customizer, I proceeded to diagram a flow that linked all of them together. This was developed in a way that seemed natural and intuitive for users to follow and efficiently deliver them the tags that they desired.
Quick iterative wireframes
Since there are so many elements and steps involved in this extensive customizer, I went through several rounds of wireframes to help funnel it down to the concepts that made the most sense for users. Ideas slowly converged throughout this phase.
User testing
When I felt that my wireframes had reached a point where they could deliver optimal results from our users, user testing always helped keep me modest.
To gather feedback, I used a real-time mirroring software called LiveView. This program enabled me to stream my desktop onto any device. Users were provided a tablet for testing since this project was being designed for that device along with desktop web. Prior to testing, users were briefed to act "naturally" and to voice their actions and thought processes so that I could gather the appropriate feedback.
I went through a series of 8 tests to document all pain points that users were experiencing in my preliminary wireframes. The items below represent the notable feature requests and issues that were persistent amongst all users. After realizing this list, I implemented remedial design solutions into my wireframes.
Duplicate artwork
Mirror artwork
Tag rotation
Contextual preview
Since these tags were made to be worn on both ears, many users wanted to design them to match.
In addition to matching artwork on both tags, users also wanted the ability to flip the art so that the composition of both tags faced the same direction while they are worn.
Many users tended to have problems moving from one tag to the next during their design process.
A lot of users expressed their desire to see how the tags actually looked on a headset.
I enabled the option for users to copy and paste artwork from one of the other tags they had already designed.
I simply provided an abiilty to flip the artwork once a user is in edit mode.
To help users move from one tag to the next, I provided extra tools including a slider bar and navigational arrows on the sides.
I simply provided a preview feature which enabled users to see the tags on the headset from multiple angles.
Once the new wireframes were ready, I ran subsequent user tests to ensure that these issues were resolved. When I came to that realization, I then allowed myself onto the next step.
Visual design
The language and visual design were delivered to match the Astro Gaming brand and UI style guide.
1st base
Users start with a macro view of all tags and are prompted to apply a single base color pattern.
editing tools
Users are exposed a variety of editing tools and guidelines to help them through their design. A tutorial is readily accessible if needed.
Enhanced focus
Users are now able to concentrate on designing one tag at a time.
Guided options
Users are provided an extensive freedom in designing their tags but also given guidelines to assist them in their design.
The improved usability and feature options enable users to truly customize tags to match their personality.