I create the following User Journey Map to illustrate the users experience when locating and purchasing an item
As the web page does not offer sufficient search filters or product catagories, it becomes clear that the biggest pain point is finding an item to purchase. This issue is even further exacerbated when you factor in the many WCAG accessibility violations that make the web page harder to navigate.
I interview users who have purchased anime merchandise online previously. The data from the interviews is then affinity mapped to find the following key takeaways:
This data is synthesized to create the following Persona to represent our target users.
Users need to to control the specificity of their browsing to find the My research found pain points in that Anime Imports lacked browse category specificity, yet this is our users most valued feature. It is clear that this should be the focus of my iteration.
Moreover, I decide to create browse filtering without dropdown menus to keep my design accessible to users are using screen reader software. My research indicated previously that most of the competitors in the market do not design their web stores with accessibility in mind so this would give us a leg up.
I begin by design with a task flow which i develop into a more complex user flow.
The user flow is used as a foundation for my initial sketches. I create wireframes based on my sketches.
My wireframes are used to create a functioning prototype which allows the user to find and purchase a figure from the Juijutsu Kaisen anime. A link to the prototype can be found below.
I use this prototype to conduct usability testing with users who have purchased anime merch online before to find both quantitative (success rate) and qualitative (what were the pain points of the prototype journey) data. Some key takeaways:
This data is used to inform my UI redesign of the web page. I am careful to choose colors contrasts and text sizes to adhere to WCAG guidelines to further ensure the site is consistently accessible. Hi-Fi mockups are provided below.
Designing for accessibility makes the user experience easier for everyone. The research indicated in this case study that the needs of the general user mirrored that of users with accessibility needs. Furthermore, the lack of accessibility consideration in the market made it an obvious solution that benefits all users.
