All Work

Leafly


Image

Role: Senior Product Designer


Services: Product Design – creating a new-and-improved version of their existing embedded menu offering, made small amendments to their Finder experience on Leafly.com, and added components to their design system. 


Leafly is the world’s most trusted destination to discover cannabis products and order them from legal, licensed retailers. More than 125 million people visit Leafly each year to learn more about cannabis and order online with local businesses.

The company works with businesses to help boost awareness and searchability, as well as create online ordering platforms for them on Leafly.com and provides an embeddable menu for dispensaries websites.

Leafly also works directly with consumers in order to help them find dispensaries, learn about cannabis in all forms, and sells dispensary’s products through their site.

I had the privilege to work on revamping their website menu option they provide to dispensaries. Businesses use Leafly’s menu manager service to input their products and pricing. As a result, it appears in the embedded menu on the dispensary’s website.

I worked solely on the frontend part of that experience – the embeddable menu. It was an interesting B2B2C experience. Not only did we need to cater to the requests of dispensaries’ wants and needs for an embeddable menu, but we also had to ensure that it was a top-notch eCommerce experience for their customers.

Role: Senior Product Designer


Services: Strategy, UX, UI, Illustrative Branding, Graphic Design

Shujinko is a company that created a disruptive product called AuditX, which helps companies get through audits in a more streamlined, easy way.

AuditX is a wholistic auditing software. It not only includes the idea of teamwork, task management, and different access roles on a company level, but it also has a partner portal where companies can invite their auditors to review and approve the evidence the companies provided. This means that you only need a single tool to get a company to successfully start and complete an audit.

Originally, AuditX was built to get startups through SOC2 audits. They added in more audit types, but the current architecture was limiting in many different ways. Over time, current users (startups) requested more audit types and wanted to work with different frameworks.

Shujinko was also pivoting to open up the software for enterprises. Not only did enterprises need access to more frameworks and audit types, but they also needed a more robust software to handle their needs as well as framework customization support.

With the current user needs + our business pivot, we needed to upgrade our backend architechture to be more robust as well as launch an overall product design shift. We called this new shift “Architecture 3”.

Not only was the entire product reimagined in functionality, but UI elements (icons, color palette, etc.) were updated to reflect a more modern interface. One of the biggest ways to demonstrate this dramatic change is to showcase the new architecture 3 navigation in comparison to the old version (AKA: “architeture 2”).

When I joined, I took on the task to help solve the problem of creating a product solution that could scale.

Role: Senior Product Designer


Services: Strategy, UX, UI, Illustrative Branding, Graphic Design

Accomplishments: Redesigned their app

Shujinko is a company that created a product called AuditX, which helps companies get through audits in a more streamlined, easy way.

AuditX is a wholistic auditing software. It not only includes the idea of teamwork, task management, and different access roles on a company level, but it also has a partner portal where companies can invite their auditors to review and approve the evidence the companies provided. This means that you only need a single tool to get a company to successfully start and pass an audit.

Originally, AuditX was built to get startups through SOC2 audits. Over time, current users (startups) requested more audit types and wanted to work with different frameworks.

At this time, Shujinko was also pivoting to open up the software for enterprises. Not only did enterprises need access to more frameworks and audit types, but they also needed a more robust software to handle their needs.

With the current user requests + their business pivot, they needed an overall product design shift. Internally, this new shift was called “Architecture 3”.

This is when Shujinko hired me. I took on the task to help solve the problem of creating a product solution that could scale. Not only was the entire product reimagined in functionality, but UI elements (icons, color palette, etc.) were updated to reflect a more modern interface.


The Menu


Image
Image

More and more dispensaries were starting to use other platforms to sell their products through their sites. Leafly needed to make some changes in order to get more dispensaries to adopt their embeddable menu offering.

My PM, and members of the sales team, and I met and interviewed several dispensaries – some who were using the current embeddable menu and others who were not using it to understand their pain points.

From the last time the embedded menu was updated, new insights had emerged on customer behavior on leafly.com’s menus. Amendments had been made on leafly.com, but not in the embedded menu experience.

I also conducted a competitive analysis and performed my own research through The Baymard Institute, Nielson Norman Group, and articles from the UX collective.

Due to technical limitations and time constraints, this is what the dev team and I delivered with the new embedded menu:

Created a less Leafly branded look and allowed for customization in the menu. Dispensaries had a problem with the overall styling of the menu – they didn’t like that it was basically the Leafly site menu pasted into their site and they couldn’t customize any colors in the UI. They wanted their brand reflected in their site’s menu.

Created a getting started document for dispensaries. The embedding process was difficult for some to implement. The PM, the dev team, and I created a document that helped guide them through setting up their embedded menu successfully, as well as design best practices in regards to custom color choices.

Made the menu more user friendly by leveraging leafly.com’s current menu designs as well as my own research.

Below is how I broke up the user experience for the dev team's sprints.


Image
Image
Image
Image

Functionality & Flows


Image
Image
Image

Below, you can see clips of various flows I designed for the embedded menu.






Components


Some select deliverables I made for the dev team.


ImageImage

These product cards are a deviation from Leafly's cards. This direction was made based off of my research through The Baymard Institute. When I presented these designs to the greater design team, it was agreed on to use the new product cards in the embedded menu to test their performance in comparison to the cards that are currently being used on Leafly's site.


Image
Image

The "category coins" were taken from Leafly.com's existing shopping experience. I ended up working with the creative team for them to update the imagery and create a new image for the "deals" coin since that didn't exist in Leafly's website menu. The store hours component was a deviation from Leafly's website menu. It didn't make it into the first launch of the menu due to timing constraints. I made the colors section for devs to reference exactly what in the menu should be customizable and what the default colors were. A more simple version of this made it into the getting started document for dispensaries to reference.

Want to Work Together?

Fantastic! Hit the button below to get started.