commercetools - Frontend Templates

Project

B2C Frontend Templates

Role

Product Designer in crossfunctional team at commercetools: discovery, market research, product specifications, design system, wireframes.

Background

MACH architecture offers many benefits for Ecommerce businesses, including decoupling of the presentation layer (the frontend) and the data layer (the backend). This allows for greater flexibility and scalability, as well as faster time-to-market. The development time of an Ecommerce Frontend will vary depending on several factors, such as the complexity of the design and features, the size of the development team, and the amount of pre-existing code and Templates.

To address the need of fast time-to-market, we created Frontend Templates to accelerate customer development time and leverage Ecommerce best practices to enhance conversion rates and lower cart abandonment. The release achieved three notable outcomes: it shortened the development time for sales demos, accelerated the development process for our customers, and resulted in a 50% surge in sales of the commercetools Frontend product.

Blogpost: commercetools Frontend

Crossfunctional Collaboration

The team consisted of 6 Frontend Developers, a Product Manager, and myself as a Product Designer. Working in agile iterations with open communication, we adopted a continuous learning mentality where our collaborative approach allowed us to maintain agility and respond to changes in the development process effectively.

A Dive into Discovery

To gain deeper understanding of the current problem and our target users, me and the Product Manager delved into discovery. The resulting insights were crucial in shaping our process and ensuring that our solution effectively met customer needs.

Stakeholder Interviews

To gain comprehensive understanding of the needs of our targeted customers, we conducted research through interviews with Digital Agencies, Internal teams, and other stakeholders. We sought to gather insights from agencies that have implemented similar solutions for customers, as well as sales and marketing teams with regular contact with our customers. Additionally, we leveraged the expertise of external stakeholders in Ecommerce technology to gain a deeper understanding of the problem. To effectively organize and analyze the data collected, I created an affinity diagram in Miro. This method allowed us to categorize and group information, identify patterns, and draw connections between different pieces of data.

Market Exploration

In order to identify potential growth opportunities in the Ecommerce market, I conducted research on country-specific statistics and MACH implementations within various segments. This research helped gain a better understanding of the current market trends and identify segments that are showing strong growth. Based on this research, we embarked on a solution discovery process for different shop categories, including product decisions, product briefs, and solution briefs. Our goal was to identify a specific industry where we could optimize the frontend based on industry-specific data modeling. After considering various options, we ultimately decided to focus on the Lifestyle / Furniture industry for several reasons:

‣ The industry is a large market segment that is showing continuing growth in the upcoming years

‣ Product data models are not overly large or complex

‣ Retailers are eager to implement headless commerce architecture in the next two years

‣ We were able to find a large number of stock images

eCommerce User Experience

I carried out a comprehensive study on best practices in Ecommerce User Experience based on research and benchmarking from Baymard Institute and Nielsen Norman Group. Both these organizations are widely recognized for their expertise and provide valuable insights into the latest trends, techniques, and guidelines for creating effective and user-friendly Ecommerce experiences.

I delved into their research and case studies to gain a deeper understanding of the crucial elements of Ecommerce UX, such as designing intuitive navigation, creating compelling product pages, optimizing the checkout process, and many others. I also reviewed their guidelines on designing for mobile and responsive Ecommerce, which is increasingly important in today's multi-device world. The insights and knowledge I gained from the research were then translated into page specific requirements.

Defining the Scope

I worked with the Product Manager to define the problem statement. This involved defining the scope, customer specific goals and needs, and setting comprehensive product requirements. By establishing a solid understanding of the problem, we were able to move forward with a shared vision and ensure that the end solution effectively addressed the identified challenges.

Product Specifications

Collaborating closely with the Product Manager, we created Product Specifications for the Templates. My role involved infusing these specifications with UX/UI requirements, grounded in Ecommerce research. This strategic approach allowed me to integrate industry best practices and design techniques, offering the product a distinct competitive edge while catering to our customers' needs and expectations.

Every requirement underwent thorough examination and was carefully aligned with the broader objectives of the product. This comprehensive documentation served as a clear roadmap, safeguarding that the ultimate result remained faithful to the initial expectations and requirements. It also facilitated the definition of a shared goal, guiding the entire team towards a unified objective.

Problem

Ecommerce Frontend Development entails varying timelines due to design, feature complexity, team size, and existing codebase. In a time-sensitive landscape, achieving a fast time-to-market is essential.

01. Design and Feature Complexity

The intricacy of design and the complexity of features significantly impact the timelines of Ecommerce Frontend Development. The more intricate the design and the more complex the features, the longer the development time.

02. Team Size

