Responsive Web Redesign
Summary
Wayv is a cannabis distribution and e-commerce platform. It was set up to be the “Amazon” of the cannabis industry: A paperless way for cannabis producers to sell their product to distributors with full legal compliance and next-day shipping.
My Role at Wayv
UX/UI Designer
My role at Wayv was to redesign the platform, make it responsive, and design other features and materials for use on the platform. I was the sole UX/UI Designer in the Los Angeles office. It was my job to oversee all aspects of design at the company and manage our contracted designer who worked overseas.
My work at Wayv included:
Web and mobile redesign of the shopping experience
METRC compliance quarantine
Checkout payment configuration
Seller product pick-up scheduling
Line of credit tools and dashboard
Order builder notifications
Custom retailer pricing configuration
and much more…
Web and Mobile Shopping Experience
Background:
When I arrived at Wayv, the company was just getting started. I was the only designer in the LA office and was brought in as a UX Designer but asked to take complete responsibility for design across the company. This work included UX design for new features, marketing material design, email campaigns, apparel design, and more…
Initially, the focus at Wayv was on email campaigns, but fast-forward a few months, and the issues regarding the marketplace were beginning to show. Wayv’s initial decision was to go through a rebranding with a company based out of NYC. I provided the branding company with a selection of my design work, which they enhanced with new branding.
During the rebranding stages, I took the time to interview several retailers and brand representatives. I also spoke to our sales team and recorded the data they were collecting from the retailers. This work allowed me to find patterns and themes that would determine the redesign.
The Redesign
Here’s a look at the platform’s transformation. Scroll further down to learn about the process I took to arrive at this point.
Original Web - Wayv
Web Redesign - Wayv
Mobile Responsive View
Understanding the Problem
The distributors buying from Wayv were facing many challenges with our platform. I performed some research by interviewing retailers, brands, and our sales team, as well as doing a comparative analysis of similar types of platforms. The research revealed a plethora of issues:
Users were unable to find items easily due to categories hidden in the hamburger menu on desktop
Retailers had a misunderstanding of the search feature functionality
Location indicator was confusing and irrelevant to the retailers
They were seeing repetitive content that was often irrelevant to them
Mobile version was an inconsistent experience and extremely difficult to use
Retailers wanted to explore by brand or category type more easily
Brands wanted more visibility and the ability to tell their story
I took all of this information and began plotting out a design that would work well for Wayv and its users.
Architeture & Sketching…
The main architecture was to stay in the same format with a few exceptions. I did a comparative analysis of businesses functioning similar to Wayv. This research gave me the idea to take the approach of making this a modular design. I sketched sections that would be easy to reposition once we had user feedback and site-use metrics.
Stakeholder Discussions & Wireframing
I sat with the CEO to go over his business goals and vision for the new look and feel of the site. He was interested in the visual design of a particular company’s site, so I considered that. I also had regular discussions with the product owner and product specialist to ensure that my work on this design would be successful for the company. During my design process, I continued to communicate with the sales team since they visited our retailers daily.
Here you can see the basic wireframe with which I started. Although I typically design with a mobile-first mindset, our users were primarily using the desktop version. Time was tight, so the mobile design was created during the UI design process.
Final UI Design
After creating the UI design, I tested it with 5-6 retailers. I made a few iterations based on their feedback. Other user fed validated the redesign.
Location was added as an icon on the right as retailers found it less important - 94% of our users only had one shop. They did not need this to be visible at all times.
The section “Trending Products” was added in place of “Budtender Recommendations.” Users felt they would prefer to follow BDS metrics to understand what was popular and making sales.
Users found the search area more easily and now understood (due to the placeholder text) that they could search for products here. Upon implementation, metrics showed that our users were engaging with the search function more frequently.
Retailers commented that they preferred the categories in plain view on the desktop version rather than hidden behind the hamburger menu.
Retailers commented that this design was easy to use and scroll through.
Retailers were able to find products and brands more quickly.
Brands were happy that they were given more visibility in the new design.
The final UI design was created and developed in Flutter to be mobile responsive.
Web Redesign - Wayv
Mobile Responsive View
Next Steps
Through usability testing, a few more issues were brought to the team’s attention:
Adding items to the cart was very time consuming and difficult
Product pages were disjointed and causing confusion
Below are the final design solutions for these issues.
Product Card
The Product Card was redesigned to allow for easy ordering from the home page. As a team, and determined that we needed to simplify the process by creating a card for each product, unit size, and case size. Each would now have a dedicated card to allow the user to add-to-cart with a single click.
The card functionality uses a “+” icon to add to the cart. The user can adjust or delete the quantity they’ve added directly from the product card. They can also toggle between Medical and Adult licenses. Additionally, two icons were added to aid in the visibility of price and strength. This design allows the user to see the most important product details at a glance to make their shopping experience quick and easy.
Product Details Page
The Product Details Page went through an overhaul. This redesign is a story of its own as I did a lot of work to make these changes happen, but here you can see the transformation. Users found this design to be much simpler to read and understand. They also appreciated the visual elements indicating the strength and strain of the product, the available promotional pricing, and the discount they would receive. Users also liked the “Related Items” section on the right side, which allowed them to add similar products with a single click.
The complete redesign story will be added to this portfolio soon. Stay tuned!
Original Product Page - Wayv
Learning Points
This project was a great learning experience. It gave me the chance to touch all areas of design. I was also able to engage with our users to create a better experience. Before this project, I hadn’t worked with a larger team so closely. During this project, I was able to gain a wealth of information from our sales team. I learned that they were some of our biggest user advocates. Their help and knowledge were invaluable and made this redesign a success. I am very appreciative of everything they were able to contribute throughout the process.