Product-Launch Website

The Brief

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

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

5 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 craft 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 create these, I built a custom GPT, the term for an OpenAI Chatbot powered by ChatGPT and designed to perform a specific task. 

Named Swift Persona it is tailor-made to provide UX designers a reasonably complex persona to inform early design work, ideally until research-based personas can be developed. 

To simplify the persona creation process, Swift Persona asks for a handful of key persona traits that are used to build a rich and varied persona. After each of the seven steps, it asks for feedback and input before moving on, allowing for precise control over the inputs and outputs. 

Designers that have specific data for their personas can easily incorporate it to improve accuracy. The ability to move through this process by typing just a handful of characteristics feels seamless and empowering.

I used the FigJam Persona Template as a starting place and edited the layout to better suit the information I would be using. I used Dall.E. to generate illustrated persona headshots to use with this updated Figma template.

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. Many of these fall into two groups: Boxes and Soft Cases. Boxes often feature multiple compartments, while many soft cases offer smell-resistance

Combination Locks

Security for these boxes and soft cases are typically small 3-tumbler combination locks, or do not have any security. There was a former product that offered biometric lock but is no longer produced and was similar to a lock-box, rather than a stylish case

Limited Style Choices

Bamboo is a common material for the boxes, with a variety of woods available from different brands.  There are some textile-wrapped boxes available as well.

Soft cases offer a limited range of style options, with most textiles are nylon or other practical styles, there aren’t a wide range of modern stylish designs available

Varied Web PResences

A handful of products were listed on Amazon, with a few found at online merchants with varying degrees of sophistication. Some were being sold directly from their own branded website, but few offered a feature-tour of their products 

Overview of Competition

I wanted to explore the capabilities of the ChatGPT Web Browsing tool for competitive audits of web-based information. This required a few steps with the GPT, some additional web searching and review, but I was impressed with the ability to quickly identify a number of reasonable competitors with minor errors with URLs and product availability in one case. 

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, requiring only mod

Refining the Presentation

With a handful of words, we are presented with a re-organized table, 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 must engage potential customers through a vibrant design and demonstrate the unique product features and company ethos for this new audience. 

The most-critical KPI is the collection of 5,000 survey responses to guide their marketing and design strategies.

The site required only three pages, with the primary purpose of enticing users who land on the home page to take the survey to provide data for the client’s market analysis.

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 have, but they were not developed with a focus 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

As the design progressed through wire framing, the client wanted to be sure we could highlight the differentiators their product offered without lengthy blocks of copy.

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.

The client team stressed the importance of a image-focused website layout, with small blocks of text to entice users to their product.

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 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 copyediting and imagery that would be used for the site. These are outside my scope of design, however I assisted determining content length, information flow and type of information display that is best suited to their communication needs. 

Styling with Squarespace

This website editor has a confusing set of initial theme options, some of which have labels that can’t be read because the theme and label color are the same. These are generated automatically from an initial pallet, however changing this pallet has arbitrary effects on the resulting themes.  

This means that regardless of which colors are selected in the initial theme color pallet, the designer is required to review each sub-item in a very long, unformatted list of Squarespace web elements that can have their color changed. 

Unfortunately, I had difficulty finding and properly applying changes to the color themes for the notification bar at the top of the screen, and found it quite challenging to carry a color change through all of the locations it was used in the original color pallet. 

A useful new feature for the color panel would be an interactive viewer that would show the user an example of the element and what styling is being changed.   I found many of the labels used ambiguous.  Additionally, simple formatting of the list would make scanning much easier and reduce the mental load when searching for items over and over.

Well-Presented, but Limited Options

Squarespace mostly meets its reputation for being easy to use, and to have good website templates to work from. I can see why people like the approachability of Squarespace, but if you stray too far from one of their predefined template it can be tough. The process to modify their themes consistently can be an uphill battle with little feedback along the way. 

I found many of their web elements to be reasonably well designed, but they do not offer much flexibility beyond their baseline parameters. Even simple options such as turning off text for the email list form in the footer disapointed me when I learned the element will always leave the space for text, so not entering text results in a gap in the layout

This trend towards rigid adjustability continued with the header design. There were no options without navigation, or to place navigation elsewhere on the webpage, which was unfortunate because our home page design had the navigation below the hero image.

It was nice that we could add a button to the header for the survey, however the list of other features to add was limited, and the header could only have one button at a time. I was happy to see the design the client selected had a layout that was achievable with the five Squarespace layout options.

Final Webpage Designs

The final designs leveraged the strengths of Squarespace by keeping the layouts straightforward, focusing attention on the photography and messaging. There were some unfortunate limitations with a few of the Squarespace tools and elements that forced us to reconsider our approach to the product page. 

Landing Page

About Page