Product Design : Distru

Distru is an enterprise resource planning & logistics software solution for the cannabis industry; providing CRM, inventory management, order fulfillment, and state specific track-and-trace platform compliancy. As one of three Product Designers on the team, I collaborated with the Product Manager and Engineering team on various feature projects.

Recent Projects

📌 🔍 👨🏻‍💻✨

Recent Projects 📌 🔍 👨🏻‍💻✨

Live Menu

Utilizing the clients’ inventory database, Distru can generate multiple live sales menus, with ability for customization for each menu. The feature had much room for improvement, and the backlog of customer requests and feedback was a good place to start.

• Review and prioritization of customer requests and feedback via Productboard with Product Manager.
• Visual and UX audit of the existing feature
• Scoping the project PRD with PM
• Designing wireframes, and iterating upon them with PM and Customer Success team
• Reviewing the PRD + designs with Engineer team to uncover any technical constraints and discuss implementation strategy
• Finalizing the PRD and designs, and handing off to engineers for development
• QA testing for each release, and weekly check-ins on project status with PM and engineers.
• Coordination with Customer Success, Sales and Marketing teams for each release, and demoing the feature for alignment on client communication and expectation

Live Menu: User Research and Analysis

Reviewed the backlog of customer feedback and requests with Lucas, Product Manager. Created a chart to prioritize various enhancements based on impact, need and complexity.

UX / UI Audit

Conducted an audit of the existing Live Menu feature, as part of the process to fully understand user workflows and pain points.

Ideation & Iterations

Despite having different priorities of enhancements, it was best to present the design solutions in its final form.

Design Reviews

Design solutions are iterated upon by reviewing with PM, Engineers and Customer Success teams, in order to ensure the design was solid for both business and user, and technically feasible.

Shipping the product

Working with Andrew the engineer, we were able to ship the new and improved Live Menu within a month. With the updates, clients were able to save time and effort creating a robust and efficient sales menu.

Client Onboarding

Onboarding is the first point of contact with the product for clients, and the current workflow requires Customer Success team to be hands on throughout the onboarding process. From account creation and setup, API configurations, to data entry and going live. Stakeholders need the process to be more streamlined, so the client can be more self sufficient, and increase Customer Success team’s bandwidth.

• Immersion of UX via sit-ins on client onboarding calls to gain insight into user needs
• Walkthrough / interview with Customer Success team to better understand business needs of the onboarding process
• Conduct a UI audit to uncover room for improvement in the onboarding process
• Creating flowcharts to map out various user flows as part of data synthesis
• Brainstorming with product team to ideate solutions
• Designing wireframes, and iterating upon them with PM and Customer Success team
• Reviewing the PRD + designs with Engineer team to uncover any technical constraints and discuss implementation strategy
• Finalizing the PRD and designs, and handing off to engineers for development

Walkthrough and Sit-Ins

Demo walkthroughs with Distru’s Customer Success team, and sitting in on client onboarding calls are a great way to gain insight into the current user experience.

Visual Audit

Immersing myself into the step by step of onboarding also allows me to spot pain points and areas of improvement for the UI / UX.

Data Analysis & Synthesis

Creating a mapping of the user flow, plus all the different data types being entered into Distru’s platform, I was able to break down information hierarchy and re-imagine what the end user need and can perform at each stage of the onboarding process.

Ideation and Iterations

Working with engineers and PM, I iterated on UI updates for the onboarding forms, and also designing an ‘onboarding dashboard’ that helps the user have a more self guided user experience.

Dynamic Bill of Materials

For manufacturers, assembling a product isn’t always a simple equation of combining ingredients and materials. There is a need for an assembly process that can be both efficient and dynamic, based on inventory levels and ingredient expiration dates.

• Discussion and walkthrough of the current Bill of Materials feature with Product Manager
• Visual and UX audit of the existing feature
• Scoping the project PRD with PM
• Designing wireframes, and iterating upon them with PM and Customer Success team
• Reviewing the PRD + designs with Engineer team to uncover any technical constraints and discuss implementation strategy
• Finalizing the PRD and designs, and handing off to engineers for development
• QA testing for each release, and weekly check-ins on project status with PM and engineers.
• Coordination with Customer Success, Sales and Marketing teams for each release, and demoing the feature for alignment on client communication and expectation

