Designing a landing page, a behind the scenes look on planning through to execution

Here is a useful guide where I will step you through my thinking and the process I used for designing a new landing page. It's for my upcoming masterclass, which oddly enough is called ‘Process’. It’s a sneak peek and a behind the scenes look on how I approach my work. Because much of what you see out there is usually just the visuals with no context, or the total opposite where it is all theory and no application. This hopefully merges the two worlds together for you too see all in one place. The importance of creating something beautiful but also something that has purpose, clear goals and is effective. You can use this as a reference and framework for your own landing pages or site design. Having a solid process gives your work a clear vision and helps you validate your ideas. If you need to communicate this to others it’s much easier to refer back to your notes. Such as to a client or to a team member. It helps to have a high level vision so when you do get to the details, you don’t have a myopic view of the project and can see where everything fits in to the big picture.

1. Objectives and user insight

It is the planning phase where we will define our objectives and gain insight into who our users are, how we can service them and what our goals are for the project. Think of it as our North Star when we are creating our work. If we ever get lost just look at the North Star to guide us and ensure that we are on the correct path. 

For more articles like these and access to all my favourite inspiration/resources/articles that shape my work as a designer. Join the Verse family

1. First we need to set some goals and objectives for our project.

But not just vague goals, goals that are SMART. So what does a SMART goal mean? No it's not Albert Einstein kicking a soccer ball into the net. Although that would be pretty rad.  SMART goals are goals that are:

Specific - Goals need to be specific enough so we can identify exactly what we need to work on. 

Measurable - Goals need to be measurable so we can benchmark our progress. 

Achievable - Goals need to be achievable. We want to aim high but still be within reach. 

Relevant - Goals should be relevant and inline with with what we have set out to achieve. 

Time-bound - Goals should be time bound so we can benchmark and validate our progress. 

NOTE: not all goals have to be SMART. Some can be purely qualitative as well. SMART goals provide insight into predominantly short term results however I am a big believer in the intangibles. Like building real lasting relationships with our users for example. That is long term thinking, like building a good friendship. You help each other out because you give a shit about each other and have each others backs. That stuff is not immediately evident and hard to gauge but it’s super important. The best mix I find is 75% smart goals and 25% that are more intangible.

Here are some examples for your reference that I used for the Process landing page. 

Overall goals for the project. 

  • Bring traffic to the landing page - 100,000 unique visitors in 1.5 months from launch date.

  • Get email addresses for those that are interested and those that you can actually provide value to. Go for relevance and quality not just volume. Aim for 2000+ signups in 1.5 months from launch date. Which is a conservative conversion rate of 2%. 

  • Bring awareness to the Verse brand and increase blog traffic by 50%. 

  • Let the user quickly identify what the Process Masterclass class is and identify if the class is for them. Pique users interest. 

  • Explain the benefits to the user in an engaging manner. 

  • Validate with users who I am and my body of work. 

  • Have some fun and make cool shit

TIP: So for your next project try incorporating some SMART goals into you work. It'll make you look smart to your colleagues and clients ;)

Now that we have the objectives. We try to reverse engineer these results with our process and design. Every once in a while checking in if what we are doing is getting us closer to achieving any one of these goals, once again using this as our North Star.

2. Who are our users

Next is to understand who our users are. In order to delight our users we must understand who they are first. Their motivations and needs that they have.

Primary

The key audiences for my masterclass are designers of varying positions with different motivations. 

Creative Directors

At agencies there is usually an education fund that is assigned for yearly or monthly spending for staff development. Usually through the purchases of books, workshops and going to design conferences. The masterclass is such a resource. It will teach designers how to think objectively and to execute visually. Learn about grids, layouts, typography and more. Also it is fun peek behind the curtain to see how other designers you admire (hopefully haha) work. It is a good resource that they'll be able to share with their team as well. A fresh perspective is a good perspective. 

Senior - Mid Weight Designers

