The Avatar Builder is a platform that allows participants in the Global Engineering Days event to create their own avatars by selecting and customizing various appearance features such as eyes, nose, hairstyles, and clothing. It is a fun tool for users to express themselves and customize their avatar’s appearance.
Understanding current problems
Based on the feedback we collected from users, the following areas were identified as needing improvement:
STEP 1: UX Competitive Analysis
To begin the redesign process, I conducted a thorough comparison of various avatar builder platforms. I researched and tested several leading options from a customer usability perspective, experimenting with the visual elements such as moving clothes, adjusting facial features, and changing hairstyles. This helped me to identify areas for improvement and gather valuable insights.
Based on research:
To evaluate and rank the various avatar builder platforms, I created a list of common features and used it as a reference. The priority features that I looked for included:
Operations functions such as Undo, Redo, Wider, Narrow buttons
- General functions such as Random, Reset, and Share
- Last, but not least was to add the scrollbar and information box
STEP 2: Low Fidelity Mock-up
STEP 3: UI Design
As part of the redesign process, I experimented with different button styles and colors to see which options were most effective. This included creating a few different variations to test.
Run usability and accessibility tests:
After conducting an accessibility and usability test, I made the decision to change the shape of the buttons to a more rectangular style in order to maintain consistency with the avatar page view. The light grey color theme was chosen to create a more readable experience that will align with future Global Engineering Days (GED) designs. These changes were made with the goal of improving the overall user experience of the avatar builder platform.
Step 4: A/B Testing for new hair naming
To gather feedback and further refine the design, I conducted A/B testing with 10 participants. I showed them an existing demo of the avatar builder platform and presented two alternative hair naming options. The participants were able to share their thoughts and vote on their preferred option. This helped me to gather valuable insights and make informed decisions about the design.
To keep track of feedback from users, I created a card for each participant and recorded all of the meetings. After reviewing the recordings, I wrote a brief summary of the user’s opinion to help inform the design process.
Step 5:Pop-up alert information box
In order to effectively collect and track user feedback, I created cards for each participant and recorded all of our meetings. I then reviewed the recordings and wrote summaries of the users’ opinions to help guide the design process. This was an important step in ensuring that the final product met the needs and preferences of our target audience.
“I really really like front-back options. Actually I didn’t realize I can pick two options at the same time. Front and back” — said Caroline one of 10 users from focus group.
Step 6: Production
Once all approvals and A/B testing were completed, I finalized the design of the Avatar Builder platform and linked all of the colors and styles to the Intuit Design System library. I also provided detailed specifications and descriptions for the developers to follow. These final touches were important in ensuring that the platform was fully functional and met all of the necessary requirements.
Final View
Next Steps:
To test the new Avatar Builder platform, we conducted a focus group using prototypes online. The feedback we received was overwhelmingly positive, and as a result, we are planning to launch the platform at the next event in April. We are excited to see how users respond to the new design and will be open to making any necessary changes based on their feedback.
