The 90 Minute Commerce Site

This resource show you how to build a functioning commerce site along with a working brand identity program in 90 minutes hours. All it took was:
1 computer
1 Shopify subscription (basic- $29.99/month)
1 brand board on Brand Lattice (free)
1 style guide template (free)
2 espressos

Disclosure: I don’t have anything to do with Shopify but I did create Brand Lattice with some friends and have shamelessly mentioned it here.

Getting Started

I wanted a real subject so I built a “fan site” for a company in Michigan called Bright Green. They make vertical planters for the kind of thing you see to the right. Their current site actually has a lot of good stuff on it but it’s a little hard to get at, the site isn’t very responsive (on small screen), and, most importantly they don’t really have a commerce capability- hence my choice of Shopify.

While I was able to use some of their existing assets for some supporting pages, this could just as well have been a commerce site for a brand new startup with something to sell, and we’re going to start from scratch.

I’ve never used Shopify in any substantial way so the time accrued here is for a beginner. The whole thing broke down like this:

#	Step	Time (Min.)
1	Creating a Brand ID	5
2	Create Style Guide	10
3	Draft Key Site Narratives	20
4	Sign Up & Create Products on Shopify	10
5	Pick Theme on Shopify	5
6	Customize Theme	10
7	Add Supporting Pages	30

Step 1: Creating a Brand ID (5 min.)

Bright Green has a program, but to make the exercise and this post a little more interesting I decided to reinterpret it from scratch. Even if you’re thinking ‘I don’t need branding right now’ or ‘Just show me how to make the site, San Francisco man!’, I highly recommend spending 5 minutes on this step. It will save you loads of time and problems down the road when you’re learning how to describe yourself to customers and explaining that to collaborators and vendors. Among other things, this will save you from overwrought discussions about ‘why this color?’, etc.

If you go to a high dollar ad agency to ‘find yourself’, brand-wise, one of the things you’ll do is create a brand ‘mood board’, something like what you see below:

(LINK TO FULL MOOD BOARD ONLINE)

The good news is that board was produced in 5 minutes using this tool: BrandLattice.com. The (free) Brand Lattice tool will take you through the brand/mood board process in around 5 minutes. If it takes more than 10 minutes, you’ve definitely spending too much time- just punch through it. You can always revise it later.OUTPUTBrand mood board (save the URL on Brand Lattice for later use).

OUTPUT

1. Brand mood board (save the URL on Brand Lattice for later use)

Step 2: Creating a Style Guide (10 min.)

Inputs

1. Brand mood board from last step

As a high-functioning non-designer, the top four things I’ve learned from my collaborators about design are:

1. Anchor the design in what’s substantial (aka begin with the end in mind)
2. Consistency
3. Consistency
4. Consistency

Consistency is tremendously important- it’s sends a mostly subconscious message to your audience that you know what you’re doing. Fortunately it’s easy to achieve.

A ‘style guide’ defines the visual standards you’ll use with your company and/or product. The process we’ll follow in putting one together will also help you with its internal consistency and anchoring to your brand.

Every brand should have one, but many don’t. In the same way that a software developer might agree it’s a good idea to put plenty of comments in their code but in practice don’t feel like doing it, many designers won’t get around to putting together a style guide.

A stitch here in time will save nine: Just defining your colors and typefaces in advance will save you time tinkering with choices and fixing stuff that doesn’t look right later. Second, with the tools below you don’t need to be Don Draper to come up with something that looks reasonably good (or better).

Let’s start.

USING THE STYLE GUIDE TEMPLATE

For your style-guiding convenience, I’ve created a template on Google Doc’s where you can fill in the blanks. Just link to it and make a copy for your project:

STYLE GUIDE TEMPLATE

If you don’t want to use the Google Doc, you can create something similar in just about any visual editing tool (MS PowerPoint, Word, Keynote…whatever). Don’t worry about making it pretty. Just make it functional.

POSITIONING AND BRAND DESCRIPTORS

Go ahead and change the intro slides (or delete them) if you like, and we’ll start on what’s page 3 in the template:

This step’s pretty easy: just copy the positioning statement and Brand Descriptors you created on step 1 in your brand/mood board!

Output

1. Positioning and brand descriptors recorded in style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)

COLORS

Next we’ll define colors for the brand. You can spend a lot of time on this, working through colors’ associations to your brand values and how they’ll work in your different executions.

We’re not going to do that here.

We’re going to use a simple tool that lets you derive secondary colors from a primary color. It’s called Paletton and it looks like this:

