Designing a Fuss-Free Commerce Site and Experience
💡 How it Started
During COVID, I started an online business, Peaceful Tabletop, to sell homemade Japanese artisanal botanical products online.
These are kokedamas! The bestsellers 📈
A month into running the business from Instagram, I felt like I was spending too much time answering similar questions raised to me by my customers regarding plant-care instructions through direct messaging. This was overwhelming for me as it took significant amounts of time and effort to address these concerns individually, and it led to lengthy response times and a very tired social media manager (me!).
Awful looking Google form that I used initially because it was quick to set up
Additionally, as I was collecting orders through a Google form at that time, I wanted a proper e-commerce channel to legitimize the business. I also wanted customers to feel calm and assured when purchasing products, in line with the business's branding of peaceful and slow living. This was something the Google form failed to achieve.
In this project, I was UX and UI researcher and designer, as well as the project manager during the development phase. My team consists of my friends whom I gathered, namely Timothy Ngoi who developed the site, and Owen Chiang, who was in charge of designing the graphics.
🔬 Research
Before I embarked on my journey, I was aware that an e-commerce channel can improve the customer experience through introducing a multitude of features that go beyond just introducing plant-care tips.
To determine the features to be prioritized, I first had to identify and address the existing problems with my current user flow.
Between conducting interviews or surveys, I picked interviews as I wanted qualitative feedback about the current customer flow, and my established friendly relations with them allows me to collect their sentiments comfortably. Moreover, I do not have enough customers at that point for survey data to be of value.
As such, I began interviewing my customers and various fans of the shop, and simply asked them to describe the events that preceded filling out an order form. After conducting 10 interviews, it was made known to me that everyone's usage differed slightly.
Interestingly, the data collected uncovered that a customer’s experience with keeping plants proved to be a key determinant of their user flow, and the two main flows can be mapped with the following illustration:
🔎 Insights Drawn
Since kokedamas (Japanese moss balls) are uncommon in Singapore and grows in an odd shape, many customers have doubts about how to care for it, especially when it comes to watering and lighting requirements. I received a lot of Instagram direct messages about care instructions, and crafting a message to reach out is a chore on the user's end (read: pain point). This barrier extends the time taken for them to complete a purchase and leads to attrition should the response time be slow.
Users had to return to the Instagram post to cross-check the product name to confirm they were checking out the correct product, since product pictures on Google forms were too small (This is not adjustable by the form builder). This increases anxiety as it increases the likelihood for customers to make payment for a wrong order.
Users mostly viewed the order form on mobile after getting directed from the Instagram page.
🚀 Features to Build
From the insights gathered, I made the decision that an e-commerce website was the best channel to address the 3 identified issues. The features to be implemented are:
-
Product pages have to be equipped with detailed care instructions (most importantly, watering schedule and lighting requirements) as well as size and dimensions of the product.
-
Product pages has to have a clear picture of the product that helps users quickly determine if they are checking out the correct product
-
Website has to be mobile-first.
📱 Prototype
With the proposed features and user-flow, I created hi-fi prototypes so that I could carry out user testing and get proper feedback on the shopping experience.
Hi-Fi Prototypes created on Figma
Product Page
As compared to the Google form, the new shop and product page offers clearer pictures of the products and allows users to easily compare between products
Care Instructions
To streamline the user flow and reduce time and effort answering customer's questions via Instagram direct message, care instructions have been included in the individual product pages
An accordion FAQ page has also been added into the hamburger menu for easy referral
For me, the FAQ page was a life changer as I could immediately see the reduction in messages recieved, freeing up my time to focus on other aspects of the business.
Add-to-Cart & Check Out Flow
The new cart and check out pages aim to minimize mistakes by employing clean and simple UI, displaying only essential information required per page
↩️ Release
I remember being so excited as the website launch date got nearer, and it was a surreal experience to go through the UX process for a website from start to finish.
↩️ Iterations
With the prototype, I shared the Figma link with the same 10 users that I interviewed earlier. From my tests, new problems arose and I made the following iterations:
"Shop" Catalog Page
Initially, I wanted the visuals of my plants to stand out. These are botanical art pieces after all, and it was important for the business that the product pictures were front and center. Products were first displayed as a single column to highlight their aesthetic qualities.
In this layout, users feedbacked that the "shop" page was too long, and they had to scroll too far to view all of the products.
This was not ideal as the goal of the users at the "shop" page is to view all of the shop's products at a glance to shortlist their favorite ones, not be dazzled by the aesthetics of the product.
Since they entered the website after seeing my Instagram posts, they should already have positive feelings about how the product looks, if not they wouldn't even have entered the website in the first place!
Realizing this, I redesigned the product page.
Initial "shop" page
Redesigned "shop" page
In the new product page, I added another column so that users can view all my products at a glance, and eliminated the frustrations felt with the long scrolling page.
Product Description
From past exchanges with customers, I found out that offering free delivery and ceramic plates was the biggest draws that attracted customers to purchase from the shop. As such, I placed this 2 pieces of information high in the hierarchy of information, and used a green font to ensure it stood out.
However, it was made known to me that users mistook the 2 green lines as clickable links, and were confused when they realized they were unable to visit the links.
Since the green that I used for the 2 lines were the same shade of green as the "Checkout" button, it caused confusion and needed revision.
The revision was made with a change of colour and icons to ensure that it was eye-catching yet does not mistake itself for a clickable link.
💭 Final Thoughts
Doubling as the project manager, I also got to experience first-hand managing timelines and coordinating with my developer and graphic designer.
The work for the website has been paused temporarily because the business is taking a hiatus, but in the future, we hope to improve on the landing page and sales funnel, as well as integrate a payment gateway.
Some happy customers!
