Product-Launch Website

The Brief

Design a responsive website to showcase a unique new cannabis storage product and to collect survey responses

Problem Statement

A start-up is making a stylish cannabis storage case and wants potential buyers to understand its unique features and advantages

Software and Tools

Hand Wire Framing // Figma // ChatGPT4 // Google Survey // Adobe Photoshop // Transmit FTP // Personal Web Host

4 Week Paid Project

Role:  Product Designer // Website Builder

Launching a new Endeavor

I was approached to help a family member who was starting a new company and they needed to develop their website and write a survey to capture market sentiment. 

They have designed a product that is a unique offering, in terms of features and style, and the client is in the process of receiving patent on the design.

The website will function as a tool to capture market information through a new survey, as well as a point of consumer discovery of the product once the patent protection is in place. 

Personas with ChatGPT

I used characteristics from the client’s target demographic to generate three personas using Figma and Swift Persona, my custom ChatGPT4 -powered persona-builder

Building an AI tool to develop richly detailed personas

The client stressed the importance of how this product is targeting women of various backgrounds and ages. To properly address this need, I wanted to create diverse and interesting personas to inform design decisions.

To add depth to the persona creation process, I build a custom GPT, Swift Persona, which starts with a handful of key questions and traits that are used to build a rich and varied persona.

Designers that already have data about their personas can easily incorporate them to improve accuracy. The ability to move through this process by typing just a handful of characteristics is seamless and the ability to fine-tune each step empowers designers to tailor the AI responses.

Product Competitive Analysis

The product’s style is meant to differentiate it from other storage options, while its biometric security leaves no peers

Utilitarian Options

The market is saturated with numerous low-cost, generic options for cannabis storage with limited differentiation

Combination Locks

Security for these boxes and soft cases may feature small 3-tumbler combination locks, or do not offer security at all.

Limited Style Choices

 There is a limited range of style options, most textiles are nylon or other practical materials, rather than stylish colors and material choices to elevate the products.

Varied Web PResences

A handful of products were listed on Amazon, with some being sold directly from their own branded website, but few offered a feature-tour of their products 

Overview of Competition

I performed a GPT-based web search and analysis, followed by manual web search and review. I was impressed with GPT’s ability to  quickly identify many reasonable competitors with only minor URL and product-availability inconsistencies.

What can ChatGPT find using its web browser

I started with the most basic prompt I could think of, and found the results were quite helpful in their default form

Refining the Presentation

With a quick prompt revision, a re-organized table was created that can be copied directly out of the browser and into MS Office

Platform Selection

The client requested a review of hosting and platform options for the website. They have a non-technical background so the following criteria were used to determine the most-suitable option for their site:

  1. Modern, Stylish Website Design
  2. Flexible E-commerce Abilities
  3. Plan for future Expansion (additional pages, future products)
  4. Ease of updating for a non-technical client
  5. Affordable options with features they can grow into

Paper Wire Frame Explorations

Goal Statement

The website will engage potential customers through a vibrant design and demonstrate the unique product features and company ethos. 

The KPI for success is to collect 5,000 survey responses for future product marketing campaigns.

Evaluating Requirements

The existing site was considered a placeholder by the client, however I began with an evaluation of the site to understand how it had been structured and styled. 

The home page had most of the elements the final design would require, but did not a focus visitors on the product and survey 

A product’s first impressions

The landing page will be an opportunity to highlight their key product attributes and to collect their customer’s email addresses for product updates.

Learn about unique features

The product’s primary feature and selling point is related to its safety and security.  The page focuses on these different features as well as the style of the product.

Share the company values

The idea for the company came from the experience of one of the founders, which provides customers a view into the ideals of the brand, beyond its messaging.

Remote Design Presentations

The product team is located in the east coast, so our design reviews were recorded Zoom meetings using FigJam to present the ideas and concepts. 

The team appreciated the visual, interactive nature of the presentations and we were able to review the material and get feedback and shared understanding of the design.

The refined paper wireframes reviewed in the design presentation were accepted, with the understanding that the final renderings will not be immediately available, the product page will be completed after the website’s initial launch.

Low Fidelity Wireframes

Review of the paper wireframes took place in a Zoom working session with the client team, resulting in important refinements in content and flow

Focus on Features

The product page was designed for easy scanning, with key information available in simple bulleted lists, or image-focused layouts to guide the users path through the information easily, or allow them to find what they are interested in quickly.

As the design progressed through wire framing, highlighting product differentiators without lengthy blocks of copy was a focus. 

The full-bleed main image is meant to give an immersive vignette of the product. The survey button is given visual weight to balance against the three features laid out below.

The team wanted to use a group photo rather than individual biographies. The company’s genesis story will be told with additional imagery, emphasizing their firm’s mission. 

Building the Website became a Study in Squarespace UX

This project required a very short duration, so after receiving client comments and approval of the Low-Fi wireframes, I moved directly into build-out of the Squarespace website  

Design Review 2: Presenting the Initial Draft

I presented the low fidelity wireframes and the initial edits over Zoom to the client team. I wanted to gauge their opinions on a few key elements like Fonts, and website styling details. 

More substantive conversation developed around the copy editing and imagery that would be used for the site. These are outside my project scope, however I assisted with determining content length, information flow and content layout that would best suit their communication goals. 

Final Designs

The final designs leveraged the strengths of Squarespace by keeping the layouts straightforward, focusing attention on the photography and messaging.

Brand Identity

Landing Page

About Page