Mobile Marketplace App

Clone PLG

Role

UX Designer

Timeline

8 weeks

Tools

Miro, Figma

Mobile First Design

The company recognized the need for a comprehensive redesign to ensure consistency, scalability, and improved user experience. To achieve this, the team decided to develop a brand-new design system, using Fluent UI as a base. Fluent UI was selected due to its focus on accessibility, modular components, and responsiveness, which aligned well with GreenSprout’s goal of creating a user-friendly and visually appealing platform.

Challenge

The key challenges focused on supporting the various needs of the project:

Business Needs: The business needed to ensure seamless communication between vendors and buyers including transactions and shipments.
User Needs: The app’s interface was inconsistent in terms of button styles, typography, and layout, creating a disjointed and confusing experience.

Goals

Ease of Access: Allow customers to browse available products, place orders, and schedule deliveries.
Streamlined Sales Process: Create a simple and efficient platform for purchasing clones, which would help both small-scale home growers and larger cannabis businesses.
Regulatory Compliance: Ensure the platform met all state and local regulatory requirements concerning cannabis sales, ensuring proper documentation and product tracking.

Process

Market Analysis

I reviewed several other marketplace apps to understand the competitive landscape.

I analyzed the user flows, design patterns, and features that seemed to work well, such as simple product catalog layouts, secure payment options, and regulatory compliance features.

Features & Functionality

Based on business needs, the team outlined key features for the app, including an easy-to-navigate interface, secure payments, regulatory compliance, order management, and delivery options.

Wireframes

Using the insights from the user flows and IA, I began wireframing key screens for both mobile and desktop versions of the app. Some of the main screens I designed include:

Home Screen: Featuring easy navigation and a search bar for quick access to different strains, educational resources, and customer support.
Product Catalog: Displaying cannabis clones with clear images, strain information, and availability.
Product Detail Page: Offering comprehensive product details, such as genetics, growth tips, and related educational content for each strain.
Checkout Page: Ensuring a secure, simple process for both retail and wholesale customers with integrated payment and delivery options.

There were a few considersations while improving user flows for both the Buyer and Vendor Experience

Streamline the checkout process and automate the Order process
Simplify Browsing
Promote Vendors Stores

Design System

The original Marketplace was made to fufill a need, not to be visually stunning by any means.

The client wanted to base the new design off AirBnB's visual design, so we went with that direction to establish a Visual Design Identity.

The goal was to audit, improve, and expand the design system to ensure scalability, visual consistency, and developer efficiency while reflecting the brand's identity and California’s cannabis culture.

As the lead UX/UI designer, my role included analyzing the existing visual design, identifying gaps, creating scalable components, and collaborating with cross-functional teams to implement the updated system.

Challenges

Inconsistent UI Components: Developers and designers frequently created ad-hoc components, leading to inconsistencies in visuals and interactions.
Limited Scalability: The existing design system lacked flexibility to accommodate new features, making iteration slow and error-prone.
Brand Identity Gaps: The design system did not adequately reflect the company’s brand ethos or its connection to California’s cannabis market.
Developer Inefficiency: Poor documentation and unorganized components created confusion, increasing development time.
User Experience Issues: Users reported a fragmented experience when interacting with different parts of the platform.

Goals

Create a scalable and cohesive design system that serves as the single source of truth for the platform.
Ensure consistency in visual design, interactions, and accessibility standards across the marketplace.
Reflect the brand’s identity and the cannabis culture of California in the updated design language.
Simplify the handoff process between designers and developers by providing robust documentation and reusable components.
Improve user experience by ensuring a unified look and feel across the platform.

Process

Design Audit

Reviewed existing UI components, layouts, and design patterns across the marketplace.

Identified redundant components, inconsistent styles (e.g., button sizes, font usage), and outdated elements..

Visual Design Tokens

We made Tokens for the main elements of the system

Color
Spacing
Typography
etc...

Component Library

Standardized reusable components, including buttons, cards, modals, dropdowns, and forms.
Designed components to be responsive, ensuring seamless usage across desktop, tablet, and mobile devices.
Added micro-interactions (e.g., hover effects, loading animations) to enhance usability.

Design Guidelines & Documentation

Created comprehensive documentation, including usage guidelines for colors, typography, and components.
Developed Figma libraries for designers and Storybook integration for developers to ensure smooth handoffs.

Key Deliverables

Improved Visual Cohesion

A unified design language that improved aesthetics and reduced cognitive load by using similar assets that followed a specific brand.

Reusable Components

I focused on a modular system that allowed the developers to implement new features faster without reinventing the wheel.

Enhanced Accessibility

Fully compliant with accessibility standards, making the platform usable for a broader audience.

This inlcuded:

readable/adjustable font
color contrasting options
screen readers
and more

Stunning Visuals!

We wanted clean, sleek UI that was easy on the eyes while still being inviting to users!

Challenges & Learnings

Challenge

Balancing flexibility and consistency in the design system

Solution

Allowed limited customization within components while maintaining core styles

Lesson Learned

Start with accessibility in mind from the beginning, rather than retrofitting it later.

Lesson Learned

Stakeholder education is key to adoption

Buyer Experiene

We based the market experience off Amazon's marketplace, giving users a sense of familiarity and intuitive navigation. This marketplace:

Streamlined purchases from multiple vendors
Showed other options from saved vendors, and promoted sale items.
Offered Product detail pages with reviews on the product and the vendor.
etc....

Vendor Experiene

The Vendors recieved a comprehensive Dashboard (web app) that gave them an overview of everything they needed including:

New & Pending Orders
Order History & Analytics
Inventory Management
Buyer Messaging
etc...