These are the designers that are eager to keep building their skill set. Passionate designers who have been in the game for a little while and are looking for inspiration and new ideas. They are consuming books, blogs, design sites as a source of inspiration. This group has similar motivations to above and can be potentially working with the Creative Directors too. They could be a key motivator in getting this course for their office. 

Freelance Designers

These designers are looking to see how they they can take their business to the next level.  What are some of the strategies used by someone who charges a higher rate for their work? And what are the processes that they employ? Gain insight into closing that pricing gap and learn some new tips and ideas along the way. 

Design Students - Juniors

This is going to be a big investment for this group. They are essentially investing as a means to kickstart their career, use this as a crash course and get a sneak peek on the processes of someone's work they like or hope to emulate one day. (Once again hopefully haha!) And someone who has been in the game a while and has a some experience to share.

It's also important to sometimes identify who this is not for. It can make the vision and messaging crystal clear in our minds so we don't fall into the trap of trying to cater to everybody. This is not a course for the general population who are just trying to learn how to use photoshop. Or looking to recreate a specific effect or visual style ala +tutsplus. 

Secondary

These are the secondary users who we'll also need to indirectly cater for but in a different way. 

Ecommerce startups

These are scrappy startups that care about good design but are bootstrapped and have limited budget. This is for phase 2 as I plan to release the UI Kit that we create in the class as a standalone product.

High quality Design Market channels.

I am also looking to release the UI kit on high quality design marketplaces too that I admire. This landing page will serve as validation for that product. And potentially offer the course through these channels too if they allow. 

Currently looking at Market.designmodo and UI8 from creative dash. I'm sure there are a myriad of others that I will research down the track.

 

Users level of engagement  

Next we have a think about the users who will be visiting the site and their level of engagement, what do we need to offer in order to reach the objectives we set out.

 

High engagement users

  • Know about Verse

  • Know about my work

  • Is part of the community

What do we need to communicate and offer?

  • A way to register for the course - email signup

  • A quick overview of what is offered in the masterclass and how it can benefit them

  • Offer something of value to them upfront - a sample psd of the course

 

Medium engagement users

  • Seen my work around on Dribbble, Behance, Pinterest, Designspiration etc.

  • Never been to Verse

What do we need to communicate and offer?

  • A quick overview of what is offered in the masterclass and how it can benefit them

  • A way to register for the course - email signup

  • Offer something of value to them upfront - a sample psd of the course

  • Direct them to Verse blog 

 

Low engagement users

  • Is a passer by and have no idea who I am and what this course is.

What do we need to communicate and offer?

  • A quick overview of what is offered in the masterclass and how it can benefit them

  • A way to register for the course - email signup

  • Offer something of value to them upfront - a sample psd of the course

  • Direct them to Verse blog 

  • Validate who you are as a person and a designer - link to your body of work. 

 

There is a term called lead magnets in marketing. I don’t really like the term but I can’t deny it’s effectiveness. It really just comes down to psychology and human behaviour. When someone offers you something of value for free, by the laws of reciprocity, we can’t help but innately feel obliged to return the favour. So by adding a sample course .psd in exchange for the users time and email that favour will be reciprocated. That is one of the key incentives to join the list. 

TIP: If you have a signup form on your landing page, consider offering something of value to your users.

As you can see the less engaged the user is the more we need to communicate with them. If you walked up to a random stranger and asked them to marry you 99.99% of the time they would say no! Even if you looked like a doppelgänger of *insert model or celebrity name here*. The reason being is that they don't know you. So even if your design is visually beautiful you need great copy and a myriad of other touch points so that you can build that relationship. The user can get to know you and what your brand stands for. 

 