Select a primary color on the wheel. Just look at your mood/brand board (step 1), take a deep breath, and pick a color. It’ll be fine. The color won’t matter as much as your consistent use of a coherent color scheme.

If you already have a primary color, you can input that in the bottom left, where it says ‘RGB’. You’ll need to know the hex value for your color, or you can approximate it yourself on the wheel.

To derive the secondary colors, I picked the third option directly above the color wheel- triad with complimentary colors (they’re the compass-looking things above the wheel). If you click on the ‘Color tables…’ option on the bottom right you’ll see this screen:

Grab the primary dispositions of the colors (the large swathes in the center) and put them in your style guide on page 4:

Done.

Output

1. Color scheme for style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)

TYPEFACE (FONT)
To an even greater extent than color, typeface is something where professional designers bring a lot of perspective (whether it’s actually more rarefied than color is debatable, like everything else in design).

There’s also a joke among designers: ‘The process differs but the answer is always Helvetica.’ (Helvetica is a typeface.)

The site Typography.com has an interesting short piece on combining typefaces:

Unfortunately, most of the online resources are selling proprietary typefaces (directly or via referral) so there aren’t a lot of good resources that show you how to use the standard, license-free (or pre-licensed) typefaces you’ll find on a service like Shopify.

For Bright Green, I think the ‘wit’ theme fits best. I’m interested in a quick but reliable result, so I’m going to go with the tried-and-true Helvetica and what I take away from the notes above is ‘Try pairing Helvetica with a serifed font for ancillary page elements if it’s easy and it looks reasonable.’

Serifed fonts have little projections at the end of the letters’ lines (like you flicked your pen while you were writing them) and sans-serifed fonts do not. Skipping ahead, you can see one of the Shopify typeface menus organized along those lines:

I’m going to go with Garamond as a secondary serifed typeface because Shopify offers it and really no other reason (vs. the other options). I may or may not actually use it on the site- depends if my quick initial reaction is positive or negative. And I’ll definitely err on the side of just staying with Helvetica.

I’ve played golf twice and what I learned was that if I don’t try to hit the ball too hard, it won’t go that far astray (inconveniencing my friends). Here’s another good guideline for the designer: don’t try anything too radical and you’ll probably be OK.

Along those lines, we’re going with Helvetica and Garamond as a secondary typeface which I’ll record on the corresponding page of the Bright Green style guide:

Output

1. Typeface selection for style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)

LOGOTYPE/MARK

Bright Green already has a logo, but it wouldn’t be consistent with the rest of this program, so I found a royalty-free image on the Wikimedia Commons and paired it with the company name in the Helvetica typeface in call caps:

The reason for the use of all cap’s is that by doing that (or the reverse- all lower), you’re distinguishing it as part of a brand mark vs. just regular text. I don’t think I’ll win any awards (but totally call me if you have one). An outstanding execution isn’t our goal here- we want to get online and once we see what’s working we can revise to our heart’s delight.

In this section we defined how we want the brand to look. Now we’ll move on to its primary application- a working commerce site on Shopify. In the next step, we’ll sketch a quick narrative about our user and what we’re trying to do for them on the site to guide our implementation and later validation.

Section Output

1. Positioning and brand descriptors recorded in style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)
2. Color scheme
3. Typeface selection
4. Logotype creation

Step 3: Draft Key Site Narratives (20 min.)

Now we’ll take 10 minutes to draft our key site narratives- who we’re creating this for and what we think they’ll want to do with it. Important point: We’re not trying to ‘specify’ the site. Our goal is to see the world from the eyes of our site visitor and describe what we want do in a way that can serve as a reference for our implementation and as a backdrop for our post-launch analysis of what actually happened and what we’ll do next.

We’ll use three tools:

1. Personas
This is a vivid depiction of our customer and what makes them tick.

2. Problem Scenarios
These are testable descriptions of jobs, needs, desires our customer wants fulfilled.

3. User Stories
These come from a discipline called agile and are a way of richly describe something we want to create.

You can read more about these from the links above, but I think you’ll find enough in the examples below to get started. We could easily spend two hours just on these inputs (and I would if this was a full product design), but our priority here is to define just enough so we know what we’re doing and how we’ll validate it.

PERSONAS
Bright Green sells to both residential and commercial customers, so they probably have at least three personas:
Harriet the Homeowner
Barbara the Business Owner
Carla the Commercial Landscaper (who would install and maintain for Barbara)

Let’s assume Harriet is the primary persona and we’ll detail her for starters.

I like to start with a photo and at least a few sentences of description:

