Redesigning the AlphaSheets landing page.Josh Pitzalis
After our initial conversations, I understood that you are looking for a 'sleek and to the point' landing page for Alphasheets. The goal was to rethink the current gestalt so that your landing page conveys an easy to use, efficient, and powerful yet flexible product.
Based on your brief, the example websites you gave me, and the redesign that you did not like, I propose the following design direction.
Given the logical nature and technical purpose of the product, I propose we focus the theme of the redesign around the visual idea of 'Structure'.
I have done this in three ways:
- I have used a faded background image that uses the imagery of molcular structures. I have only used one image so that this is not overstated, the idea is to suggest structure rather than chemistry.
- The second way I have done this is by using molecular bond diagrams as the icons for the three features. Again, subtle and consistent with the theme.
- The last, and most prominent, way I have incorporated the idea of structure into the visual theme is with a structured, angular typface for the dispay font. I have balanced this with a serious Source Sans Pro for the body typeface so that the content is clear, professional and easy to read.
One of the main reasons I picked this direction for the theme is because you explained that your target audience is Python/R enterprise programmers who collaborate with spreadsheet analysts. The product and the people who use it are left brain dominant, so I kept bright colours and flourises to a minimum and focused on a more masculine, structured, logical tone.
I have used a clean, minimal design to communicate ease of use and efficiency, while a clear palette and a strong, modern typeface helps communicate power.
I chose a monochromatic blue palatte. Colour psychology suggests that blue has strong cultural connotations to intellectual products, products that center around logic and/or communications. Colour psychology also suggests that blue communicates trust, efficiency, and logic.
Whether or not any of this is true, I wanted to use a cool colour (so greens, purles or blues) rather than a warmer palette. Hoever I wanted to keep things serious and professional so I went for a darker tone, one that gets darker as you scroll down.
The reason I went with a high contrast, monochromatic palatte is to avoid potential problems with people that have colour blindness.
From the left, first is people who can see no colour at all (this is very rare), then red colour blindness (this is the most common), then blue colour blindess and finally green.
There is not much variation between views since the design relies on a single column of text. There are some changes to the way the features stack on top of each other and the pricing table and the mobile view.
I didn't want to lock you into using the image I picked out for the redesign (in the center), I have found another image to the left and I also wanted to show that the design works with no image whatsoever.
You asked for a seperate pricing page. Below on the left is a stand-alone pricing page, and on the right is what the landing page will then look like without any pricing. After a lot of back and forth, I recommend keeping the pricing in the landing page because I feel it adds credibility to the design.
I wanted to give you the option to have a contact button (center) instead of having your contact email spelt out in the footer (right). A third option would be to embed a form in the footer. There is no need to build a backend to handle form submissions, we could just use something simple like formspree.io to handle communication.
You also asked for a nondescript download page for alphasheets based on sublime 3's download page.
- I have added an FAQ to the page and answered four generic questions. This is entirely optional but I proposed it because a micro FAQ's is a great way to reassure people, build credibility, and address common concerns without forcing people to make the effort to write to you.
- I wanted to weight the page down with some credibility marker because I didn't have reviews and testimonials to work with. If you have reviews and press mentions we could add them instead or as well.
- I have used contrast and size to make the call-to-action buttons obvious from 20 steps away from the computer screen. This leaves the option to add colour if needed but doesn't rely on it. I have also suggested a more decisive wording options that we can try out.
- I also played around with the logo and wanted to present a bolder, symetrical design to match the new look. I realise you did not ask me to do this, there is no reason to use it, but I wanted to show it to you incase you like it.
Costs and Timeline
The cost of designing a one page proposal is $500. This has been paid and there are no additional costs associated with this project.
If you would like to make design changes or if you would like me to spend some time developing the logo (or any other graphic elements), I would be happy to at my current hourly rate, which is $30 an hour.
If you would like me to code the proposed design, I can do so on an hourly basis. I don't think it would take more than 5-6 hours to code and style the two pages proposed. I can deliver the code in a private github repo and then transfer ownership to you.
Please take as long as you need to think through the proposal and let me knwo if there are any chnages you woudl like me to make. If you would prefer, we can talk on a skype call at a time that works for you at some point in the coming week. I am currently +5:30 GMT.
Please let me know if you have any questions or concerns about the direction I have taken, or if I have misunderstood anything. If anything was unclear, just email me and I will respond as soon as possible. I hope you enjoyed the proposal and thank you for giving me the opportunity to work on this.
Joshua Pittman Pitzalis