So what will we need to satisfy the goals of our user and our objectives

  • An email form so that they can sign up. 

  • Details or examples about the masterclass - demonstrated through video, text, visual design or imagery. 

  • Explain to users that they will learn about the execution of projects from a fresh perspective. Working with grids, typography, layouts and how to tackle different challenges. 

  • How it can boost their value as a designer, they will learn more and will be able to charge more. Through understanding how to validate ideas, how to communicate to clients and explain design decisions.

  • Nice visual design and typography. Demonstrate a solid design that uses all the principles mentioned. (It will not satisfy everyones aesthetic and design principles. It is for those who resonate with your body of work) 

  • Tell an authentic story. Be yourself and communicate the vibe of the course. 

  • Showcase your work and who you are for validation. 

 

The user stories

User stories are similar to the above except they are more specific and act as more of a functional requirement. However the key difference is the focus is on what the user wants vs. just on what the technical requirement are. 

  • As a user I want to sign up via email because I want to be notified of the course launch. 

  • As a user I want to enter my email address. 

  • As a user I want to click submit to confirm my subscription.

  • As a user I want to see if my email address has successfully subscribed.

  • As a user I want to know if an error has occurred.

  • As a user I want to learn more about the masterclass.

  • As a user I want to learn more about the author.

  • As a user I want to read the authors bio.

  • As a user I want to see snippets of the authors work.

  • As a user I want to be able to check the authors social links.

  • As a user I want to share this page with others on Facebook.

  • As a user I want to share this on Twitter. 

  • As a user I want to see some course examples to make up my mind. 

You can even do one better than me by being even more specific, so replace as a user with a specific target audience such as: As a Creative Director I want to... [because....]. But for the purpose of this project the above delivers on what it needs to do. And that's the basic planning phase over.

TIP: Consider using user stories as it can help you take your focus away from what you need to do internally to what you need to offer your users. It's particularly good for discussion with clients. 

2. EXECUTE

Next is to execute on our plan. This is where we get in the trenches, get dirty and exercise our craft. Because we have done the necessary planning and ground work we can hit the ground running and it's my favourite part of the process. Exploring different ideas and getting behind the tools. This is the “play” phase. 

Where I get ideas from usually varies by project. Sometimes I just look at the goals over and over and then write some notes down on what could work. Other times I just open up photoshop or Axure and jam some things out and get the input of others.  Here's what I did for this project. 

 

1. Research and Discovery

Steal like crazy. 

Design patterns. Things that work. Things I like the look of that could be relevant to the project. Save them all as a reference. Keep checking back as you work through your project. Use it to kick start ideas. I just chuck them all in a folder and share with the client if I think it’s relevant. You are standing on the shoulders of people who have come before you. Do your best to honour their work and take the essence of their brilliance and make it your own.

For this project I had a clear visual direction already. So I didn’t really search for any of the visual stuff. What I did want to look for was effective landing pages of other people who I admire and have launched successful products. 

http://howtheygotthere.com/  by Khoi Vinh

I bought this book and I think it’s really fantastic. So this landing page really worked on me. I am familiar with Khois work and what he did at the New York Times. So the relationship was already built and I saw him as an expert. I particularly like the about section at the bottom, the simplicity of the site and the way the information flows. 

https://seanwes.com/learn/  by Sean McCabe

I’ve learnt a ton from the great content that Sean publishes and whilst I can appreciate the art of lettering I can't say that I am a practitioner myself. But one day I will definitely return the favour to him in one way or another. Much like psychology and the law of reciprocity. Anyway what I liked about Seans landing page is the tone. It feels very direct and one on one. It's super detailed and the testimonials are great, which I can potentially also add down the track. 

http://nathanbarry.com/webapps/ by Nathan Barry

Nathan's copy probably resonates with me the most. Professional yet friendly and casual. This is the tone of voice that I want - because it will also be reflective of the Masterclass. Which I want to setup in a way where it feels like friend teaching another friend about some cool shit that they've learnt along the way. I want the work to feel authentic. One of the core principles of Verse. 

Now that I had some references and did some basic research I went straight to the ideas phase. 

These are just vague thoughts that pop into my mind and that I scribble down. They probably won’t even mean much but here they are. 

