Lilxbun
Lilxbun is a small, accessory-focused brand thriving in the cannabis space. The owner, Kayleigh, creates adorable products for a young generation of stoners. I was sought out to evaluate her e-commerce website in order to increase conversions through effective user experiences and accessibility.
INTRODUCTION
Responsible for creating and distributing a user survey to Lilxbun’s existing customer base, performing a heuristic and accessibility evaluation of the site, and delivering a thorough report to the owner.
MY ROLE
• Figma
• Google Forms
• Shopify Marketing
• Adobe Illustrator
• Canva
TOOLS
The problem
Lilxbun wants to increase conversion rates on her Shopify website. We believe that strategic updates to the site’s design and structure will encourage users to stay on the site longer and be able to find products more easily, resulting in a higher conversion rate for this small business.
Research: The core of good UX
While it’s quite common to base decisions off the idea that “this just FEELS right”, research helps bring in logic as to WHY something feels right, and this project was no different. So, before diving into offering suggestions, I performed several research methods to start painting a bigger picture in order to best inform my client about design decisions she can implement moving forward.
Methodologies
Nielsen’s heuristics are helpful rules of thumb we can use to evaluate areas of the site that might not be functioning well or optimally serving customers.
The 10 Usability Heuristics
Using Lilxbun’s growing audience, a survey was created using Google Forms and emailed out using Shopify’s marketing tools, in order to better understand her audience, their wants/needs, purchasing habits, and more.
User Survey
Using tools like WebAIM.com, we checked out all the colors used on the website to see if the chosen palette passed WGAC compliance.
Accessibility Standards
Getting to know the customers
User Survey
It kinda goes without saying that anyone who shops at Lilxbun is definitely a part of the cannabis community in some way or another! The survey intended to extract information not only about their website experience but also about the customers and their cannabis consumption habits. By seeing what customers DO, we can see why certain products are more successful than others and gauge (to an extent) what their disposable income looks like. We also asked customers how they discovered/engage with Lilxbun, their payment preferences, and why they maybe didn’t go through with a purchase.
Expand the accordion below to see the results from 29 completed responses!
-
Age Range: 18-50 years old, majority being 18-25 years old (27.6%).
Gender Identity: A whooping 86.2% identify as female, with less than 7% identifying as male and/or “other”.
Location: The majority of participants are located in the US, with two identifying as international customers (Canada and The Netherlands).
-
Consumption: 100% were either daily or weekly cannabis consumers! 93.1% of users consume flower/bud, and 65.5% consume edibles and wax/vape products.
Marketing: 96.6% found Lilxbun through social media, with Instagram and Tiktok being the most frequently used platforms to follow Lilxbun.
Shopping behavior: 93.1% use their mobile device to shop online and 78.9% prefer to us PayPal for express checkout.
-
Influence: Customers said that everyday functionality (86.2%), one-of-a-kind products (79.3%), and discounts (72.4%) influence their decision to shop with Lilxbun.
Constraints: Some of the bigger obstacles preventing a purchase included budget, high shipping/tax fees, getting distracted, and unavailable stock.
It’s more what you'd call "guidelines" than actual rules
Heuristic Evaluation
We found about 9 issues across the site that violated the 10 usability heuristics, but it’s important to note that none of them were catastrophic. All 9 issues were clearly identified with reference to the specific heuristic it violated and paired with a proposed solution that would fix the issue in the report.
Let’s be honest, if we know that our target audience consumes cannabis daily, we need the site to be as easy to navigate (almost mindless) as possible!
Apart from the low-contrast color palette (we’ll review that later), there were inconsistencies with button design, typographic hierarchy, and a couple graphics throughout the site. While these seem like small issues from a functionality standpoint, they can confuse the user and of course create an unprofessional look and feel for the brand.
Visual consistency was lacking.
FINDING 1
FINDING 2
Too many links take the user away from the shop.
And often times, it was without notice! While it’s beneficial to the brand to have product availability in other marketplaces, these third party sites offer significantly smaller profit margins (Redbubble, Faire, Etsy, etc). So by diverting customers away from the shop, unexpectedly, we are losing customers to marketplaces with more product availability from other sellers and smaller profits for Lilxbun.
FINDING 3
Product overload within limited real estate.
While it’s natural to want to show a customer everything offered, showing too much can create choice paralysis and prevent the intended action. On the homepage alone, Lilxbun had a total of 30 products. And if customers are using their phone to shop, that is a LOT of scrolling! To make matters worse, there is very little white space between these elements, so we can only guess that some visual fatigue occurred.
Very cute, but not functional
Accessibility Evaluation
We love pastels and so does Lilxbun! The brand’s colors are fun and girly, but unfortunately on screens, quite inaccessible to those with visual impairments. Across the site, every color that was used on the site did not pass WGAC AA standards. Surprisingly, Lilxbun’s color palette came from a web kit sold by another entrepreneur who designs specifically for web. Upon closer examination, nearly all of these web kits feature very pastel (low-contrast and inaccessible) color palettes for websites.
In a world where accessibility and accommodations for those with impairments is not only socially encouraged but becoming legally required, it’s important to be ahead of the curve and not leave anyone out for the sake of having a “cute” looking website.
Let’s see some examples!
The problem, revisited.
Now we have a clearer idea of the problem. The customers clearly have the extra money (see consumption habits), and didn’t really report any issues with the website functionality or making a purchase. We did discover that getting distracted was a problem and that customers value products that offer everyday functionality. Knowing this, our solution will be to remove distractions (Ex. links that leads away from the shop), limit product highlights to ones that fit user lifestyles, and reduce friction where possible.
What are some solutions?
PRIORITY #1
🎨 Update palette to accessible colors.
Although it was not mentioned as a point of friction from participants in the survey, the website’s color palette did not pass any WGAC standards. Here’s a new palette that can fix that!
Primary Button: #796DA5 | Ratio - 4.62:1
Secondary Button: #796DA5 | Ratio - 4.62:1
Text site wide: #1A123A | Ratio - 17.62:1
CURRENT
PROPOSED DESIGN
By simplifying the color palette down to 2-3 colors, rather than 8 colors, we can present a more professional look and feel that is ALSO functional for anyone who may have visual impairments.
PRIORITY #2
💻 Maximize real estate and attention spans.
The survey showed that customers value products with higher functionality (such as lighter cases) and were more likely to be purchased and searched for in the shop. By featuring these products higher on the homepage, we can expect a higher click-through rate.
As mentioned earlier, one of the findings in our heuristic eval showed that the homepage had an overwhelming number of products featured. This is often users first introduction to the brand, and if they face immediate choice paralysis, we can expect a high bounce rate.
The solution here is to restructure the homepage so that users can learn more about who and what Lilxbun is and navigate to the products they are looking for, without getting overwhelmed. As the saying goes, less is more!
CURRENT HOMEPAGE
PROPOSED REDESIGN
Using Figma, I created a mockup of Lilxbun’s homepage based on the design of Shopify’s free theme “Taste”. The logo is no longer taking up such a large portion of the header space, the text is legible with the updated color palette, and the product categories are organized based on performance analytics and customer feedback.
PRIORITY #3
As mentioned earlier, the heuristic evaluation revealed that there were several links on the site that led customers away from Lilxbun’s Shopify platform. These third-party marketplaces don’t offer comparable profit margins, and often will show users OTHER retailers on their platform. Since it was mentioned a few times that “getting distracted” was something that prevented a sale, the logical step is to downgrade links OUT of the shop, especially when the user does not expect to be diverted away.
This can be done by creating a single page that highlights/lists out all the locations (both digital and physical) that carries additional merch. This single page gives users the freedom to decide if they want to exit the shop for another platform by clicking a clear link.
By creating this structure, we can also clean up the menu items and clearer information architecture.
⤴ Be selective with outside links.
PROPOSED DESIGN
PRIORITY #4
Research has shown that showing context in product photography can quickly help a potential customer visualize how they will use the product (so they don’t have to read through a wall of text to get info on how to use it!). Even if the product doesn’t offer high functionality (like stickers), showing a product in context can help reduce the mental load for a customer in trying to solve how to utilize the product in their own space, in addition to giving the customer visual cues on specs, like size.
This can also be an easy way to cross promote additional products; work smarter, not harder!
📸 Give them context to show value.
CURRENT
ADDITIONAL IMAGERY
Next steps for this small business 🙌
Next steps for this small business 🙌
Implement, observe, and adjust. While the higher priority recommendations are listed here in this case study, the delivered report included a hefty number of additional recommendations! With everything wrapped up in a neat little bow, it’s up to the owner decide which action items can/should be implemented, given the data and information provided.
As with any UX-focused project, the next indicated step is to observe and record any positive (or negative) results that occur as a result of implementing the above suggestions. Regardless of positive or negative, UX is an iterative process that requires experimentation and adjustments.
If and when these changes are made, this case study will be updated if any noticeable changes to Lilxbun’s conversion rates (as a direct result of UX/UI decisions) occurs!
Key points and reflections
THAT’S ALL FOLKS!
It was a fun challenge to take on this evaluation for a real client. My prior experience with Shopify allowed me to understand some of the limitations of that platform (like how you need to pay a developer to make the majority of custom changes). However, the limitations often reveal new pathways and workarounds to get achievable results.
Kayleigh’s business goals are trickier to come by in this economy, but thoughtful and data-based design decisions can encourage new and existing customers to complete checkout without distraction and mental overload. Regardless if Kayleigh implements the recommendations, she now has access to a solid sample of data from actual customers that can help inform decisions down the road.
This was a great exercise from both parties to explore how UX and business goals, especially in today’s commerce-driven society, are becoming fully intertwined!