Developing a new design system and voice and tone guide focused on lean development and usability
"The new site launch was great for business. Conversions doubled and Average Basket Size increased." - Julia Rhodes, Bud.com Head of Product & Board Member
About the project
Bud.com is a cannabis industry technology platform that connects users with dispensary partners in their area. By hosting the dispensary's menu on their site Bud expands the dispensary's geographic reach to attract new customers, facilitates sales via their eCommerce platform, and forwards the sale information to the dispensary's in-house delivery team for order fulfillment.
Over the course of the 2020 California lockdown orders Bud.com saw their online traffic increase over 500%. Users also switched their device preference during the pandemic, opting for desktop over mobile. An early stage startup looking to secure Series A funding in the near future, Bud saw this as the perfect time to address usability concerns that had been lingering since they reduced force in mid-2019.
UX Challenges
The current iteration of Bud.com was built with a custom design system and coded-from-scratch components that lacked comprehensive rules for variable content situations:
The product was slow to load
Bespoke components were becoming too heavy a technical lift
Additionally, Bud had recently taken steps to establish their brand vision:
A bold, clever, and non-conformist identity unlike the calming wellness-brand aesthetics of their competitors
The implementation lacked subtlety and was often jarring, hard to look at, and failed to invoke consumer trust
Also influencing consumer trust were the Black Lives Matter protests that began in June 2020. Bud's users were contacting customer support frequently:
What was our position on BLM and police brutality?
What steps were were taking to decolonize the cannabis industry and support Black professionals in our field?
Our only option for communicating our values was via our well-hidden blog, which was mostly filled with keyword soaked posts for SEO optimization
It was clear that our users didn't know what we stood for
UX Solutions
Bud.com was in need of a new design system that would:
Unify product experience
Inspire our users to trust our product
Give engineering and design the flexibility to grow and add features
Help Bud to communicate brand identity and social values without being overpowering
I believed that the familiar and themeable nature of Google's Material Design was a perfect match for our business needs. Easy to implement, with established and recognizable components and patterns, it would lift engineering's workload, improve loading speeds, and provide the golden "don't make me think" effect for our users.
To communicate our identity and values, I focused on typography, voice and tone, and user-flow integrated initiatives while allowing our fun (but near-flammable) red-orange brand color to take a back seat.
Tools: Figma, inVision, Paper, pen, marker
My Role: Design Lead, User Research & Data Synthesis, Visual Design
Project management & strategy
As I mapped out the research and design process for this project, I was able to leverage a lot of the legacy research I had done for the product pages and checkout flow back when I was a staff Product Designer with Bud back in 2019. Industry research was still fresh and relevant, and I brought with me a deep understanding of cannabis users from my time at both Bud and Greenbits. This helped me strategize how much time I would spend front-loading on research before diving into the design.
Returning to Bud in a senior role, it was important for me to share my planned approach with leadership and team members. I illustrated the stages of my process in a Gantt chart to better communicate and set expectations among stakeholders.
It was also clear that auditing the current product would unearth tactical improvements that could be quickly turned around for immediate release. The show must go on, as they say, so I identified, designed, and validated quick fixes that would improve our users' experience while I continued the longer process of developing the next generation of our design system.
Research methods
Quantitative & Qualitative Research
Our talented team of analysts were able to provide thorough quantitative data from an analytics perspective, which I validated against qualitative user experience data from our customer experience team and my own user interviews.
Heuristic Evaluation
I conducted a complete audit of the legacy website according to heuristic principles and UX best practices, and organized my findings into a spreadsheet complete with severity rankings for identified usability issues.
Competitive & Comparative Analysis
I also conducted audits of our competitors products to determine what they were doing well (aka, where we needed to step up our game) and what they were leaving to be desired (a desire we could fulfill instead). I also looked at companies with similar business models that didn't work in the cannabis industry, such as GrubHub, Caviar, and DoorDash.
Defining company vision
I could collect a lifetime's worth of research and data on cannabis users and still end up designing a product with no soul. That's where a company's vision and the passion of its founders comes into play: I knew that taking a truly user focused approach to this redesign was going to affect the product's look and feel profoundly, and some of the elements that weren't working for users were well liked by leadership. But why did they like these elements so much?
I lead a number of collaborative whiteboarding exercises to get at the heart of what they want Bud to stand for. With this information I made sure to replace any non-working elements with new, better ones that still had the Bud spirit in spades.
Synthesizing our research
Storyboarding
The rapid fire pace of Bud's development demanded that I strictly prioritized the MVP. There were a lot of new features and capabilities on the product roadmap that leadership was excited to see progress on, but it was important to prioritize the key functionality that our users currently relied on as it was also were we stood to see the most immediate revenue growth.
Simple storyboards illustrating that key functionality kept the design process focused, and also served as assets in our pitch deck for prospective investors.
Information Architecture
The dev team was busy working on a new URL structure that would improve SEO. Site mapping the information architecture helped our engineers while also clarifying how many scenarios the new design system would need to have the capability to support.
User Flows
Once we had defined the site structure, I developed user flows to workshop the user's path through our product. Many flow variations were discussed with leadership before we settled on an ideal key path that fit the majority of our users.
Design & testing
Wireframing
Using a Material Design baseline kit, I wireframed all MVP screens and used Figma's internal prototyping tool to assemble them into a clickable prototype. By leaving color out of the equation, we were able to focus on the user's journey through the product and asses which components were and were not effective.
I worked iteratively in this phase, frequently testing with users and against special case scenarios that might require extra lines of text or the display of additional data fields. Finally, the components worked responsively and in support of multiple user paths - not just the simplest, happiest one.
Copywriting
I also used this low-fidelity period to refine voice and tone. If my copy could communicate our brand identity and inspire user joy without the use of any brand colors, we were well on our way to setting ourselves apart as a preferred platform for cannabis delivery.
I chose a witty conversational tone to represent our brand identity. Checkout section headers were posed as questions rather than directives: "pick a delivery time" became "when do you want it?", "choose a payment method" became "how will you pay us?" etc. I also employed playful turns of phrase such as "cold, hard cash" with accompanying emojis instead of plainer terminology.
High-Fidelity Prototyping
Because I built the wireframes with grayscale Material Design components, we were almost at the finish line already. The final step was themeing the components with our brand colors and fonts, beefing up or toning down corner radii, finessing spacing, and filling the prototype in with our image assets.
The interactive prototype was tested a final time and handed to engineering for development and release.
Check out the live redesign on Bud.com
Next steps
Bud's product roadmap aspirations included developing dispensary listing pages for users looking for in-store shopping experiences. Mock ups of the future of our product, like the one below, tested the flexibility of the new design system and illustrated to potential investors the exciting expansion plans that Bud.com would be working on next.
Challenges
Unfortunately, the capability to communicate our social values was left out of the MVP. We ran into a couple difficulties:
Including a high-visibility interactive hero image above our product carousels affected our Google keyword rankings
Our brand partners had concerns about the hero pushing their sponsored content below the fold
Revisiting this challenge is a solid priority on Bud.com's product roadmap, but I was able to make some tangible steps towards progress in this area nonetheless:
Leadership committed to acting in solidarity with the Black Lives Matter movement and the movement towards racial equity in cannabis
I facilitated roundtable discussions with Bud's Black and PoC employees to collaboratively craft a statement of solidarity and a list of meaningful requirements for our action plan
I designed a 4th of July holiday campaign that would match user donations during the checkout process and donate the funds raised to the Equal Justice Initiative
31% of our users elected to donate during the checkout process - higher engagement than expected and a successful proof of concept
Read the case study about my previous work with Bud.com on Usability Geek's Medium blog