Research
Current design
As the goal was to redesign an existing product, the process began with a thorough analysis of the current design. This analysis helped me to identify areas for improvement and ensure that new design decisions would be grounded in existing user behavior and expectations.
-min.png)
For example, I noticed the home page required a better balance in composition to enhance usability and aesthetics. The product card contained too many details, leading to information overload and potential confusion for users. Finally, the catalogue appeared outdated, which could affect users' trust in the product and brand.
Usability Study
To gain insights into user behavior and expectations, I conducted a usability study with three participants. Each participant was asked to describe their overall experience and demonstrate how they would order a bracelet. After collecting data, I used an affinity diagram to synthesize the results.
.jpg)
The usability study revealed that some users encountered confusion with the header navigation and unstructured catalog, while others found the product card to be overloaded with details.
To address these issues, I established a list of priorities for improvement. The top priority was to remove the excessive details from the header, as it was the most common complaint among users. The next priority involved simplifying the product card design and restructuring the catalog into a more intuitive layout. Finally, a value proposition banner was included into the list for providing a clearer message about the brand.
Ideation
User feedback
After synthesizing the research results, I began working on a redesign of the header to create a more cohesive navigation. To achieve this, I removed the subscriptions option from the it, assuming that users would prefer to access this information through their account. Additionally, I prioritized the "Shop" option by placing it in the most prominent location as a starting point for users.
To further simplify the header and ensure that users could focus on the most important aspects of the page, I brainstormed and identified missing sections. As a result, I added new elements such as "About Us" and "Blog".
.png)
Next, I turned my attention to simplifying the product card design. To create a cleaner and more spacious layout, I decided to hide the images into the gallery and remove the cross-sell offer from the card. Instead, I placed it in the next section, immediately following the card and gave it a specific emphasis.
.png)
.png)
Finally, following the usability study results, I identified that the existing Pura Vida homepage lacked a clear purpose and promotional block. To address it, I generated a concept to create a cleaner and more sophisticated look.
Design Process
Composition experiments
Once the initial arrangements were completed, I experimented with various composition layouts to improve the homepage. My goal was to showcase the flagship product in the banner, highlight best-selling items, and promote different brand values. To achieve this, I replaced the tile photos with a more effective promotional block that quickly conveyed the page's purpose and encouraged user engagement.
To maintain consistency with Pura Vida's existing visual design guidelines, I limited my color palette to different shades of blue. However, I experimented with the use of opacity and saturation to determine whether muted or bright colors could complement the design. By adjusting the color values of elements such as buttons, text, and images, I was able to explore different visual approaches that would enhance the overall look and feel of the website.
I presented the four distinct design concepts to users and solicited their feedback. After gathering their input, it became clear that the fourth design concept was the most preferred. This design featured a more effective promotional block, a cohesive header, and minimal visual distractions, all while staying within Pura Vida's existing visual design guidelines.
High-fidelity design
Once a design direction was chosen, the focus shifted to creating detailed, high-fidelity designs that incorporated branding elements, imagery, and typography. The goal was to create a visual language that aligned with the brand while also pushing the design forward in a fresh and modern direction.
After choosing the homepage design, I turned my attention to the catalog page. To improve its usability and organization, I divided it into three distinct sections and added a navigation panel to the left column. Additionally, I reduced visual noise by hiding the product category names in an expandable menu. This helped to create a more streamlined and visually appealing layout.
.png)
Lastly, for the product card page, I made several updates as well. As per the initial plan I moved the product photos into a gallery, allowing for more space to showcase the product description. This made it easier for users to focus on the essential product information. Additionally, I increased the size of the CTA button to create more emphasis and encourage users to take action.
Results
The final results of the project are showcased through the mockups. They demonstrate the redesigned homepage and catalog, as well as the product card page, aiming to provide a more sophisticated and user-friendly experience for Pura Vida customers.
.png)
Testing
To validate the final design concepts, I conducted user testing. It included tasks such as finding a specific product, browsing the catalog, and making a purchase. During the testing, I observed user behavior and gathered feedback on the overall design, functionality, and usability of the interface. The results confirmed that the redesign was successful in improving the user experience and enhancing the overall appeal of the store.
Metrics
One of the key success metrics I focused on was the duration of user sessions spent on finding products and adding them to the cart. After implementing the redesign, users were able to complete these tasks more efficiently, resulting in a significant reduction in the average time spent on these actions.
Reflections & Future Steps
Reflecting on my work on this project, I gained a deeper understanding of staying consistent with the brand's visual language and design elements, such as color schemes and typography, to maintain brand recognition and a cohesive look and feel.
I gained valuable experience in e-commerce UX/UI design, particularly in creating a user-friendly and effective online shopping experience. I learned the importance of designing with the user in mind, considering factors such as ease of navigation, clear product information, and a streamlined checkout process.
Moving forward, I plan to further enhance the UX/UI design of other pages of the store to ensure a consistent and seamless user experience. Additionally, I will work on creating responsive versions of the design to optimize it for different screen sizes and devices, including mobile apps for both iOS and Android platforms.