Cannabis Canada
Cannabis Canada – A mail-order service for Canadians wishing to purchase quality cannabis products for recreational use.
Welcome to my portfolio.
Introduction
Cannabis Canada is a mail-order business for Canadians interested in buying high-quality cannabis products for recreational use. Still, we discovered that many consumers were unaware of its existence. To grow and boost business potential, we are marketing the brand and its services by developing a digital product (website) via which individuals (Canadians) will be able to acquire cannabis products for recreational use via Cannabis Canada.
Business Goals
Long-term
Goals
- To increase brand awareness and name recognition
- Raise the total profit margin of your business by 15% in the next four years. To meet our long-term objectives, we must expand our client base and improve the customer experience for current customers by making Cannabis Canada digitally available online and, therefore, more accessible to customers.
Short-term Goals
- To create a website to sell products
- Allow customers to find more information about the products and services
- Make it easier for the customers to place the order
- cross-sell to long-term customers
By achieving our short-term objectives, we will be able to establish a digital presence, allowing customers to connect with us online to buy products and obtain more information about them, resulting in increased sales and lower sales costs for the company. Personalized suggestions based on user profiles assist users in finding related products in a hassle-free manner, resulting in increased sales for the company.
Usability tests will be performed on these tasks and iterate your design if necessary based on the outcome of testing. Can revise these tasks once you have completed your competitive analysis if anything important is missed.
01
Design Process
Empathize
- Establishing Business Goals
- Competitive Analysis
Define
- User Personas
- User Scenarios
Ideate
- Assume a beginner’s mindset.
- Card Sorting
- Tree Testing
- Site Map
Prototype
- Wireframe
- High Fidelity Prototype
Test
- Usability Testing
02
Competitive Analysis
Direct Competitors
- Hunny Pot Cannabis
- Toronto Hemp Company
- Gas Dank
- Your Local Cannabis
Indirect Competitors
- Hunny Pot Cannabis
Overview
Toronto’s very first legal cannabis store, opening our flagship location at 202 Queen Street West on April 1st, 2019.
The website and the colour scheme convey a luxury feel. The content conveys a welcoming and comfortable feeling regarding the things supplied on the website.
Website Analysis
Best Features
- Prominent customer care feature to help users at any point in time
- Very intuitive store locator
SiteMap & Analysis
- The clicks to buy a product is 7, which is relatively on the higher numbers.
- Users have to go through many steps to see the product description
Overview
Toronto Hemp Company (THC) is perhaps the world’s largest and most significant cannabis culture/hemp/pot/bong/vaporizer/head shop! Established in 1994 and located in the heart of downtown Toronto, THC is a “hemp shop,” “head shop,” or “smoke shop,” or cannabis/marijuana/hemp culture store” – a retail store and resource center providing high-quality hemp and related products and information.
Website Analysis
Best Features
Minimal clicks are required for the users to purchase the product.
Sitemaps & Analysis
The categories have overwhelming amount of data takes time to go through each and every content
Overview
Gas Dank is Canada’s premier mail-order service. We provide same-day delivery across the GTA and express mail delivery across Canada. They assist users in discovering our world of carefully crafted premium cannabis. They were established in 2018.
Website Analysis
Best Features
- For color-blind people, it is difficult to read the call-to-actions visually.
- Considering the communication, they have provided the WhatsApp contact, mobile number, and email to mail if users want to know anything.
Sitemaps & Analysis
Pretty straightforward in terms of the flow and easy to buy the product.
Overview
Local Cannabis Scarborough’s first legal and licensed retail cannabis store. They are direct competitors and have multiple stores in Scarborough, which appear to be premium and focused on quality.
Website Analysis
Best Features
The information architecture of the website is good and seems appropriate but considering the clicks to buy a product is 5 which is relatively good. Interactions used in the website for the people to navigate and understand is good along with that website is incorporated with the accessibility assisting features which adds value in terms of the inclusivity, for example, reading the passages for the people.
Sitemaps & Analysis
The site map is clear and follows the traditional e-commerce template, which reduces the cognitive load for the users.
03
User Persona
04
Card Sorting
Card Sorting tasks were performed via an online platform – Optimal workshop. For implementing the card sorting, the site map was curated based on the user persona and competitive analysis, and the card sorting was developed with appropriate label names.
Participants recruitment
Based on the user persona, the three participants were selected. And the link of the card sorting is sent to evaluate,
Click here to check card sorting.
Card Sorting test - Results
Total Participants :
3
Average time for completion :
1m47s
Task completion :
3/3 participants completed successfully
05
Tree Testing
Once the site map is finalized based on the cart sorting task’s results, further testing tree task was implemented for cross-verification purposes. Thereby scenario-based tasks are defined for the tree testing.
Task 1
Considering you are having a vacation after a stressful project, you like to try out some Cannabis for fun and relaxation, you are wanted to buy some flowers, Where do you go look for it?
Task 2
To use the flowers you are going to purchase, you wanted to purchase some accessories (paper-rolls), Where do you go look for them?
Task 3
As you figured out the product you like to buy the product, now you look if there are any offers available so you can apply for a discount, where do you look for it?
Test URL Task 1 & 2: https://whwvxk0w.optimalworkshop.com/treejack/z580bnw8
Test URL for Task 3: https://ila8alg1.optimalworkshop.com/treejack/pi83loxo
Tree testing - Results
Analysing the results obtained from the tree test we see that the participants can successfully accomplish the defined tasks without any struggle and hence we finalize the information architecture site map and proceed with the further process of creating low fidelity.
Task 1
Task 2
Task 3
06
Sitemap
07
Wireframes
- The wireframe was created using the online platform called whimsical.
- Created the home page based on what the user needs to see on the home page and what features make users engage more with the company/website
08
High fidelity
The fonts used are Roboto Slab for the heading and Poppins for the body, as they are friendly and provide good readability.
Vibe
Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.
Brief
Good products aren’t only visually remarkable but stunning in the experience of use, and how to solve the fundamental problems for users & create value for the platform.
The following displays include UI / UX design, brand design & animation design. The overall style is calm and stylish, reflecting the safety & other qualities in the design, which continues the new design trends, makes a complete design specification system & use a technology style & Blue gradient as the main tone.
01
User Persona
Entrepreneur
Al Arshad | 31 years
Hello, I want to focus on work more and don’t want to distracted by the phone calls and lose my efficiency, also I don’t want to mix my personal life & work life.
Site Engineer
Juma al Majid | 26 years
Hello, I want to focus on work more also my job involved traveling to remote location I wanted my family to be well informed as I might not be able to pick the call or not reachable.
Store manager
Lama Asker | 28 years
Hello, As I have guide & help many customers consistently in the store I am not able to look into phone and might miss the calls, so I want the people to be informed regarding my schedule.
02
Design Goals
Focus on use
Reduce the cost of use
Clear data visualization
Improve efficiency
Unified interactive experience
Improve awareness of the function itself.
03
Work Flow
After determining the design goals, Comb the pages and determine the necessary pages.
Dashboard
Create New Flash
Existing Flash
Contacts
Sync Contacts
Add Recipients Manually
Groups
My Flash Message
Instant Flash
Special Flash
Status Flash
Prayer Flash
Driving Flash
Setup & Controls
Settings
Security
Account settings
Language
Blacklist
FAQ
About
04
Colors
Simple graphics & high-saturation graphics can release user pressure in functional apps, visually improve the style of the app & attract users’ attention.
Blue-Green
Gradient
214FE3
2CE2B0
Blue
Gradient
80ACFE
4974FC
Red
Gradient
F89DC9
E1046F
Green
Gradient
3EF7C4
1DD5A2
05
Font
An ordered and reasonable font classification is an indispensable part of an excellent app.
Fonts are divided into reading fonts, digital fonts, and total fonts.
The font used for this variant is “Origin.”
1. Origin font is more friendly to the user and has different scripts.
2. Since this font comes in various styles, it’s great for a heading, subheading, and body copy for consistent design flow.
3. Origin is used in modular websites. Also, user experience-wise, it takes less effort compared to getting an idea of what the content type is.
06
Wireframes
Wireframes helped me & technical team to visualize what the product would look like. To build fast concepts, I start with paper wireframes.
Proceeding on to a high-fidelity prototype, which can be used for analyzing the viability with the technical team.
On-boarding Screen
Mobile Sign-in & Sign-up
Flash Listing Screen
Create Flash
07
User Interface
Login Screens
Make good use of copywriting on the registration page, reflecting the usability & ease of use of the product and style of the product.
On-boarding Screen
Mobile number
Verification Code
New user registration
Unlocking with PIN
Biometrics Unlocking
Icons
As a design element in the page, the icon has a significant expression prompt function, and the design on the icon style has a great relationship with the product attributes, design concepts, page style collocation & other factors. To highlight the efficiency attributes of the product, linear icons are used in the design. The content is simple and easy to understand through the simple, atmospheric, and exquisite design, which reduces the user’s uneasiness & the cost of user understanding.
Tab bar
The visual experience will be softer and lighter after adding motion effects when switching the tab. This is not just action feedback but an expression of the character of the product (the intensity of the motion effect needs to be adjusted according to the complexity of the icon).
Dashboard
For New User
For Existing User
Element Analysis
Whether the feed flow is good enough, one of the criteria is whether the information is organized & whether users can easily find what they need. A reasonable layout & regional distribution is conducive to improving the click rate.
Create Flash
Users can quickly access and create a flash using a Floating action button provided in the Main screens. Usage of cards and spacing on the content to keep the content readable and prevent users from skipping a lot of necessary information. Buttons use prominent colors to stimulate users to apply to increase platform activity.
Instant Flash
Create Flash : Part 1
Create Flash : part 2
My Flash Page
Maximizing the use of the first screen content while ensuring the integrity of the content display, introducing the emotional design to the narrow the potential distance from customers.
Guide users to focus on the main content on the screen, provide clear and clear information, and convey a refined and efficient brand experience to users.
User multiple methods to enhance the prompt to the target number, enhance the user’s attention, and improve the accuracy of input.
The model window system is based on the need to be built to achieve rapid response to user. Obtain the user’s visual focus through back ground blur. Attract user’s attention.
JobsWorld
Through this app, people can find new jobs and explore new opportunities to pursue their dreams.
- Client JobsWorld
- Services Web & Mobile (Android & ios)
- Sector Human resource
Design Concept
In modern days everyone wants to be independent, So jobs are preferred. I have designed this application to make the job hunt at ease, also most of people gets frustrated to get the right jobs what they are looking for so to improvise the situation, by showing the relevant jobs based on the skillset of the individual.
Features
Job search
Job search tool automatically finds the right opportunities for you
Job applications
You can directly apply for the job, relevant opportunities will be notified to you on a daily basis
Save favorites
If you find any suitable job you can save that.
User flow
01
On-board with Jobsworld
02
Upload your documents
03
Get personalized job suggestions
04
Apply for the best opportunities
05
Attend interview & get shortlisted
06
Pursue your dream with happiness
Wireframes
Typograhy
HELVETICA
Regular, Oblique, Bold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Colors
#0A56B6
#ECF3FC
#303030
#FFDF63
User Interface
Quick and easy sign-up with essential fields in the form.
Home page with personalized offers,
around popular and nearby jobs.
Find the right job, sort by salary, location & position type.
Manage all the applications & make decisions.
Suzuki Connect
Created to make an impact
An automobile utility product
- Client Suzuki Motors
- Project Duration 1.5 Months
- Services Mobile App
Overview
Suzuki Connect is a utility mobile application that provides features such as hands-free navigation, the last parked location of the bike, recording recent trips with the trip details & save some favorite trips. It also gives you the stats such as total distance, current fuel level, the number of trips traveled, and the average bike speed while driving.
Project Links
Overview
Suzuki Connect is a mobile utility application that provides features such as hands-free navigation, the last parked location of the bike, recording recent trips with the trip details, and save some favorite trips. It also gives you stats such as total distance, current fuel level, number of trips traveled, and average speed of the bike while driving.
The Challenges
1. Creating a useful utility application program for people to overcome the basic problems of navigating while using a motorcycle by syncing with the dashboard.
2. Considering how to reflect the product’s usage and the deep symbiotic relationship between the mobile application and the automobile.
Goals & Problems
After interviewing different people, I concluded that people mostly use their phones for navigation while driving a two-wheeler vehicle act as a distraction & there seems to be causing an act of accidents.
Before creating the concept, I conducted research and interviews and created a user flow & CMJ. All these actions gave me a deep understanding of the topic, which allowed me to create a convenient, functional, and easy-to-use application.
My Role
I began this product design as a user experience (UX) and user interface (UI) designer for this project. I obtained constructive feedback from two other designers to develop other design aspects.
Main Tasks
1. End-user Insights & Ideation
2. Framing the Project Vision
3. Planning and scope definition
4. User Interface & Experience
5. Motion Interaction
Design tool Kit
Design
A primary step of the design process involved user interviews and desk research to understand how competitors and users behave. I believe getting this information early in the process is important before having an idea or prototyping.
After analyzing this insight, I started to conceptualize the explication, focusing on user flows and wireframes, which provided me a way to iterate faster through my thoughts. With further progression, I went to the production mode, designing the interface while considering design principles such as contrast, hierarchy, and feedback; brand attributes; user interactions; and the imagistic universe presented as a briefing by the case.
Once the interface was ready, I took feedback from two other fellow designers to understand the experience gaps. Although part of my usual design process, validation would be a post-conceptualization and interface step and won’t be discussed in depth in this case.
Design process
01
Research
02
Concept
03
User flows & Wireframes
04
User Interface & Interaction
05
Collecting feedback
06
Validation
User Interviews
User interviews are a core user experience method. That’s why I chose to approach 10 people to interview, taking into account the recommendation from Donald Norman’s article, “Why You Only Need to Test with 5 Users,” noting that it is possible to learn about 80% of the errors, problems & behaviour from the first 5 users.
Interviewed Audience
The interview sample took into account men & women aged 22 to 40, inserted in the economically active population of Bangalore, Chennai & with different usability habits.
The interview was held approximately 10-15 minutes & incorporated topics to get to the core of what users are trying to do & what their problems are.
Questions asked
1. What kind of vehicles do they regularly?
2. What kind of difficulty do they find during their drive?
3. What kind of information do they like to know before and after the ride?
4. What kind of applications do they use when they start to travel?
Customer Insights
After analyzing the interviews, despite the amount of generated data, this was the most relevant information for decision-making in creating the solution:
90%
People believe that it’s better to use digital GPS for navigation rather than using a physical map.
75%
People like to have a log of the trips they are going on and also share it with their personal and social group.
60%
People would not get distracted during their driving time
50%
People prefer to know the data about how they use their bikes & the current status of their vehicles.
User research outcome
What we see is that although 90% of users use the mobile phone for navigation purposes & to store information, would help them by granting easy & faster access, 70% of them say they find it very difficult to use the navigation using GPS application while driving where the navigation is displayed only on the phone.
Desk Research
Additionally, I researched data & habits related to other existing products & applications. The goal was to understand how competitors behave & benchmark innovative designs & products.
With relevant examples to the discussion, such as TVS n-torq, Hero, Suzuki Connect & Tesla. Addressing different features for Functionalities & usabilities.
Wireframing
The Wireframe was designed to build the structure and architecture of the information and only go to visuals and interactions. Samples of screens were done for wire-framing.
Typography
Since the application requires better readability, we have to choose a font family as the font looks friendly and also legible to read the texts irrespective of the situation; we understand that this could be used as an opportunity in the app interface. Therefore, we combine Roboto san-serif typography with a sans-serif Circular.
ROBOTO
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Color
The brand’s guidelines led us to pick the theme as dark grey & the primary color as Takumi Blue due to the following reasons :
1. Feels like an integral feature, not a separate entity.
2. Better visibility under direct sunlight.
3. Optimised battery consumption
1. Feels like an integral feature, not a separate entity.
2. Better visibility under direct sunlight.
3. Optimised battery consumption
User Interface
Validation
The Utility Product should not become just a one-time delivery. It should be iterated by considering usability tests, A/B tests, and other in-depth surveys with the user to improve the initial version.
This being said, the implementation of this feature is only the first step toward the success of the product. This would be important to understand success and elaborate the product route map by analyzing metrics such as reading time, daily reading frequency, totals collected over time, and the interests gathered on board.