Harriet lives in a two-story townhouse in a new-ish suburban development with her husband and two children (1 year and 4 years). She works part-time as an accountant, but her real passion is looking after her kids and household. Space is at a premium and they’re on a budget so she’s always looking at creative ways to enhance the space. She spends 0-3 hours a week on non-recurring household projects, usually when her husband is home and able to look after the kids.

Thinks	She’d like to do something interesting and creative in the house. She loves plants and the use of vertical planters gives her a whole new avenue, both practically and stylistically.
Sees	She sees vertical gardens she likes in a few of the magazines she reads, like Sunset and Dwell, as well as on friends’ Pinterest boards. She’s seen a few read-to-go options in upscale retail but they’re outside her budget right now.
Feels	She spends a lot of time at home and pretty much handles decor and design for the family- so the house is a source of pride and self-worth. When guests come by and remark on something she did, she feels happy.She’s excited to have a few folks over to notice the vertical garden after she finishes.
Does	She handles care and watering of the plants, but her husband does a lot of the fixer-upper projects. She’d like to do this project by herself so she can move at her own pace and keep her husband focused on repairs that still need doing.

Next we’ll draft some problem scenarios- these are jobs, needs, or desires that you’ll deliver on for our prospective/hypothetical customer. Next we create user stories, descriptions of how we’ll deliver on those. The stories (from a discipline called agile) have this syntax:
As a [persona],
I want to [do something]
so that I can [derive a benefit].

Problem Scenarios (Harriet the Homeowner)	User Stories
I’m thinking of a vertical garden, but I haven’t quite thought of something that’s cool enough to make it worth the time and expense.	I want to see what kind of vertical garden set up would be good for my particular space so I do something that looks nice and isn’t too difficult for me. Notes: Make sure to include best practice photos for different spaces. Maybe a video, too.
I’d like to get some of this vertical garden stuff going, but the nice-looking options are out of my price range. I’m interested in a do-it-yourself project but I don’t want a damp, drippy mess full of dead plants that’s going to wreck the house and be a sad story.	I want to understand the design/planning, installation and maintenance tasks, so I make sure I understand what I’m getting into and if I want to do it. I want to understand how to dismount the planter for maintenance, so I know how hard it will be to update it.Notes: Make sure it’s simple and step by step with supplemental detail available as needed.
I want to cover an area roughly 2’ x 4’. How many planters do I need?	I want to understand the dimensions of the planters so I can order the right things to cover my space.Notes: * Make sure to show with and without the Irrigator and the Collector* Make sure to explain how high you can stack them and still use the Irrigator
I’m not sure what kind of plants would do well in the vertical planter and I don’t want to buy the wrong thing and have to start again.	I want to know what kind of plants/example plants do well in the Grovert so I pick the right thing.Notes: Make sure to create a list of common, good choices, ideally with photos but at least with a link off site to Wikipedia (if Wikipedia, make sure to open a new tab).
I’m not really that handy, but I’d like to do this myself. How does this thing install?	I want to understand the physical installation process so I understand what’s required.Notes: Make sure to do this step by step. Think about whether they need to find studs in the wall, etc. Ideally, try handing the directions to someone and testing them.
How do I water it so it doesn’t make a mess?	I want to understand the watering process so I make sure I can maintain the planter.
How often do I need to water the plants? How do I tell if they’re OK?	(see above)
I want to place an order- how do I get that done and understand when the thing will get here?	I want to go and order the items I identified and check out so I can get started.Notes: Make sure they later get access to courier tracking so if they have a question on delivery they can check themselves

We’ll skip the first clause in the stories below since they’re all for Harriet the Homeowner. Notice the notes supplementing the stories- I highly recommend adding those since the purpose of the stories is to spur and focus your implementation plans.

Done. At this point, we should have a pretty coherent view of what we want to do on the site. That will help us start purposefully and have something to ‘test’ the site against before we release it to the wild.

Output

1. Persona(s)
2. Problem Scenarios
3. User Stories & notes

Step 4: Sign Up & Create Products on Shopify (5 min)

In this step, you’ll sign up on Shopify (super easy and not described here) and add your products. If you’re prompted to choose a theme, just go ahead and pick one quickly for now- we’ll talk about that more in the next step and you’ll want a few products up to really get a feel for the theme.

Shopify makes adding products pretty easy through this page:

Shopify has their own notes on the various details here.

With the 10 minute estimate, I’m assuming you have roughly half a dozen products. If you have a lot more than that, I probably wouldn’t add more than a 10 or so until after you verify things are looking and working the way you want.

Step 5: Pick Theme on Shopify (5 min.)

