Designing an e-commerce website — Botanycal

Aryan Singh

Web Designer
UX Designer
Web Developer
Adobe XD
WooCommerce
WordPress
“Botanycal” is an emerging online gardening store located in India, setting itself apart from other e-commerce retailers through its strong emphasis on a meticulously curated collection of hand-picked products.
In this undertaking, my responsibility encompassed conceiving and crafting an entirely novel e-commerce website for “Botanycal,” employing the WordPress platform in conjunction with WooCommerce.
The paramount objective was to imbue the website with the foundational principles that define the brand: namely, a fusion of tradition, fun, and innovative.
Timeline: 4 Weeks Materials: Cards, Sticky Notes, Pen, Paper, Tools: Adobe XD, WordPress, FlowMapp
UX Techniques Used: Competitive/Comparative Analysis, Card Sorting, User Personas, Site Map, Wireframing, Prototyping, Usability Testing

Botanycal's Vision

The specific goals for the e-commerce website were as follows:
Efficient Purchase: Provide users with an efficient means of purchasing one or more products.
Clear Product Organization: Create clear ways of locating specific products for a seamless shopping experience.
Professional and Sophisticated Appearance: Design a website that appears professional, reliable, affordable, and upscale, reflecting the brand values.
Customer Trust: Establish a strong customer-brand relationship to build trust among users.
Detailed Product Information: Ensure detailed product information is available to assist users in proper product selection.
Efficient Checkout Process: Create an efficient checkout process to save users time and enable easy product purchase.”

User Insights: The Heartbeat of Design

Personas: Crafting the User Canvas

Given the provided project brief and the already defined target audience (including roles, demographics, and psychographics), I created three distinct user personas. Each persona was developed to encapsulate specific needs and pain points, all of which required attention and resolution within the website design.
From the insights gleaned from these three user personas, I pinpointed the primary user needs that I aimed to cater to through the website’s design. This process was undertaken while also taking into careful consideration the client’s own requirements.

Market Analysis: Insights That Bloomed

To draw inspiration for my e-commerce website, I initiated the process by identifying two primary points of comparison. Specifically, I focused on boutique plant stores within the US market and analyzed three key direct competitors within the plant retail sector in India. The direct competitors subjected to analysis were Ugaoo, Amazon, and Nurserylive.
In addition to these, I studied two comparative platforms, Bloomscape and The Sill. The objective behind this exercise was to conduct a thorough comparison, pinpointing shared features among these websites, while also uncovering potential opportunities for innovation.

Information Architecture: Navigating the Green Maze

Progressing through my methodology, the subsequent phase involved crafting the website’s navigation system. In this particular project, I was equipped with an inventory encompassing 46 distinct plant types as a foundation. Given the substantial scope of this inventory, it became imperative to devise a clear and comprehensible organizational structure. The objective was to facilitate seamless navigation for site visitors in their pursuit of locating specific products.

Closed Cart Sorting: Category Chronicles

Guided by insights garnered from competitor and comparative research, I formulated 8 predefined categories accompanied by 11 distinct attributes. Subsequently, I orchestrated a closed cart sorting activity involving a diverse panel of 4 participants. Their task entailed organizing the items into the predetermined categories and attributes. This exercise served to validate the logical coherence of these categories from a user-centric perspective, providing crucial insights before advancing with the design phase.

Site Map: Mapping the Greenway

The creation of a comprehensive site map played a pivotal role in defining the overarching website structure. This meticulous process was aimed at guaranteeing the strategic placement of products in alignment with users’ expectations. The ultimate goal was to enhance the intuitive nature of the user experience during their exploration of the website.

Wireframes: Sketching Experiences

Upon synthesizing the insights gathered during the exploration phase, I embarked on the website design journey. The initial step involved sketching out several pivotal screens that constitute the essence of the site. Subsequently, I subjected these preliminary designs to a validation process, employing a test group of three participants. This meticulous testing was instrumental in determining the efficacy of these proposed solutions in meeting the intertwined demands of both users and the business.

Prototyping: Cultivating Digital Gardens

Homepage

For the homepage, I aimed to present a clean and uncluttered layout, steering clear of overwhelming users upon their initial interaction. I incorporated global and secondary navigation, along with a search button, to facilitate easy product discovery. Highlighting new arrivals and product categories played a pivotal role in showcasing the thoughtfully curated and frequently updated inventory, offering users insightful purchase suggestions. To underscore the significance of the customer-brand relationship, I included an ‘Our Story’ section that not only enhanced brand engagement but also linked to a dedicated ‘About’ page for more in-depth information. Additionally, integrating a blog section fostered deeper user connection, bolstering the customer-brand relationship. The footer was strategically designed to accommodate essential links for users seeking supplementary information, while also providing options for newsletter signups and social engagement.

Product Archive