The size of the development team, whether it's an in-house team or external collaborators, plays a pivotal role in determining the speed of Ecommerce Frontend Development. Smaller teams might experience delays due to limited resources.

03. Existing Code Base

The presence of an existing code base, including reusable components and templates, can either streamline or hinder the development process. A well-established code base can accelerate development, while an outdated or incompatible one may result in delays and additional work.

Transforming Requirements into Designs

I adopted an agile approach in creating wireframes, continuously refining the Templates based on feedback to guarantee their alignment. Once designs had been reviewed by both product and development teams they were handed off to be implemented.

Creating a Design System

I established a design system that served as the foundation for the products visual language and user interface. The design system included a style guide which specified fonts, colors, and styles, as well as key components such as buttons, dropdown menus, input fields, and control tools. These components were standardized to ensure a consistent and cohesive look and feel.

The design system was created with a focus on efficiency and flexibility. I built it on an 8-point grid for creating consistent and balanced designs. The grid provided a structure for the design components and helped to ensure that the visual elements of the project were harmonious and aesthetically pleasing. I optimized the design system for responsive design, ensuring that the user interface would look great on desktop, tablet, and mobile devices. By implementing a responsive design, I aimed to provide users with a seamless and enjoyable experience, no matter what device they use.

Designing Wireframes and Prototypes

I used Figma to create designs for the page Templates, based on the specified functional requirements. I followed Ecommerce User Experience best practices to ensure that the designs were intuitive, user-friendly, and aesthetically pleasing.

The Product Manager and the development team were closely involved in the design process and reviewing my designs. This collaboration allowed us to catch and address any issues or concerns in an early stage, which helped to minimize rework and ensure that the final product met all requirements. The Product Manager and developers provided valuable feedback and suggestions, and I incorporated their feedback into the designs as necessary. Close collaboration ensured that the designs were not only functional, but also aligned with the product goals and requirements. This helped to prevent the need for costly changes later in the development process.

A Real Brand Experience

I designed a compelling and emotional in-store experience for demoing the frontend's integration with the backend. This included relevant imagery, copywriting, creating a distinctive logo, establishing a color scheme, and defining a brand name to showcase the capabilities of the frontend.

From Blueprint to Browser

After completing the design process, the next step was to ensure that the design was accurately translated into development. To do this, the Engineering Manager created corresponding tickets in Jira. This process involved breaking down the design into specific tasks or features that could be assigned to individual developers. Jira helped streamline the design-to-development process, ensuring that the design was accurately translated into code and that the end-result met the original requirements and expectations.

Quality Assurance and Design Review

We conducted thorough reviewing and evaluation of the implemented results. The testing process involved verifying the Templates' compatibility with different devices, browsers, and screen sizes, as well as ensuring that they met accessibility standards and were free of security vulnerabilities. Any necessary modifications were documented and communicated via Jira tickets, allowing for efficient and effective collaboration and follow-up by the development team.

Template Release

After completing quality assurance, we released the B2C Frontend Template, which included several out-of-the-box CoFe components and integrations. To enhance accessibility, we set up a Storybook to showcase the frontend components and an open-source GitHub repository for general access.

Link: Storybook

Dev tools

Impact Post-Launch

We successfully deployed the Templates to internal teams and external customers, offering user-centered Ecommerce Frontend Templates that enhances user engagement, elevates conversion rates, and minimizes cart abandonment. The Templates are flexible and allow for quick implementation of a functional frontend, where customers have the ability to tailor the code to their specific needs. Built on the robust commercetools backend, the Templates deliver a smooth and fast time-to-market.

In the initial month following the launch, we received positive feedback from both internal teams and customers. Leveraging the templates significantly reduced the time needed for sales-demo development, enabling our sales teams to efficiently establish demo environments that align with company objectives, while also accelerating our customers' development processes and driving a 50% increase in commercetools Frontend product sales.

Monitoring Progress and Iterative Enhancements

Our strategic roadmap for the Templates involves an ongoing process of continuous enhancement and refinement. This journey is guided by key performance indicators, including usage data and insights from internal and external feedback. This iterative approach guarantees the consistent evolution of the Templates, aligning them with the dynamic market demands.

Key takeaways from the project

In addition to receiving positive feedback from users and stakeholders some key takeaways are:

- Invest in collaboration.

Initially, the collaboration between design and development was hindered by several challenges, including time-consuming reviews and frequent design inconsistencies. To address these issues, I worked closely with the team to establish a comprehensive design system and organized an internal workshop to foster a shared vision for success. As a result, we identified key actions such as creating a dedicated design thread in Slack and prioritizing earlier design reviews, which helped to improve our collaboration and streamline the design process.