The prioritization of the redesign of the product details page for platters was determined through a combination of the findings from the Baymard report, an analysis of the existing product details page template, and an examination of the feasibility of merging the various sizes of platters into a single product listing.
A poor proximity of related information makes it difficult to infer the meaning and relation of the different customization options.
Be mindful of the proximity between related information. Make a visual grouping of each option through the use of spacing between the options. Alternatively, the same visual grouping can be achieved in the overall layout with the use of borders or alternating row colors.
I served as the designer for this project. Collaboratively, with the UX Researcher, I facilitated user testing. Subsequently, I meticulously analyzed the findings to establish the design direction. I effectively communicated to stakeholders the insights gathered from this research, while illustrating how these findings were integrated into the final solution.
A significant amount of innovation was involved in the design of the project. Extensive time and effort were dedicated to validating the design through thorough research and rigorous testing. Regrettably, the inclusion of innovative design choices were reprioritized to be included in a future enhancement. As a result, we made the decision to scale back the project in order to reduce the development effort, ultimately resulting in the launch of a downsized version of the design.
As I initiated the creation of different wireframe versions for the design, I categorized them into two distinct groups: preselected ingredients versus unselected ingredients. Additionally, I delved into the idea of allowing users to choose a sub with pre-configured ingredients or to customize their own sub by selecting individual ingredients.
A decision was made to remove designs that lacked pre-selections in order to enhance the user experience. These designs catered to customers seeking a streamlined add-to-cart option, while also allowing other customers the option to customize their selections. I narrowed the design options from 15 to 4 (A, B, C, D) and initiated a round of user testing to identify the optimal choice, starting with options A, B, and C as these were similar because the sub customization was by individual ingredients as opposed to selecting the sub.
Page Layout
Quick remove lettuce/tomato (C)
Vegetarian sub option
All of the designs were successful in terms of task completion. However participants preferred
The successful features from designs A, B, and C were merged to create what I called a “Frankenstein” option. Shortened to option F, another round of user testing was conducted to evaluate it against option D.
Platter customization
Page layout
Design F was the clear winner
Certain design elements within project F led to increased development complexity, resulting in a delay in the launch timeline. As a result, the design was subsequently simplified in order to meet project deadlines.
Although there was consensus on utilizing section headers for visual organization within each of the three subsections, it was determined that implementing an accordion feature would introduce unnecessary complexity without significant added value for the customer.
The fixed tab overview that remained at the top of the screen when scrolling addressed the issue of customers losing track of the sub they were customizing. Another solution would be to anchor the section header at the top when scrolling, which would achieve the same outcome while requiring less development effort.
Through this project, I successfully led a user testing initiative on a significant scale involving over 100 participants. I took full ownership of the script development, prototype creation, video monitoring of participants, and data analysis. This experience allowed me to effectively connect research findings to design decisions.
