Puffy Delivery
Company: Mr.NiceGuy's headquarter is based in California. They own multiple cannabis dispensaries and Puffy Delivery, a cannabis delivery service.
Goal: In order to increase the rate of new users purchasing our products, our website will solve user's problem of simplifying the website flow by giving them a restructured architecture.
Role: UX/UI Designer
The goal was to increase the rate of new users purchasing our products via our website. We gathered all our data to come to a conclusion that our first-timers are mostly are confused on which product to buy that best suits to them, as well as filtering by brands. We collaborated with developers and stakeholders throughout this project. My key learning on this project was organization, such as goal setting.
My UX Design Approach
👞 EmpathizeWe (the design team) analyzed Google Analytics to retrieve data on returning customers, location, gender, platforms, new customers, etc. that could help us understand our customer-base. We also created a competitive analysis and noticed the flow and user experience of our competitors was much more smoother than ours. We had a meeting with the stakeholders to discuss our analysis and what we should move further on with. After meeting with stakeholders, we discussed timelines with developers and project managers.
We created "How Might We" questions to help how we could help the customers based on patterns.
We then brainstormed all the ideas together to see what possible solutions we could come up with. We started scribbling notes, drawing designs, creating post-it notes, etc.
We started designing wireframes and prototyping them out.
Image A (see image below): There were 3 different lo-fi wireframes being created with different designs. One of the wireframes had 4 different categories: energy, relaxtion, balance, and relief. Since our users had trouble figuring out which product best suits them, we created 4 categories that would "guide" the customers into knowing what is a suitable product for them. In the cannabis industry, people normally use terms such as "Indica, Sativa, Hybrid, or CBA", but for first-timers, they may not know what those terms mean. So, we used every day terms that people would understand, such as "Engery, Relaxation, Balance, and Relief".
Image A
We then started narrowing down on the navigation architecture to simplify and create a easier user experience.
Image C (see image below): The navigation header consists of Menu, FAQ, Delivery Info, Old site, Contact Us, Sign in button, Register button, and Cart button.- Logo does nothing (my thought: what if I want to go back to the homepage view again)
- Menu takes customer to all the products within the website
- FAQ takes customer to frequently asked questions page (my thought: what if customers didn't know what FAQ meant? We could change the text to "Help")
- Delivery Info takes customer to information and disclaimer page (my thought: this page could be under "Help", thus, organizing the navigation even more)
- Old site takes customer to product categories page (my thought: I thought it would take me to their old site, but it didn't)
- The "Register" and "View Cart" button are both call-to-actions (my thought: there should only be one CTA based on the goal)
Image C
Image D
Image E
-
🤔 Our users may not have an increase in users due to the following:
- website took too long to load because it was loading all photos from every category
-- Solution: Load the images as user scrolls - there was no way to know where customers are currently at or how to get back when navigating out of the homepage (aside from tapping back button on your browser and tapping the logo) since menu takes them to another page that's not the homepage
-- Solution: Use breadcrumbs so users don't get lost while on the page - the numbers on each brand suggests there are 10 products for that specific brand, but it did not represent that (see image E to the left), there were only 6 products, but image D (see image to the left) "indicates there were 10")
-- Solution: Have the exact in-stock number of the brand products - footer had "create account", which means the same thing as "Register" (as indicated on the navigation header), but that wasn't consistent with different text that does the same thing
-- Solution: Use the same term for both header and footer
🤩 Our redesign of the homepage:
- Navigation
- customers know they are on the homepage with actual link to redirect them back to homepage without tapping logo
- when customers hover over "Shop", they will get drop down of "Browsing by Brands" or "All Products"
- when customers hover over "Help", they will get drop down of "Frequently Asked Questions", "Order Tracking", and "Contact Us"
- Body
- display only 4 categories so the homepage doesn't take forever to load
- have the 4 categories of "Energy", "Relaxation", "Balance", and "Relief" that can easily let first-timers know what is the best product for them
- "Best Sellers", "Flower", "Vape", and "CBD" categories are based off (analytics) of most browsed categories, so we put the most viewed category on top
- Footer
- footer matches the same text as navigation header to keep consistency
Key Learnings
Organization was a major learning in this project, such as goal setting. As there were minor conflicts with developers, such as what would be doable in V1, but we negotiated to meet halfway (only if it did not create a horrible user experience).