Upon a user’s selection of the ‘Shop’ button or a specific category, they are seamlessly directed to a product list page, featuring an array of items under the chosen category. To enhance user experience, I implemented a filter and ‘sort by’ functionality, along with a breadcrumb trail for intuitive navigation within the website.

Single Product Page

The single product page was crafted with meticulous attention to detail, aiming to furnish users with comprehensive product information for informed decision-making. This page also housed valuable recommendations based on the user’s current selection.

Cart Summary Page

Upon clicking the cart button, users were guided to the cart summary page, serving as the initial checkpoint within the checkout process. This page allowed users to review and modify their cart contents as needed.

Checkout Page

Addressing a significant pain point of the user personas, I prioritized an efficient checkout process, striving to ensure a seamless experience. Leveraging Shopify’s checkout page design, renowned for its high-conversion interface, I curated an experience aligned with the users’ needs. This checkout design encompassed key elements for an optimal checkout experience, including a prominent call to action, a logically structured layout that grouped related functions, and clear signposts guiding users through their workflow.”

User Testing: The User's Garden Walk

Upon completing the wireframing phase, the next step entailed generating a prototype of the website, paving the way for usability testing. This crucial step enabled the assessment of user interactions with the proposed website solution and served as a means to validate its alignment with primary user needs. Employing mid-fidelity, greyscale wireframes for testing purposes aimed to elicit candid and insightful feedback from potential customers. This approach was integral in refining the website’s functionality prior to delving into its visual design aspects.
The usability test was carried out with a panel of four participants. Each participant was tasked with completing three distinct scenarios, enabling them to immerse themselves in the role of the identified user personas. These scenarios encompassed the following objectives:
Purchasing a Plant for a Friend’s New House: Participants were requested to locate a suitable plant for a friend’s new house and successfully complete the purchase process.
Locating a Specific Plant – “ZZ Plant”: The task here was for participants to find the specified plant, the “ZZ Plant,” and utilize the provided description to aid their decision-making process.
Inquiring About an Unfound Product: This scenario required participants to demonstrate how they would inquire about a product that couldn’t be located through the website’s search functionality.
Key Findings from the Tests:
Participants demonstrated ease in navigating the website and effectively locating desired products and information.
Feedback highlighted that the address form within the checkout flow was perceived as less aligned with the demographics of the user base.”

Final Design: Blossoming Elegance

The visual design phase focused on transforming the wireframes into a visually appealing and coherent interface. The color palette was carefully chosen to evoke a sense of nature and tranquility, aligning with the gardening theme. Typography choices were made to ensure readability and a harmonious look throughout the website. Visual elements, including product images and icons, were selected to enhance the overall aesthetic while maintaining a strong focus on usability.

Conclusion: A Harvest of Insights

The journey of creating an innovative e-commerce website for the online gardening store has been a rewarding endeavor that encompassed meticulous research, thoughtful design, and user-driven iteration. Through the stages of user research, market analysis, wireframing, prototyping, and user testing, the design process unfolded, resulting in a user experience that seamlessly blends aesthetics and functionality.
The design solutions crafted throughout this process directly align with the initial objectives and user needs. By delving into user personas and conducting extensive research, we identified pain points and preferences, which in turn informed our design decisions. The website’s intuitive navigation, personalized product recommendations, and streamlined checkout process directly address these user needs, enhancing their overall shopping experience.
The user-centric approach, combined with a visually engaging design, is poised to attract and retain customers. By providing an effortless and enjoyable shopping experience, the website can foster customer loyalty and bolster brand reputation. The strategic integration of features like ‘Our Story’ and the blog section can also deepen user engagement and trust.

Lessons from the Garden: Design Nuggets

This project underscored the critical importance of user-centered design and iterative prototyping. User personas acted as guiding stars, ensuring that design decisions were always rooted in addressing real user needs. The iterative nature of the process allowed us to refine and enhance the design based on user feedback, leading to a more polished final product.
The value of testing cannot be overstated. User testing provided invaluable insights into usability issues and pain points that might have otherwise gone unnoticed. It reaffirmed the notion that designing with the user in mind leads to a more effective and satisfying user experience.

Nurturing the Future: Growth Recommendations

As we look to the future, there are several recommendations to consider. Regular user testing and continuous feedback loops should be ingrained in the website’s maintenance strategy. This will help identify any emerging user needs and swiftly address any usability concerns.
Furthermore, exploring the integration of more interactive elements, such as plant care guides or virtual garden planning tools, can enrich the user experience and position the gardening store as a comprehensive resource in the field.
Finally, staying attuned to evolving design trends and technological advancements will be essential in ensuring the website’s longevity and continued relevance in the ever-changing e-commerce landscape.
In closing, this UX design journey has highlighted the power of empathy-driven design, collaboration, and a relentless commitment to creating experiences that delight users and drive business success.”
Partner With Aryan
View Services

More Projects by Aryan