Landing Page Design Process

Ideation

Inspiration:

• https://soundalerts.com/
• https://layerapps.com/
• https://sureshmurali.github.io/

I first wanted to deliver the message of the product through fancy transition so that the users won't get bored before they learn how the product works. So, I thought I should make a transition-heavy site like https://sureshmurali.github.io/.

I thought of creating scroll transitions, but that is too much. I decided to have to just be a carousel with animations that users have to click to learn all the info about the product.

I took the carousel idea from soundalerts.com to explain the problem that this tool fixes

Graphics

I don't know what graphics and background to use so I use basic shapes to get an idea of the format.

Copy

I create a quick statement explaining the value that the product gives ("prevent your emotions from slowing your progress")

I explain a problem and that this tool will solve it. Then I explain how this tool solves it.

I changed the color to closer represent what I think is the color palette of this tool. Orange because red is a part of the pgp scale but is too harsh to use and orange is a good substitute. anything green doesn't look good. I also made the font size a lot larger because layerapps and soundalerts did that and it looks nice.

I tried copying the sharp lines of the background from layerapps.com

When I did the sharp lines, I noticed there was a spot where I could add content and it would look nice so I did this

The idea is to have the scale at the bottom of the page move back and forth which would change the silhouetted image from a happy person to sad and vice versa

I am torn with the design so far. it looks nice but a part of me feels like it is not modern enough. it silhouette reminds me of the apple iPod commercial with people dancing as silhouettes (https://www.youtube.com/watch?v=_dSgBsCVpqo).

It might be the color. Or maybe the sharp lines.

Maybe changing some colors and adding a shape behind the silhouette would improve it. It looks a little better. But it's still not there yet.

It doesn't work with the scale at the bottom anymore. The colors don't work.

I'm thinking of fully removing the silhouette and keep the minimalism. Minimalism feels more modern. But this design is still not there yet. I might go back to the silhouette. I would indicate a change in mood by the change in color of the circle.

I think I got the main hero to be at a spot that I'm happy with. The circle with animate by radiating outwards and it will change color to red and green as the slider moves back and forth.

Right under the hero is going to be a carousel where I will explain motivation the comes from a positive or negative source. The text seem too large I'm not sure.

Added mobile download buttons to the hero because I feel that this tool is best used on mobile

Made the image of the first slide of the carousel to be a literal scale that weighs the motivation sources.

I'm thinking of making the image for the section below the carousel like this. But I might change it. It doesn't look right. Too... basic? I'm not sure.

Actually, I think I like it now.

Under that will be the demo of the PGP Scale. I think it should be a click-through demo where you start and click arrows to see the next thing that is automatically done for them.