1. Keyboard with hand and video as I type ‘Process’.

2. Macbook pro comp that I created to shatter and merge together.

3. Just big type in sentence form to say how it can benefit you ala Don Draper style in mad men. Super simple open letter.

4. Do multiple landing pages and see which one converts the best. Most launches just have 1 landing page right? With slight variations for A/B testing. I was thinking doing full blown different ones.

So now that we've done our research and discovery it's time to move on to the structure and interactions.

 

2. Structure and Interactions

Think about the page structure and all the user interactions and components that are needed to achieve the goals that have been defined. We can even prototype things from this phase and power through each step. Work and Co. employ this methodology where the fidelity of the prototypes are just fine enough to drive the conversations with their clients. No presentations just prototypes. I love this approach.

I tend to just scribble notes into my notebook of how I think the site structure could work. If it was a formalised process I would have done wireframes in axure or photoshop. But for this I had a rough idea in my mind. I knew I wanted it to be a one pager like the sites I referenced above. So I opened up photoshop had my goals and the users in mind and started roughly designing out the layout and page. Everything was really rough, like when you first sketch the details of a drawing. And go back and ink the lines later. Slowly I would refine the layers a bit more. But once I had nailed down a rough flow jumped straight into the visual. So this stage was done concurrently with the design phase. The flow was as follows:

1.Introduce the course to user - have a sign up form.

2. Explain to user the key benefits and what they will get out of the course.

3. Explain the different audience groups that the course caters to.

4. A detailed example and visual of one of the lesson screens.

5. The final mission statement and purpose.

6. One last signup.

7. A bio to validate who I am.

8. And finally a link back to this very Case Study. Boom inception!

Note: The structure of the site definitely changed as I was designing and came up with better ideas so there was still a lot of back and forth. I think there needs to be flexibility with processes because great ideas don't happen in a linear fashion, and the beauty of working on your own project is I can go back and change it. That was one of the pitfalls of working on long agency projects, it was hard to inject even better ideas into the work once it started rolling. Of course it's a fine line to tread because you don't want scope creep but I definitely believe in being flexible. That's probably why I like startups because you can innovate quickly!

So by now we have our North Star and road map which are our objectives and user insights. So we know where we are heading because we have our research, ideas and structure. Now we just need the plans for the vehicle that is the visual side of things. 

 

3. Visual

I started with my usual grid system and canvas. 1920px canvas and 12 column grid system 1175px and 12px baseline. If you'd like can read more about grid systems and exercises here.  I decided to carry through with the same type choices and keep it inline with the Verse brand. And continued with the use of Chronicle Display and Gotham. 

Define 1 piece and extrude out the design. 

I have this philosophy where I start with 1 detail, in this case the typography and once I'm happy with that detail I kind of extrude out all the other details and build everything around that 1 key visual. So my base canvas was something like this.  

I was happy with where it was heading. From here I knew I wanted to add a screenshot of one of the course screens so the user could see immediately what kind of output the course offered. I played with about 5 different variations then ended up with this. I also had a version where it was balanced with 2 laptops on each side but it was overkill. I also humoured the idea of video in the background, but that would've taken too long to shoot. 

Not a bad starting point but I wasn't 100% on it yet. It's too heavily left balanced and felt like it could be a bit more dynamic somehow. 

Boom now we're getting somewhere. I was getting happy with this. But I knew that I didn't have the rights to the macbook image. So I recreated something similar with vector shapes so that I could use it for the landing page. As a designer I think it's important to have versatility in what you can do. My designs today are about simplicity and reduction. I don't do this to be trendy, it's just been a natural progression of my career. But when I need to get detailed I can also do this. In this case recreate a MacBook. Remember I'm the guy who started doing forum signatures at the very beginning "Mooaarr was always better haha" 

Concurrently to this I was designing the rest of the landing page as well. I created a card stack that showcased a few screens from the masterclass. And I extruded out this core idea to showcase to the user what the masterclass offered in detail. I came up with a few layout options. But these two were the ones that made the cut. 