In this step, you’ll pick a ‘theme’ so creating your commerce site is mostly a fill-in-the-blanks exercise.

If someone were building a site or web app from scratch, this is normally where I’d advise them to look at ‘comparables’, other sites whose functional behavior they think works well and would apply to their project. That way you’re not reinventing the wheel.

In the case of Shopify, they kind of do that for you with their ‘theme store’. It’s organized by area and even the thumbnails suggest the kind of products a given theme would service:

Some are free, some you pay for. Take your best guess and select a theme.

For Bright Green, I chose the ‘Solo’ theme. After I picked it in the theme store, I could see it by clicking on the Themes menu in the admin panel:

You can actually select multiple themes, editing and previewing them at will. The one under ‘Published’ themes is active. You can change that by clicking on the ‘Publish’ button on an Unpublished theme. I might quickly look at a couple of themes to compare but if you want to stay on this timeline, you’ll need to pick relatively quickly (the goal is to get something online; you can always change later).

I previewed the Solo theme and spent 1-2 minutes customizing under the ‘Theme Settings’ page. We’ll look at customizing the theme in the next step, but basically I just went in and changed the typefaces and colors a little. and then previewed.

Then I previewed the ‘launchpad’ theme, which is apparently their default, and just appeared there under ‘Unpublished Themes’. I liked that better so I hit the ‘Publish’ button, swapping it out for Solo.

There’s probably a better theme in there but my goal is to get something online quick, not agonize about the possibilities.

Tip on working with the Shopify admin panel- you’ll want to have two tabs open in your browser. In one you’ll have the admin pages open and in the other you’ll have your storefront URL (it will be something like [blah].myshopify.com) You can use ctrl+tab to switch between them (on a Mac; I think it’s similar or the same on a PC).

Step 6: Customize Theme (10 min.)

Now we make changes to the theme that align it with our style guide and functional requirements. In my case, all I did was change the typefaces and link, background color, and upload the logo. I tried using the secondary typeface (Garamond) for the Heading Font, but it looked off so I canned it.

I did have to play with image size to things to look right. For example, the logo file I made was too big and one of the product photos was too big. Here’s an online tool that works pretty well for resizing images: picresize.

Step 7: Add Supporting Pages (30 min.)

The site as it is right now does a good job of presenting the product for sale. Revisiting the user stories we created above, we’ve assumed that site visitors will arrive with questions about vertical gardening and how to use the Grovert (Bright Green’s vertical planter system).

I think I can cover this with some content from the current Bright Green site. I’ll organize it under two primary headings/pages: ‘Ideas’ and ‘How To’. In the ‘Pages’ menu, you can create and edit new pages (next we’ll organize them on the site). You can see the edit view below. Shopify presents an editor where you can visually edit text, images, and video:

Once I get those pages in place, I use the ‘Navigation’ menu to put them where I want on the primary menu (and make a couple of other minor adjustments):

I estimated 30 minutes for this but, of course, that’s going to vary with the amount you want to do and what kind of existing assets you have. In my case it actually took 10 minutes because most of the material was on the Bright Green site already. My advice here is: a) make sure you use the stories above to focus what you’re going to do (and later test it) and b) err on the side of doing less vs. more at this point.

In Conclusion

That’s it! Shopify has their own commerce setup for credit cards, etc. I didn’t test or look into that (my site’s on ‘test mode’ so no cards are actually charged) but my understanding from poking around online is that it’s fine for starters.

If this was a real startup, at this point I’d drive some traffic to the site and see if I had any takers.

Supplemental Resources

If you want more depth on parts of this, here are some ideas on additional resources.

I’d like to learn more about how to personify my customer and use that to drive my activity.	Here’s a tutorial: Personas & Problem Scenarios. That same page has links to workshops you can do as well.
How do I organize my next steps? How do I figure out if it’s working or not?	This is what the Lean Startup movement is about- framing your new venture as an experiment, and driving to a conclusion about whether to revise it or scale it. Here’s a tutorial on that: Your Lean Startup.
I’d like to better understand the use of ‘stories’ as an input to development.	Here’s a tutorial: Your Best Agile User Story.
I’d like to understand more about how to set up analytics for this.	Shopify has their own analytics. I didn’t spend a lot of time with them, but they looked fine for starters. Personally, I also like Google Analytics for general purpose and tools like Mouseflow and Clicky which create videos of user activity on the site- a good way to get a glimpse into what users are doing.
I’m still struggling to get things the way I want on Shopify.	I’d Google and check out the Shopify help notes. They also have their own ‘experts’ marketplace where you can hire rated developers and designers.