User Experience Optimisation
Introduction
As a Product Designer at Bestseller, I led a transformative project aimed at enhancing the page design experience for our stakeholder brands.
Our goal was to change how we build components within Page Designer, making it easier for brands to create unique and eye-catching pages. Page Designer, part of Salesforce Commerce Cloud B2C, has always been the go-to tool for building templates and components. However, we realized that the way we were building components within Page Designer needed improvement to better suit our brands' needs. So, we set out to revamp our approach, ensuring that brands could have more freedom to make their pages stand out while still keeping everything organized and efficient.
Challenges and Opportunities
Initially tasked with integrating an agency's solution, we recognized the opportunity to innovate further when it fell short of meeting our brands' needs. Embracing this challenge, we invested additional time and effort to propose a solution rooted in the concept of Atomic design. The solution needed to be future-proof, allowing for improvements, sustainability, and catering to all brands' needs.
Understanding the Old System
The previous system, based on Page Designer, posed challenges in terms of flexibility and efficiency. Components were built as monolithic structures, making it difficult for brands to make nuanced adjustments to font sizes, spacing, and other attributes. This rigidity stifled creativity and often led to frustration among our brands, who sought greater control over their page designs.
The components in Page Designer are constructed with a predetermined set of design elements, including headings, images, and calls-to-action (CTA). However, a significant challenge arises from the fact that all attributes of these design elements are stacked in a single long list. This design makes it cumbersome for users to navigate and fill out the attributes, especially considering that they may encounter attributes for design elements they are not utilizing.
This limitation restricts customization options and complicates the user experience. Additionally, Page Designer offers limited freedom to redesign and restructure this attribute list.
Utilizing Atomic Design Concept
A key aspect of my role involved harnessing the power of Atomic design principles. By deconstructing design elements into smaller, reusable components, we empowered brands to build components tailored to their specific needs. Each atom had a dedicated list of attributes, allowing for enhanced flexibility and customization.
Image source: https://bradfrost.com/blog/post/extending-atomic-design/
Innovation and Iteration
By restructuring components into atoms with dedicated attribute lists, we increased flexibility and efficiency while simplifying management. Regular communication and iteration cycles allowed us to refine the solution based on feedback from our brands, ensuring it met their evolving needs. The adoption of Atomic design principles not only fostered creativity but also laid the foundation for scalable and adaptable page design solutions.
Collaboration and Training
We organized comprehensive training sessions to onboard our brands onto the new solution, fostering collaboration and ensuring a smooth transition. These efforts demonstrated our commitment to supporting our brands and empowering them to leverage the full potential of the new system. Additionally, we provided in-depth training on the principles of Atomic design, empowering brands to understand and utilize the concept effectively in their page designs.
Individual Contribution
My role initially involved overseeing the integration of the agency's proposed solution. However, the agency's presentations lacked depth in explaining how the solution would apply to all brands and ensure long-term flexibility. To address this, I immersed myself in Page Designer, analyzing brand requests and demands. I sought to increase flexibility while keeping attribute lists manageable. Utilizing screenshots of the current Page Designer, I modified them to illustrate the new atomic concept, enabling effective communication with my team and stakeholders.
Collaborating closely with a colleague developer, I shared my thoughts and prototypes on the atomic design concept. Together, we assessed its technical validity and potential application within Page Designer, leading to the creation of a proof of concept. We meticulously curated a list of atoms, defining their attributes and how they could be assembled into molecules, organisms, and templates. This rebuilding process presented an opportunity to incorporate visual updates requested by brands, such as font families and button sizes. I collected these details, creating comprehensive design documentation for developers to integrate these changes. Additionally, we carefully crafted attribute lists for each atom to ensure consistency across the site while still allowing for creative freedom.
Recognizing that adopting the full atomic solution might overwhelm brands, I engaged directly with them to understand their design needs for the upcoming quarter. I translated their visions and shared designs into ready-to-use templates, enabling them to quickly adapt and build upon our work. As they gained confidence, they transitioned to creating their own components from scratch and editing existing ones.
Following the development of the solution, I led training workshops alongside my developer colleague, ensuring brands were equipped to utilize the new system effectively. Throughout the project, our work remained coordinated with team members and leadership, who provided oversight and guidance.
Achievements and Results
The results of our project were remarkable. By adopting the Atomic design concept and revamping our page design process, we significantly reduced the time it took for brands to create and customize their pages. Brand creativity flourished as they gained greater control over their designs, resulting in more unique and visually stunning pages. This not only enhanced the overall brand experience but also strengthened our partnerships with our brands. Furthermore, the new system paved the way for future innovation, demonstrating our commitment to delivering exceptional experiences for our brands.
Conclusion
Our journey exemplifies the power of collaboration and innovation in overcoming challenges and driving positive change. Throughout the project, we prioritized iterating on the solution and closely listening to stakeholder feedback. This iterative approach allowed us to refine our solution continuously, ensuring it met the evolving needs of our brands and remained aligned with our overarching objectives. Additionally, the importance of creating design prototypes and proof of concept early on in the project cannot be overstated. These prototypes provided tangible examples of our proposed solutions, facilitating better communication and understanding among all stakeholders. I am proud of the results we achieved together, and I look forward to continuing to deliver impactful solutions for our brands at Bestseller.
