top of page
Pronoy Kapoor
Website Design
Client/College
To create a brand new website design for an off-line cannabis product range. Understanding the target audience and the competitive market study were the major challenges to tackle.
Roles
UX researcher & UX designer
Team size
Solo
Time frame
2 weeks
Tools
Adobe XD, powerpoint
Figure: Defining the scope of the project
Scope
The goal of this project was to create a brand new website for the client. For achieving this, a comprehensive strategy was created which addressed all areas of a UX problem solving from conducting primary and secondary research, user testing and delivering final design solutions. The project was divided into phases, wherein each phase focused on a part of the UX problem. The research was focused on developing personas and business goals, the testing was to generate the most accepted information architecture for the website and the design phase was to deliver wireframe and prototype.
Overview
Literature review
Since, the project was to start from scratch, it was imperative that I studied about the product that client wants to sell online. In this case it was cannabis and related products. The literature review provided insights into what the current usage trends of cannabis and its products are, like age group, preferences, methods of consumption etc. Also, attention was aid to demographics consumer habits. This gave me an understanding how to approach these products from a design point of view and what users to study further to analyze user goals. Also, how the government regulates these products in the given market and what rules and regulations to adhere while displaying the product details on the website.
Figure: Quantitative and qualitative data from the literature review
Competitive scan
In order to design a competitive product, a market and competitive scan was mandatory in the research phase. This included looking up websites of direct competitors and identifying their strengths, weaknesses and business goals. For this, I researched three direct competitors and did a complete scan of their websites, paying close attention to color schemes, design patterns, their sitemaps. These mappings will help me later to create my own cards for the information architecture for the client's website. While working on these site maps, it was interesting to note how different each competitor's sitemap was and has varying degrees of success and failures associated with it.
Figure: Competitive scan of one of three competitors. Clockwise from top: scan, sitemap and two level deep screenshots .
Competitive scan
Once all the three competitors were scanned individually, it was time to do a competitive analysis for all of them together. This was an extension of the previous step and included a more tabulated data to compare the similarities and differences between the three competitors. Unlike the scan, this was comparisons of data fields like site traffic, primary product categories, social media , type of content, user generated content (UGC), and heuristics analysis of the website. This information all informed the same categories to be formed for the client's website. For example, the primary categories helped in defining level1 cards, the social media informed where all their competitor's are marketing, UGC informed how the users are responding to the website services in the form of reviews and ratings. These all points were helpful in designing features that the client would also like to provide to their client base.
Figure: Competitive analysis for all three competitors
Research
Business goals
Based on the secondary research activity of competitive scan and competitive analysis, a list of business goals was generated. This list was divided in five major areas addressing requirements of the business like the products they offer, the service they wish to provide to the customer, the experience they wish their user has on the website, the technological sophistication they wish to achieve and provide and the competition in the market which they wish to challenge. These areas were all given achievable actions.
Figure: Identifying business goals
User goals
Similarly, from the literature review conducted , a set user behavior was identified. This resulted in the user goals. Same as the business goals the user goals were also divided in five broad categories, each one addressing the user needs this time. For example now the products will be what the user wish to see and explore and the experience is what the user is hoping to gain when visiting the website.
Figure: Identifying user goals
Persona
Based off the literature review and later the synthesis in user goals, resulted in persona. These personas were based on the user base and demographics and psychographics of the average user of cannabis and related products. Each persona represented a different segment of the user base which the business targets. Their requirements, frustrations, comfort with using a web based technology were few of the areas that were simplified to inform the designing of the website. While it is not included here, but I actually spoke to a few cannabis users in an unofficial capacity and got to know about their expectations and frustrations when ordering cannabis products online, and that helped me greatly in shaping these personas.
Figure: Personas
Analysis & insight
Finally, synthesizing the business and user goals, I was able to generate a five point agenda for this project which would be basis of the design of the entire website. This analysis was given top priority as it was all about creating a user experience which will help the client establish their presence in the market.
Figure: Final synthesis of all the research
Analysis
Proposed cards
Because this was a start from scratch project, an information architecture customized to the client product was to be designed. For this I conducted a card sorting exercise with the actual end user. For creating the cards, I referred back to the sitemaps of the competitors and the main categories of the competitive analysis. Also, I looked into the business goals and created a set almost fifty plus categories.
Figure: Proposed cards for the card sorting exercise
Card sorting
The card sorting was an open card sorting, which meant the participants were not given any main headings to sort the card users, which gave them the freedom to arrange these cards as per their understanding and the need. The challenge was to find the actual users of cannabis products who used a web based service to order cannabis products. But once they were arranged, with the standard recruitment procedure it was a successful exercise, one which resulted in a great insight into how the customers want to see these products displayed on the screen of their computers and mobiles.
Figure: Cards sorted by three different participants
Final IA
The entire activity of card sorting was done to create an information architecture for the client's website. Thus condensing the results from the three card sorting activities and aligning it with the user and business goals. This gave me my final information architecture for my final design and how the main menu, utility menu and the footer will contain.
Figure: Final Information architecture for the website
Information Architecture
Design patterns
In order to begin designing, I started with identifying the various design patterns I would like to introduce into the new website. This included defining the fonts, the colors, the icons the features that the website would be built upon. First I designed them for the wireframes, then once the wireframe was designed and approved, then with minor modifications the same patterns were converted to suit the prototype.
Figure: Design patterns created and identified
Wireframing
Based on the card sorting exercise, the information architecture was generated and based on the design patterns created I started designing the wireframes for each page of the website. This included the entry point page, level 0 page, all level 1 pages and all level 2 pages. the footer and utilities pages design will be based on these level 2 page designs. once created, these wireframes were evaluated for the heuristics and modifications were made before converting the wireframes into a working prototype.
Figure: Final Information architecture for the website
Prototyping
Once the wireframe was approved from the previous step, it was time to add high fidelity interactions and convert it into a high-fidelity prototype. This prototype gave the look and feel of the actual website which would be created. The next steps include is to test this prototype with the actual users in a usability testing and conducting feedback or validating sessions with the clients to confirm the success of the design and move ahead to building the actual website.
Figure: All pages for the final prototype
Design Solutions
bottom of page