Published on | Prototyping: From UX to Front End — Medium Pedro Cortés

I bet you have seen other articles with tips on how to optimize a Landing Page but since putting things into practice is always harder than it seems I will show you how to apply principles that seem obvious at times but the execution and the adaptation to each case are the keys to a successful result.

End Result (preview)

1. Studying the Startup and Product

This is probably the most important part of the entire process and to be honest, I can tell you that this is too often overlooked or not done the properly. Studying what the startup is all about and setting clear customer profiles and goals to follow is super important because every Design decision should be done accordingly, if this is not clear we could be doing unnecessary iterations, missing the goal entirely or spending too much time adapting to the wrong kind of feedback, it’s all about making the rest of the process effective.

Company values — When you think of some companies’ values you really need to be able to make a clear and short list (less than 10 words) of what the company is about and this will help you understand what to do to promote that image the company and the product.

Companies’ future plans — This is about finding out what the current situation is and what the founders would like it to be in the future, the design should still represent well the product as it grows.

Product to offer-Let’s found out what the product is, who is its target customer and how you can find ways to present the product effectively.

How it wants to be perceived– this is about finding out what the real value the product is providing and figure out what we want people to relate to the product and to make them understand it’s valued.

User Profiles– This an example of how User Profiles would help to estimate the most important needs of the users and therefore find ways we could provide the best solutions to them. Depending on what industry you are in this list might vary but these are the essential points you need to keep in mind when doing user profiles.

· Occupation-Most of our users are self-employed or students looking to organize their tasks.

· Age– It ranges from college students (18–25) and young entrepreneurs (25–35).

· Why the user needs the product-Our users’ lives are very busy and it can be overwhelming to track the number of things that need to be done, the product is both useful to reduce the stress of being overwhelming and improve productivity.

· What the user would like to see improved/needs not fulfilled-There’s no way to check the list of tasks in calendar form in order to visualize future tasks more effectively.

· Identify their most important needs-Easy of use, multi-platform support and be able to collaborate with other people on projects.

Set goals and priorities — After all this studying we need to set what things are more important about the product and what we want people to do as an end goal, to sign up, to buy a product or to sign up for a newsletter. In this case signing up would be the goal because productivity apps need to create a habit to justify the value of the premium version so trying to convert someone to the premium version right away is not the goal.

2. Sketching phase

After all the studying it’s time to start planning ways to present the product/service effectively in order to meet the goals settled in the previous phase.

Sketching is really important as it is a way to quickly find out what works and what doesn’t while trying to figure out the visual style to go for. This is about failing fast and learning from it, failing now saves you time in the Design stage as you don’t need to redesign the entire thing all over again.

Reference– The more reference you have the more good ideas you are exposed to, after that, you can create the best solution. If you don’t get enough reference you end up not finding out about a better solution that is better than what you could come up with at the beginning. I use Pinterest to make moodboards of the best websites I come across everyday.

Saas website collection

Structure– Divide the content into sections and order them by priority this is super important to define what to give attention to in the page.

Wireframes-This is all about testing the ideas and see what works and what doesn’t, if you check the wireframes you can tell that some of the sketches weren’t the direction I went for the final Design that’s because I choose the best option from the ones I thought about.Here are some of the wireframes.

3.Design phase

This is the final stage where all the work from the previous stage comes to life, unfortunately, this is the only part we get to see most of the time but optimizing a website is not about the final result itself but how that result came to be, as each decision could be different in another scenario.

Header — The header is the first opportunity to catch people’s attention so you better have an eye-catching one and a good headline to go with it, it is also a place where you should introduce the product very briefly so it can be as effective as possible.

Feature showcase– After knowing what of your product to showcase it is time to show it and explain it in the simplest way possible, this can get boring to the eye so its important to take advantage of the Z-pattern (you will see it in the full page below).

Visual Break– It’s time to make the eye pause, the way we can achieve that is by making something that fills a good amount of space and has a different but complementary aesthetic to the rest of the page. By doing this you have an opportunity to show something important because people will very likely scroll down slower than usual as the eye can’t help to stop there.

Testimonials-Social proof is super important to create trust in something you have never seen before, you can’t expect people to want to buy something as fast as possible if they don’t have any evidence that it would create value for them. Depending on the product and what social proof you can get from your customers this section would always by slightly different but it is always good to have some of these: press coverage, testimonials, companies using them, results, statistics.

Final CTA — Now that you have done your best to explain the product and how much value it could provide to the potential customer it is now your final chance to give them a CTA (call to action) this could be to sign up,to start a trial, to buy the product etc. Use something that visually conveys the end of the page and a CTA with a lot of contrast.

Full Landing Page

Conclusion

This is a brief version of the process I normally go through to make a landing page, of course, I can’t show every little decision that went into this as there are a lot of tiny decisions that still have an impact on the Design. I hope this is was useful to identify what your website can improve on.

About me

I am Pedro, a Product Designer focusing on optimizing Business through Design, I fell in love with the psychology behind buying decisions and because of that, I want to use it to create a lot more value with my Designs. From all that I’ve learned this is only a simplified version of my thoughts.

Follow Me: Behance, Dribbble

Need help with your conversion?

Let’s talk, contact me: pdcortes98@gmail.com

The Process of creating an optimized Landing Page was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Process of creating an optimized Landing Page

Cool stuff, every week

More Articles