Scoping the project

Through white-boarding sessions with the PM and CTO, scope of the project was defined by the ‘Dynamic BOM’ functionality, and how it affects three existing Distru feature pages, and required a design update for each workflow.

Immersion and visual audit

Before ideation of possible solutions, immersing myself in the existing workflows provided guidelines on how re-use or adapt existing components for the new UI / UX, while also resolving pain points found along the way.

Ideation and Iteration

A few of the UI designs required feedback from end users and subject matter experts to inform the design decision, which we resolved by creating 2-3 design options for each UX puzzle, and discussed the pros and cons of each.

PRD and Handoff

Once the design had been iterated to a final form, I prepared the Product Requirement Document and Design Wireframes for handoff to engineering team.

Recurring and Cloning Tasks

For manufacturers and distributors, keeping to a schedule is vital to the business’ success. And within each employee’s scheduled are tasks that need to be completed in a timely manner. Ability for managers to assign tasks accurately and efficiently are also key to minimizing margin for error.

• Scoping and planning with PM
• Visual and UX audit of the existing feature
• Competitive analysis of other task & schedule management apps to further understand the design space
• Ideation of possible solutions and review with stakeholders
• Reviewing the PRD + designs with Engineer team to uncover any technical constraints and discuss implementation strategy
• Finalizing the PRD and designs, and handing off to engineers for development

Scoping and research

In discussions with the Product Manager Lucas, task cloning being a more straightforward workflow than recurring tasks, the functionalities were treated as separate updates. Conducted a visual audit to understand the UI that will be affected by the new updates.

Competitive Analysis

Looking to other platforms that have been successful with creating a task management application, I compared each one’s workflows to inform the UI design for Distru’s own.

Ideation and Iterations

Along the process of designing the new UI, opportunities to consolidate UI components across features were found. All features that interacted with the new functions were mapped out as a wireframe flowchart, for handoff to engineers.

Marketing Strategy & Branding

First impressions are everything, in the SaaS space, aesthetics can feel homogenized, and brand identity needs to stand out. A collaboration between Design and Marketing teams, projects include:

• Promotional materials for events
• In-app splash illustrations and icons
• Business site design layout and illustrations
• Social media and blog post illustrations

In-App Advertising

Illustrations created for landing to promote Cultivation Analytics, an upcoming product.

Marketing Site Layout and Illustrations

In conjunction with the release of the Label Printing feature, Alex and I designed the layout and illustrations for marketing page

Placeholder Images

End users who create ‘products’ within their inventory don’t always upload images of their products. Instead of one boring icon, we created placeholder images that matches the products’ categories.

'Under Construction' page

Illustration for the app’s error page when pages are down for development.

Blog and Social Media

Promo materials created for social media and Distru blog.

Design System

As Distru app releases features over time, inconsistencies between pages and components start to accumulate. So when Distru decided to expand their design team from one to three designers, it was the perfect timing for the application to develop a design system. The design team built up the system by meeting on a weekly cadence, and setting goals and action-ables, including:

• App-wide Visual Audit
• Analysis and synthesis of audit
• Shopping and adopting a Figma MUI library
• Collaboration with Engineering team to create shared components using Figma and Storybook
• Prioritizing UI updates for incremental changes based on library specs
• Communications across teams for each update release with recorded demos

Site Mapping & Visual Audit

While creating a site map, I also collected screenshots of UI components by scanning every page within the app.

Analysis document

Using the data gathered from the audit, I synthesized my findings and suggestions into a document to be shared and reviewed with the product team.

Adopting a MUI pattern library

A pattern library is just one aspect of the design system, but a necessary starting point. Since most components used in the app were already from MUI, instead of building the pattern library from scratch, we compared different Figma MUI kits and adapted the library to fit Distru’s existing components.

Workflows and Maintenance

Once we had a working pattern library, we met weekly to prioritize various UI updates, and established a workflow involving the engineering team, so component rules and logics are documented in Storybook.

UI Update Release

With each incremental update, we were able to consolidate the components and create a more consistent UI style throughout the app.

home