In the end the final comp I came up was this. 

But was it the final version? Nope. By this point I'd gone through quite a few quick iterations. But I decided to refocus on what I really set out to achieve, referred back to my notes and core objectives and decided to redo everything because I believed I could make it even more effective. In both designs each segment had a purpose set out during our outcomes and user insight phase. 

So after noodling around I decided to incorporate more of my earlier ideas. Things that this version does better than the first version I believe — is that it communicates how the course can help the user better than the first version as well as what the course entails. There is also more of an element of surprise and interactivity to delight the user, which could mean it might get shared more. Everything just felt cleaner, clearer and more crisp. 

So now we have our North Star, the roadmap and the vehicle plans. Now we just need to build the vehicle and drive our way to success.  

4. Build

And finally after all that pixel perfect work of well layered psd/sketch files, none of that means squat. Because the way most people will interact with our work is on the outputted product itself, once it’s been developed and built. And if we get sloppy here all that work getting it right was for nothing. Because in a live environment this is how your users are going to experience it. Not by opening up photoshop or sketch and looking at your pretty ‘pixel perfect’ creation. It will be on their desktops, phones and various devices. So involve the people who are going to build this vision of yours, they are as much a part of the vision as everything else. The site is currently in production and will be up very soon, I will update this space when it happens. I thought it’d be interesting to involve the Verse community before the product even goes out!

I talk a lot about getting things right. But it should also be noted. Done is better than perfect. Sure get something to as good as you can get it. But if fixing that last 1% takes up the same amount of time as doing 99% of everything else I'd rather just launch it. Even if it as much 10% I would just ship it and continually refine the end product progressively. Nothing is ever truly finished, it is just complete in this very instance. The digital space changes continually, so should the products that we create.

Special Note: You don’t always have to formalise your ideas and thinking. Sometimes it’s good to experiment and just get feedback from the live product. Unexpected and awesome things can happen that way. However when you are stuck and things are not working organically it is fundamentally sound to have a process and a methodology that you can work worth to help you proceed with your project. And set it up for the best chance of success as possible. 

Also I presented information here so that you could learn about my process, but it is merely a framework for you to build upon. Please note that information here has been presented in a linear format so it's easier for you to digest and understand, but for a lot of projects there is a lot of back and forth. And a lot of steps are happening concurrently. Going from point A to C to B and then back to refining A. Which was also the case for this project, making the process more like this. 

Image by Vincent Frost from http://designyourlife.com.au/

But even amongst all that back and forth, there is still a process and a list of requirements that I continually think of. Particularly that North Star of ours, what is all this for?

3. REVISE AND ITERATE

This is the phase where we launch our landing page and get immediate feedback from users. Revision and iterations are the key to successful sites and products in my opinion.  

When I get the project live, I can get feedback directly from the people that matter the most, the users. I will see how it all gets received and make changes accordingly. Our end product is not perfect because even with as much testing and prototyping we've done in the end you will learn the most from putting it in the live environment. Gauge how our users are using the site and get as much feedback as possible. Did you reach the SMART goals you set out to achieve? Are our users happy? Then we go back to define our strategy again and keep working on improving the design. 

I also have a plan in place for phase 2 of the landing page. And that is to add an FAQs to the page down the track, and to add the pricing. I’m still debating if I will do pre-orders or not but I will see based on the feedback that I get. 

Anyway that was the whole process I really hope that that was insightful and you learnt something out of this. It was a bugger to write and edit it, but this community has been awesome so I wanted to give you a detailed look thanks to all the great feedback I've had. Thanks again for your time. 

And here is a lead magnet to get a simple overview of all the steps. Nah fuck lead magnets haha! Here it is just for download as .pdf and .docx. I normally just use google docs for this. Get it here

Edit: The course is now live, learn more processes like these and much more. Increase your value as a designer. Join the Process Masterclass