Context
modalitea is a premium loose-leaf tea and teaware business with an emphasis on quality curation and education for a variety of different teas from around the world. modalitea offers an accessible experience, regardless of your background or knowledge of tea.
The Problem
In e-commerce the average cart abandonment rate across all industries is roughly 69%. On mobile this abandonment rate can be higher, up to 80.79%. Most research shows that the most common reasons for cart abandonment include high shipping costs, the need to create a user account, concerns about payment security, and long and confusing checkout processes.
Strategies for these issues include reducing the steps in checkout flow to 7-9 form elements (average is 14.99), offering free or reduced/flat rate shipping, offering quick/no registration checkout, checkout with PayPal and other trusted credit processors. Abandoned cart emails can help recoup up to 11% of abandoned cart sales, and are most effective when offering a discount on the cart that was abandoned. Highlighting your return policy can reduce the sense of risk.
Data shows 50% of modalitea users view an average of seven item pages before leaving without adding items to their cart. PM’s hypothesis is that users are unable to determine which tea is “the best''.
70% of users browsing the site do not follow through to complete a purchase. Data shows that users abandon the cart at the registration page. As it is now, users must make an account to complete a transaction. The PM indicated they want a guest checkout to solve for this, and that the guest checkout must capture email.
The Solution
On pages featuring multiple products, I added indicators as to which teas are recommended or most popular with customers. Product sorting would include an option to sort by popularity.
Changed checkout from account based to an in-line guest-first checkout, with an option to login or use alternative login methods. Moved guest registration to the end of the checkout process to decrease friction placed on users.
My Role
My role was conducting relevant research, user interviews, prototyping, development, rebranding and design, as well as testing throughout the entirety of this project.
Per the problem criteria, I conducted secondary research on what causes cart abandonment, and best practices and pain points for shopping carts.
Barilliance: Cart Abandonment Guide & Case Studies
https://www.barilliance.com/shopping-cart-abandonment-guide
https://www.barilliance.com/cart-abandonment-rate-statistics
Barilliance compiles a lot of data with regards to cart abandonment. Some of their findings include data showing that mobile carts have the highest rate of abandonment.
“The smaller the size of the screen, the more likely a customer is to not purchase. This is problematic considering that for the first time ever, more digital buyers will use smartphones than desktops to shop.”
Reasons include:
Unexpected shipping cost
Having to create a new user account
Was conducting research to buy later
Concerns about payment security
Long and confusing checkout
Couldn’t find a coupon code
Baymard Institute: 48 Cart Abandonment Rate Statistics 2022
https://baymard.com/lists/cart-abandonment-rate
Baymard conducted research that segmented out the “just browsing” category of shoppers to distill actionable reasons for cart abandonment. This research shows 48% of cart abandonment is a result of shipping, taxes and fees. 24% of abandonment was user account creation requirement, 22% was delivery times were too slow.
Their fifth most common reason for abandonment was a checkout process that was “too long or complicated”, and found that the ideal checkout flow contains 7-8 form elements (including fields), but that the US average checkout flow contains 14.88 elements. For most checkouts it’s possible to make a 20-60% reduction.
Baymard has found a 35.26% increase in conversion rate with checkout design improvements alone.
Statista: Leading reasons among internet users for purchasing a product when shopping online worldwide in 2020
https://www.statista.com/statistics/1231069/leading-reasons-for-buying-products-when-shopping-online
Online survey results of 125,195 participants provided on Statista shows how users were incentivized to make purchases:
Statista also provides statistics on abandonment rate by industry:
https://www.statista.com/statistics/457078/category-cart-abandonment-rate-worldwide
By device:
And many others:
Comparative Analysis of Competition
Data sourced from Semrush and similarweb.
Yunnan Sourcing
Organic Traffic: 1,324/mo.
Total Visits: 41.5k/mo.
Average Visit Duration: 3 minutes, 47 seconds
Pages Per Visit: 5.54
Keywords by Intent: Informational 45.3%; Transactional 26.8%
Audience is 61.95% male and 38.05% female. The largest age group of visitors are 25 - 34 year olds.
Checkout process from cart:
Agree to terms & conditions.
Express checkout options (One-click).
Name and address form (standard fields).
Shipping form (standard options).
Tip and payment form (can fill or one-click).
Pay now button.
No registration required.
Free shipping over $100. $5 flat rate shipping up to $100
Largest source of social media traffic: Reddit (88.35%)
Rishi Tea
Organic Traffic: 72,075/mo.
Total Visits: 80.4k/mo.
Average Visit Duration: 3 minutes, 43 seconds.
Pages Per Visit: 4.34
Keywords by Intent: Informational 52.5%; Transactional 28.6%
Audience is 47.77% male and 52.23% female. The largest age group of visitors are 25 - 34 year olds.
Checkout process from cart:
Choose login/create or guest checkout.
From guest checkout:
Name and address form; delivery and payment methods.
Additional button for choosing delivery method.
Continue to payment.
Payment form and submit order.
Create account:
Name and address form; login data (email, password).
Submitting takes the user to shipping information, same as guest checkout.
No registration required.
Free shipping over $39. Fedex rates otherwise.
Largest source of social media traffic: Youtube (24.58%).
Mei Leaf Tea
Organic Traffic: 10,304/mo.
Total Visits: 158.2k/mo.
Average Visit Duration: 6 minutes, 33 seconds.
Pages Per Visit: 11.35
Keywords by Intent: Informational 58.4; Transactional 25.5%
Audience is 58.09% male and 41.91% female. The largest age group of visitors are 25 - 34 year olds.
Checkout process from cart:
Login or express checkout options.
From express:
Add billing address; shipping method; payment info; review in one form.
Option for PayPal (not one-click).
Login leads to the same page as express.
Registration required but integrated into guest checkout.
Free shipping available as part of a rewards program with the explanation that if vendors are offering free shipping it’s artificially inflating the prices of their tea.
Largest source of social media traffic: Youtube (78.55%).
User Flows
For user flows I wanted to consider what may be the least painful route to checkout. What was necessary for checkout, what wasn’t? Based on the secondary research, how might this look from a guest-forward checkout process, and where might the user get held back.
Sketching and Interactive Wireframes
The low fidelity wireframes helped further determine layout, establish scaling, what functionality would work and what needed correction.
UI & Style
The intended visual style blends modern UI conventions with retro design elements, drawing inspiration from modalitea’s fusion of traditional and contemporary tea culture. For instance, Lora, a clean modern serif font with 'roots in calligraphy,' was selected. The color palette offers a softer, contemporary interpretation of the vibrant shades popular in the 1960s.
The icons and animations throughout the site were hand-drawn in a linocut style, reflecting the graphic aesthetics of the pop art movement from that same decade.
Prototype
Building the wireframes helped to correct scaling issues, and further provide navigational context. From the sketches the largest changes were from a page based cart to an accordion style drop down to act as breadcrumbs and further navigational visual aid, as well as adaptations for the login and registration pages.
Home Page
A limited layout following similar industry conventions.
Button navigation available for minimal site navigation, but hamburger drawer available on upper right granting access to knowledge database and other features.
Carousel leading to articles/features on tea information, brewing techniques and cultivation.
Recommended seasonal teas featured to help reduce decision fatigue of new customers.
Size of product and pricing featured up front.
Menu Drawer
The menu drawer is straight forward, but not necessary to navigate the product portions of the site.
From here a user can access their account should they have one, or browse the Knowledge Base to find more information on tea.
Product Category Pages
From the product category page you can sort by filter preferences, filter the shown results, navigate to specific product subtypes, or scroll through the product.
Product quantity and pricing are reflected so that the customer isn’t surprised after committing to view the product.
Product Pages
The expanded page shows the tea texture as well as product packaging in the carousel.
The tea information is presented up-front, including brewing directions and price.
Checkout Page
From the checkout you can proceed through Guest Checkout rather than having to register up-front.
Here you can delete or edit the cart contents, edit quantities, and see a base subtotal.
Shipping is reflected here so that there are no surprises.
From here there are options to utilize a one-click checkout should you have a PayPal or Shop account available.
Order Confirmation
On the order confirmation screen you receive your order number, and have an option to print your receipt.
Following guest checkout, this page will offer to allow you to create an account, and optionally subscribe to an email list.
Below an order details page can show the customer their order should they wish to review it again.
Link to Figma prototype: https://bit.ly/42IFwzF
Validation
I conducted two rounds of usability testing, the second round accounting for issues users experienced during the first round. Both rounds of testing included five users, with the criteria that the users were some degree of tea enthusiast.
First Round of Testing
The first round of testing was conducted via a Marvel sketch prototype mobile version of the ecommerce platform. all users understood the basic navigation of the application. All users were able to navigate through the scenarios as presented.
A couple of users overlooked the hamburger menu as a navigation option. One user indicated they didn’t like the inclusion of information “about the farm” as it felt like it was “pandering” and that this is controversial in this space, that the information isn’t bad to have but felt maybe it shouldn’t be a priority/emphasis in the tea information page.
From the shopping cart all users were able to successfully navigate to the end of the transaction. A couple of users indicated they were used to a more traditional cart summary screen, that while the screen still had a way to modify the cart it didn’t look quite like they expected. One of these users felt it was more “like final checkout rather than a preview”, editing quantity or deleting items not obvious, but that they’re there and “may be a product of just a prototype”.
Guest checkout was prioritized over account creation-based checkout, and one user was confused about the account creation option prompt at the end of the checkout process.
Iteration Design Test
The second round of testing was conducted via a Figma high fidelity prototype. All users were easily able to navigate through the scenarios as presented, though two users had some difficulty with the bottom navigation as the loose leaf tea category and the teaware buttons were reversed from standard practices (tea before teaware).
One user felt the pagination on the product category page was confusing, but stressed after the fact they felt it was within e-commerce standards, and that after navigating to the next page it’d be clear which method of pagination was being applied in this case.
A couple of the users expressed they really enjoyed the hamburger navigation, particularly the animations, but one user felt that the menu felt “busy” and could be more minimally organized.
One user expressed they would’ve wanted a mouseover for the navigation icons to clarify what the navigation elements were, though also expressed that once they navigated through them once their purpose was clear and that there may not be enough space to label the icons.
One user struggled in checkout trying to “continue” to the next step, but was clicking on the next step on the accordion rather than the “next” button. This was corrected by binding the according to the next step in checkout as well and rearranging some of this organization. Overall users had a much easier time navigating through checkout and the process felt clear, minimal, and users expressed it felt efficient and like there were “no surprises”, and appreciated they didn’t have to create an account.
Feedback
Users expressed that the application was at minimum meeting industry standards and that they appreciated a minimal checkout process. They felt that navigation was intuitive for an e-commerce site. A couple of users expressed excitement for the prototype, that they enjoyed the overall appearance and layout, and felt that the checkout process was intuitive and simple. Users expressed that they really enjoyed the overall design and approach.
Most users expressed that they were glad they didn’t feel forced to create an account (or that they prefer not to in general). Multiple users expressed that their main reasons for not checking out are usually that they either are just browsing and comparing their options, or that most often there are surprise shipping costs.
In the cart users expressed they felt the amount of information about the products and order was appropriate, “You know what you’re getting, how many ounces and respective price, and have a sense you know exactly what you’ll be paying before you checkout”. They expressed they appreciated multiple options for checkout, particularly the inclusion of common third-party quick checkout options.
Reflection
In future iterations I would further emphasize the free shipping threshold and make it more apparent through all parts of navigation what they’d be getting for the price. I would further try to strip down the checkout process to the bare essentials, minimizing the amount of time a user would have to spend in checkout.
Navigation could be improved upon by adding further labeling and ensuring that elements were obvious from the start. The hamburger menu could be brought more in line with usual standards with some further tweaking. I would try to better anticipate ways in which users could misinterpret elements of the site (accordion menu), and better ensure all possible routes to completing checkout would be viable.