#Cannabis #Information-Architect #Branding #Service #Mood Board

Visualize Cannabis Business Concept to An Impactful Brand

Leaves of Change

Project Overview
We created a brand identity “Leaves of Change” for our client’s luxury cannabis business. We designed a web application, a product that will both provide business service and emphasize her vision of addressing social issues
The client approached us with merely a concept, a mobile cannabis service with premium products which people can book for events and weddings
It pained her to see that minorities have a higher chance of being arrested for cannabis matters. To fulfill her desire to address this social issue, we incorporate the element of social justice and pro-cannabis education. 
Target users: weddings and events planners
Fig 1. A visual representation of the brand.
Challenge & Solution
• Create a product based on a mere concept:
We decided to design a web application instead of a mobile app to increase exposure. Because this is an early change, a web application would be more accessible and flexible to house potential business growth and changes.
• Unidentified MVP:
We defined the MVP to be the following: 1) premium cannabis product and service, 2) cannabis workshop for educational purposes, and 3) cannabis-related social discrimination community. They met both business and branding needs
• Liability concern: We implemented a state-specific feature on the Q&A page. Because the result of user research showed that the users were unsure about the cannabis regulations. 
Project Plan
Project Plan
Week 1
• Research & Synthesis
Update design system: Audition & Categorization of page components
Look for reference & best practice for bio page
• Ideation & Iteration
Update design system: Created new headshot component
Design reviews
- Wireframe Tweaks
- Add Interaction
• Execution & Future Steps
Hand-off process
- Dev feedback and annotation
Project Scope
• My Role:
- Led and owned information architecture.
-  Conducted and owned usability testing.
-  Built and owned low and high-fidelity interactive prototypes.
- Designed low, mid, and high-fidelity wireframe designs, and partnered with another designer.
-  Contributed to user interviews, affinity mapping, and persona development.
• Team: 4 UX designers across 3 time zones in a remote setting
• Duration: 2.5 weeks
• Tools: Sketch, Figma, Miro, Zoom
• Design Practices: User Interview, C&C Analysis, Feature Analysis, Affinity Mapping, Persona Development, Problem Statement, User-Flow, Journey Map, Mood-Board, Sketching, Wireframes, Prototyping, Usability Testing & Iteration.
Research & Synthesis
We needed to understand our users better specifically in the cannabis related-topics. The participants were event planners. A persona was made based on the research to represent our target users.
User Research & Interview
To gain insights into users’ opinions, behaviors, and frustrations related to cannabis products and services from an event planner’s perspective. 
User interview via Zoom. The participants must be 21 yr or older, interested in cannabis, and potential event planners.
7/8 of our interviewees consumed cannabis and enjoyed it in a social setting. Many of the participants had limited knowledge of cannabis products. Their biggest concern was the liability issue. Since the laws are varied locally and constantly changing.
"I prefer to have cannabis over alcohol at an event."
"I am concerned by liability issues having cannabis at an event."
"My knowledge of cannabis is limited."
"I would enjoy cannabis at the right social setting."
User quotes from the interview.
User Persona
"Cannabis should be at more events. Why isn't it?"
- Erin, Event Planner
• Enjoys and is open to cannabis consumption in various ways.• Actively interact with the events community.
Needs & Goals
• Provides luxury-oriented cannabis experience for her attendees.
• Liability issue.
• Finding the right audience- lack of experience in the cannabis industry.
More Artifacts
Affinity Map
User Flow
Customer Journey Map
Ideation & Iteration
As the lead information architect, I implemented familiarity and content hierarchy to ensure a clear flow.
I owned the Service page design and map interaction design. I conducted usability testing with the interactive prototypes I created in Figma.
We created a mood board in a design session. Marble was our theme element. Teal and gold were our brand colors. Our vision was to emphasize the element of elegancy.
Fig 2. The mood board.
Product Ideation
Navigational Scheme
I organized and categorized the content into 3 levels of hierarchy. I researched popular e-commerce and cannabis products to implement familiarity.
Fig 3. Web application map.
Sketches and Low fidelity Wireframes
The designers sketched out screens for each page. We presented our ideas and exchanged feedback to decide on the layout and structure.
My design was used for the Service page. Since it’s an impactful page that showcased the business product/service, I wanted it to be visually organized and easy to follow.
Fig 4. The Service page I designed in different fidelity levels.
Fig 5. My vision of the product in sketch.
Fig 6. Other designer's vision in sketch.
Fig 7. Our low-fidelity wireframes.
Testing and Iteration - Round 1
I conducted usability testing using a low-fidelity clickable prototype. I iterated the navigation to increase the task completion rate. 
To understand how the users navigate through the website.
Findings & Iteration:
Users were unsure the location of specific contents on our Service page. Therefore, I added a secondary navigation bar to provide users with a glance at our service.
Fig 8. I added the secondary navigatio bar.
Visual and Branding
Mid and High-Fidelity Wireframe
We implemented our marble theme, dark teal and gold brand color. Using the element of simplicity (two primary colors) and balanced contrast (low use ratio of color gold) brought out the elegance of our branding. 
Fig 9. Our mid-fidelity wireframes.
We decided to go with a dark background to increase the contrast of gold. This created a visual illusion of a glowing effect.
Fig 10. Our high-fidelity wireframes.
Interaction Flow
I created an interaction flow for the FAQ page to tackle the problem we found in our research. The flow displayed the information corresponding to the state user selected. This avoided cognitive overload. The coloring also aided as a visual tool to communicate the result (green=recreational use, lime=medial use….etc).
Fig 11. Flow of Q&A map interaction.
Testing and Iteration - Round 2
1) To understand how users navigate through the website.
2) To understand how users perceive the brand.
3) To identify accessibility issue on content-heavy pages.
Findings & Iteration:
We found that the user confused the arrow (triangle) icon as a drop-down option. So we change the icon to plus (+) and minus (-).
Final Deliverables
We handed in the Figma file of wireframes and an interactive prototype alongside the brand mood board and placeholder images.
High-Fidelity Prototype
Video 1. Recording of our high-fidelity prototype.
UI Improvement
There were a lot of areas to improve. In the last iteration, we swap the icon to avoid mistaking it as a dropdown. But I would suggest removing the excessive icons and keeping the highlights. Since the content was displayed on the side. 
Due to the lack of knowledge of accessibility and scope then, I would love to run an evaluation and adjust the contrast, text, and grids.