Step by step: A new homepage design and build in one day
Last week I set myself a challenge. To design and build a new homepage for my side project, Good Garms, in one day. Then I live-tweeted every step. Here’s the process I went through.
8 min
10:18 AM
📣 I’m challenging myself to launch a new homepage for Good Garms. Plus I'm going to tweet every step of the process
The deadline I've set is… today.
So I should probably get started. It’s 10.18am in Copenhagen. The clock's ticking…
10:20 AM
So what actually is Good Garms?
- A project me and my partner work on, on the side
- A platform to discover 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 info:
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:
- You land on the product, straight into the browsing experience
- 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:
Help people have a better first-time experience
→ Provide more answers than questions so people understnad what it's about
More controlled brand story
→ Help people understand if it’s for them
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:
- 950 uniques a month
- 6% of people go through to an external product
- 65% bounce rate
- 35% 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 help with 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 look at some of the content in Notion.
For once I actually want to take a content-first approach.
11:30 AM
A few different angles we could focus on with the messaging:
- Curation → many brands brought together
- Convenience → save time with researching
- Good conscience → helping the environment/climate change
- Handpicked → artisan or craft approach
- Charitable → 5% or revenue goes to charity
11:33 AM
Not sure which of these we *should* focus on just yet.
What do you think?
11:38 AM
With this challenge I was inspired by inspired by @ImSamThompson and @JoshLachkovic.
Both of them ran a similar challenge to release new product ideas.
12:12 AM
Some quick options for the hero headline:
Using Notion for these — Which option are you feeling?
- Curated. Sustainable. Essentials.
- Find sustainable clothes without hours of research
- It’s how you find sustainable essentials
- Great quality clothes that don’t sacrifice the environment or the people that made them
- Handpicked sustainable essentials
- Your ethical wardrobe essentials
- Put together your ethical wardrobe
- Find sustainable basics in minutes
- Shop sustainably and have a clear conscience
- The easy way to find sustainable essentials
12:37 AM
Some examples for the sub heading:
- Find the best sustainable clothes in one place. We do the research, so you don’t have to.
- Shop for sustainable essentials with a clear conscience. The best clothes, in one place.
- Cut through the greenwashing. Find your favourite sustainable essentials in minutes.
- We put the best sustainable brands front and centre. Clothes that look great and last the test of time.
- Find great quality clothes that don’t sacrifice the environment or the people that made them.
- With your values in mind, browse and find your favourite sustainable essentials in minutes.
- 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 first pass at most of the content — not quite all yet.
Quickly drawing out some more rough layouts, the detail gradually fades the further I go…
1:41 PM
So this is the peak of the ‘design’ stage…
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)
2:05 PM
Getting some basics into Webflow.
- I’ve created a new page called Shop that will be found at /shop
- I’ll move the content of the current homepage to /shop
- Then I’ll move the new homepage content to Home
3:11 PM
Some progress with the site build!
I've published a rough, upadted version to staging.
Lots of work-in-progress and placeholder content, and lots to tidy up. But the main building blocks are in place.
3:13 PM
A quick shout out to @relume_io!
They're doing some really cool stuff in the Webflow space. And have publisehd a load of great cloneables.
That's how the animation in the header section is possible 💯
3:37 PM
Hooked up the ‘just added’ section to the CMS — it'll update as I add new garments.
→ Then limit items to 4→ And sort created on date by new to old
I want to make this horizontally scrollable. And show 10–12 items across. This can be a nice to have if I have time.
7:32 PM
I went deep into a Webflow hole. And I also overrided a load of classes used in other places. Fun… 😬
Now we’re back on track and making progress — but there is a lot still to do.
Have a look and let me know if you have any feedback ✌️
7:38 PM
Still todo:
- Tidy how it works
- Add in other frequently asked questions
- Link in the articles
- Highlight some better testimonials from other places
- Swap shop page and the content on home
- Give it all some love
9:40 PM
Aight, going to wrap up for the day — I’m wiped!
Didn’t get it live just yet, but we’re getting close.
I'll finish off the last things tomorrow and keep this thread updated. Make sure to follow along.
10:57 AM
Good morning, good morning 👋
Following on from where we left off — let’s get it live!
I want to look at the frequently asked questions— do any questions come into your head as you look through the website?
Whatever it might me. Then I'll plan to write some short answers and add them to the site.
12:45 PM
A few updates — we’re getting closer!
- One better testimonial (others soon)
- Marquee bars to highlight brand values
- Products in the hero are clickable
- How it works section is in with screenshots
- Work for mobile, and general tidying throughout
12:58 PM
📣 I want your feedback!
- What are your thoughts?
- What's missing?
- What is not clear?
- What could I improve?
- Any bugs you see?
→ https://www.goodgarms.com/shop
1:01 PM
Have seen this weird image sizing at small mobile sizes.
Don't know how to fix it really — guess it’s something to do with flexbox?
1:03 PM
Expected worse Lighthouse scores to be honest.
Many animated elements and I've not spent long optimising images. Try to make these scores at least green.
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 we've gone live!
Thanks for joining me — and for all your input and feedback along the way.
That was super fun.
Have a look → Good Garms