Step by step: A new homepage design and build in one day

10:18 AM

📣 I’m going to design and build a new homepage for Good Garms and tweet the whole process

My deadline for the new homepage is… today.

Alright, let's get started. It’s 10.18am (CET) and I’m heavily caffeinated.

Lets go 👇

10:20 AM

First, what is Good Garms?

• A side project I started with my partner
• A place to find sustainable and great quality clothes
• Multiple different brands in one place
• We are affiliates for brands — people don't purchase on our site

10:23 AM

Some useful context:

When we launched Good Garms last March, we never had a typical landing page.

When we designed Good Garms initially we were weighing up two different approaches:

1. You land on the product, straight into the browsing experience
2. We have a typical home page that directs people into the product

10:29 AM

We went with the first option and when looking back — it wasn't the right decision.

We wrongly optimised for return-use over first-time use. Which meant people don't really grasp what the site is about, so there's no strong reason to use or come back.

10:31 AM

Design-wise it came with a lot of challenges.

Fitting important information *around* the product browsing experience was far from ideal.

Plus it meant the existing homepage wasn't doing a great job for learning about Good Garms or browsing products.

10:36 AM

Some goals for the new homepage:

A more natural first-time use

→ Answer questions without making people work hard to figure out what it's about

More controlled brand story

→ People should understand if it’s for them and the benefits it gives people

10:39 AM

A focus around search engine optimisation (SEO)

→ More content to rank higher on Google and give better signposting to the rest of the site

Well designed and well put together‍

→ Being featured on design blogs has been a good source of traffic and backlinks so far.

10:45 AM

Here’s where we're starting from:

10:53 AM

A quick look at current performance:

• ~1,000 uniques a month
• ~5% of people go through to an external product
• 65% bounce rate
• 1/3rd of traffic organic

11:14 AM

A quick sketch of some sections I'll be needing

We already have the navigation and footer so that means I'm like 15% of the way there right?

11:18 AM

A couple of references I’ve found very helpful for this:

‍@mrsharma’s landing page guide and this thread about landing pages

@GoodMarketingHQ’s Marketing examples

11:21 AM

Next, I’ll take a quick pass at some of the content.

For once I actually want to start with *pretty much there* copy before I start designing.

11:30 AM

A few different angles we could lean on with the messaging:

• ‍Curation → all brands in one place‍
• Convenience → save hours of research‍
• Good conscience → the right thing for the planet‍
• Handpicked → artisan/craft vibe‍
• Charitable → we donate 5% of all revenue

11:33 AM

And to be honest I'm no sure which we *should* lean towards yet.

What are your thoughts?

11:38 AM

Also, this challenge was very much inspired by @ImSamThompson and @JoshLachkovic.

They both ran similar processes to build and launch a new venture idea ✨

12:12 AM

Some quick options for the hero headline:

What stands out most to you?

1. Curated. Sustainable. Essentials.
2. Find sustainable clothes without hours of research
3. It’s how you find sustainable essentials
4. Great quality clothes that don’t sacrifice the environment or the people that made them
5. Handpicked sustainable essentials
6. Your ethical wardrobe essentials
7. Put together your ethical wardrobe
8. Find sustainable basics in minutes
9. Shop sustainably and have a clear conscience
10. The easy way to find sustainable essentials

12:37 AM

A few examples for the subtitle:

1. Find the best sustainable clothes in one place. We do the research, so you don’t have to.
2. Shop for sustainable essentials with a clear conscience. The best clothes, in one place.
3. Cut through the greenwashing. Find your favourite sustainable essentials in minutes.
4. We put the best sustainable brands front and centre. Clothes that look great and last the test of time.
5. Find great quality clothes that don’t sacrifice the environment or the people that made them.
6. With your values in mind, browse and find your favourite sustainable essentials in minutes.
7. Find sustainable clothes, whatever your needs.

1:13 PM

Okay, we're 3 hours into the challenge. Should probably get my shit together…

Have a draft for a chunk of the content — not all — sorry writers I’ve failed you 💔

Sketching out some more detailed layouts, notice how the detail gradually fades ha…

1:41 PM

Here’s where I tell you the design stage won’t get much more sophisticated than that…

Visually, I’m happy with the brand — and I already have a lot of the base styles set up in Webflow (my tool of choice, obvs)

Here’s my public style guide.

2:05 PM

Getting some basics set up in Webflow.

1. I’ve created a new page called Shop that will be found at /shop
2. I’ll move the content of the current homepage to /shop
3. Then I’ll move the new homepage content to Home

3:11 PM

Alright, some progress with the build!

I've published a bare-bones build to staging.

Lots of rough and placeholder content, and lots to refine. But the main building blocks are in place.

3:13 PM

Also, a quick shout out to @relume_io!

They’ve done some awesome work and made a lot of it cloneables in Webflow.

Making things like the animated header section possible 💯

3:37 PM

Hooked up the ‘just added’ section to the CMS — it will update as I add new garments.

→ Then limit to show just 4 items
→ And sort by newest to oldest

I want to turn this into a slider and surface ~12 items horizontally. Will see if I have time.

‍

7:32 PM

I went deep into a Webflow hole. Including overriding a load of classes used in other places 😬

But we’re back on track and progressing — though still a fair bit to do.

Pushed some new bits to staging.

Have a look and shout with any comments ✌️

7:38 PM

Still todo:

• Finish how it works section
• Populate extra FAQs
• Add in editorial content
• Pull out some better testimonials (not from Twitter)
• Swap /shop and home content
• Give it all a healthy dose of TLC

9:40 PM

Alright, going to wrap up for the day — I’m wiped!

Didn’t quite get it live, but we’re very very close.

I will finish off the final bits tomorrow and update this thread. So follow along ✌️

10:57 AM

Morning folks! 👋

Picking up where we left off from — let’s get this thing live!

First, FAQs — what questions pop into your head as you browse through Good Garms?

It could be anything, then I’ll put together some quick responses.

12:45 PM

A few updates — we’re nearly there!

• A better testimonial (more soon)
• Horizontal scrolling bars to show values
• Products in the hero now link to the product
• How it works section is in with images
• Responsive work and general refinement throughout

12:58 PM

📣 An ask for feedback!

• What do you think?
• Is there anything missing?
• What isn’t clear?
• What could be improved?
• Any bugs?

→ https://www.goodgarms.com/shop

1:01 PM

Have seen this weird product resizing on small mobile.

Have no idea how to fix it though — guess it’s some of the flex settings?

1:03 PM

Expected worse Lighthouse scores to be honest.

Lots of animated elements and haven’t spent much time on image resizing/compression.

Will try and get these green, at least.

3:33 PM

A bit of spring cleaning to the styles and hacky work.

Added in the meta tag, meta description and open graph image.

Now swapping the page content of home and /shop and making sure all links go to the right place.

4:02 PM

Aaaaand the site is live!

Thanks for following along and for all your input along the way.

That was fun AF.

Check it out → Good Garms