UX Case Study: Sustainable product design of an eCommerce platform

The design process I applied for the ecommerce platform of Bazzzics, a natural plant-based sleeping aid

Background

Due to a NDA between myself and the client some details have been omitted.

The client Mondias Natural Products Inc. specializes in the commercialization and development of evidence-based botanical products for the healthcare and bio-agriculture markets. Mondias has developed its first natural health product line with proven efficacy for sleep and anxiety disorders. This sleeping aid product is non-addictive, with no known tolerance and no rebound effects.

Context: Before Bazzzics, not designed in a vacuum

This project has many parts and has been developed for a period of 5 months. The client approached us with data from clinical trials and scientific research. From the first meeting with the client I have been involved in each and every stage of this project leading to the brand identity materialization of Bazzzics, a plant-based sleeping aid.

This case study will focus on the process I followed to design the product experience of Bazzzics and the development of an ecommerce platform as a proof of concept.

Why a sustainable design?

Consumers are savvy, well informed and have very specific expectations towards companies operating in the general health industry. Bazzzics needs to address and fulfill the following:

• Noticeable shift in consumer’s trends and expectations towards more natural ingredients
• Chemicals and plastic are now perceived as nasties
• Consumers are now looking to invest in the long-term health of their body while being more conscious of their impact on the environment
• Creating value not only for today but also for tomorrow

Product design goals

• Design a new ecommerce platform to support the company objectives and mission
• Create a sustainable design targeting long-term continuity, self-sufficiency and limiting waste
• Create an experience that is relevant and fully connect with consumers through all parts of the consumer journey
• Make the task of purchasing sleeping aids easier and engaging

Discovery: Researching the problem space, finding opportunities to create value

At this stage it was essential to sit with the client and create extra value from the information they already had and provided us with. It was also very important to challenge them on their own assumptions and user statements. Furthermore I wanted to understand how they thought their users would engage and interact with their product and how they would integrate the overly important environmental and sustainable aspect into their product offering . We set up an immersion session followed by a stakeholder interview to get more insights on the following:

• The product
• The potential users
• The business
• The environmental aspect
• Understanding of the goals, scope and limitation
• The industry
• Competitive landscape

Discovery Kickoff: from assumptions to reality

Session: proto-personas

In order to build consensus we sat with the clients and built proto-personas. This exercise allowed everyone to have their say. It brought healthy discussions to settle on which was the most important. The process brought clarity and focus to the project and on the users.

Session: Solution hypotheses generation

We (my team and the clients) forced ourselves to write down a few hypotheses about users’ expectations, behavior and possible product concepts. This exercise not only allowed all parties to have a unified approach and language about the project but ignited curiosity about the end users. Which was a great way to convince the client to pursue user research and validate our hypothesis while giving more business relevance to the process.

User surveys

After defining the business priorities and with a shared vision on the potential users we created a survey and started collecting insights on user’s aspiration and preferences. This quick research allowed us to validate most of our hypotheses and assumptions and produced valuable insights on the following elements:

• Use of environmentally friendly materials
• Reusable packaging
• Prices tolerance threshold
• Commitment to sustainability
• Product categorization
• Needs and pain points

Coming up with a concept: diverging and converging on ideas

Based on the information we gathered so far we knew that the concept should integrate key aspects encapsulating the needs and requirements from both sides of the product (business + end users).

1. Limited carbon footprint
2. Transparency
3. No plastic
4. Trust & Recurrency
5. Engaging platform

We then set up for a Design Studio workshop. This allowed us once again to align everyone (clients and team) towards a shared vision and to combine all our brains to quickly generate ideas for possible solutions. It was also a great way to increase the stakeholders buy-in 💡.

Having different players in the room was a great way to explore ideas while bringing feasible, desirable and viable constraints to the exercise.

After presenting and critiquing the various ideas generated from this collaborative session we carefully started prioritizing those against user and business objectives to formalize possible concepts and solutions.

Once we all agreed on the outcomes we had a very good picture on how to connect the user insights, the business goals and some key aspects into potential solutions. And most importantly I could start laying down a framework helping me visualise the experience of the ecommerce platform.

Customer journey

I produced a future-state customer journey map to add more structure to the concept. This allowed us to gain a more holistic vision of the multiple touchpoints and steps contained in the customer experience. This map also integrates an opportunity section and a business’ goals section which allow to connect the user journey and the business requirements more effectively while initiating the thinking process for later marketing efforts.

Structure and user flow: mapping out the experience

With good insights and information on the high level customer experience I could now focus on a more task based interaction and start visualizing the user flow. The challenge here was to effectively integrate and translate the multiple requirements into a simple flow allowing both the user and the business to get what they need. Based on multiple scenarios I designed multiple flows while making sure not to overlook any possible actions. Doing so would also serve as the groundwork for establishing the transactional communication experience that would be defined at a later stage of the project.

This simple interaction flow effectively encapsulates the following:

• Product selection
• Get relevant information on the product category
• Understand the purchase model
• Select a first-time vs a refill

Information Architecture

With a good understanding of the user journeys, the business priorities and the user needs I designed the information architecture. Illustrating the structure of the website is essential to effectively understand the navigation and plan the content of each page. It’s also a valuable tool to check up if the navigation makes sense before getting started with the creation of the wireframes.

Validating the concept

After a few iterations on the user flow I started collecting feedback from the team and the client. This step was essential to adjust some elements and validate my design decisions early enough in the process and before creating the screens. Which was later on tested on a group of users.

The concept:

Wireframes

Wireframes are always an exciting part of a project because they give a visual shape to the project. They are also great for validating the decisions that have been made so far about the structure of both the website and the information.

Prototype

After a few iterations on the wireframes I built a prototype and tested it with my team, the clients and a few users. I gathered informative feedback that helped me validate my decisions but most importantly helped me improve the navigation by removing unnecessary steps that were causing friction in the customer journey and in the path to conversion.

In the flow of this prototype the user is asked to select the option of “first-time purchase” or “refill” before accessing the product detail page. After a few rounds of testing I realized that this extra step was creating confusion and decided to remove it and integrate it directly in the product detail page.

Testing & Validation

Testing was done at every milestone of the project. Prototypes and test results were shared with the clients in order to get early feedback and align the design to meet the various business requirements and the users’ needs.

Visual elevation & UI

With a leaner and more effective user experience we were now ready to elevate the visual experience of the platform. At this stage I worked with a visual designer to refine the visual elements of the platform and made sure that the user needs, the business priorities and constraints were respected and effectively translated.

Once the interface designs were finished I produced a file documenting all the elements related to this project to keep future updates as consistent as possible. This file was an important contextual tool for the development team to use while allowing some components and elements to be re-usable when necessary.

Production: design & development sprints

After another round of testing followed by a few iterations it was time to create the real solution. We sat down with the development team and mapped the development timeline for the website.

Conclusion

The website was finished and launched internally as a proof of concept in February 2020 and was very well received by the stakeholders and the group of 20+ users we tested it on. The project was green-lighted by the CEO shortly after and will be publicly launched by the end of 2020. Collaboration was key in this project and multiple roadblocks have been eliminated by involving the client at every stage of the development. It wasn’t easy as priorities and ambition will differ between the stakeholders and the design team and this is why a shared vision needs to be established as early as possible in the development of any project.

Let me know what you think and please visit my other projects www.tomseguin.com

A note from the Plain English team

Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!