Daily UI Challenge Documentation: Product Landing Page

As a part of the Daily UI challenge*, I’ve decided to design and document my user interfaces. To keep a track of the thought process behind these designs. The documentations all follow a low-fidelity to high-fidelity mockup process. Where I take you through how I zeroed in on one out of the many designs I prototype for the challenge.

Daily UI #1: Landing Page

Design Brief : Designing a landing page (above the fold), for a book, album, app, or any other product. Consider important landing page elements.

I decided to design a landing page for my iOS app LookUp. And began prototyping on ideas as to how a product landing page for a mobile app should look like.

Key Elements of a landing page, that I decided to put above the fold:

1. Name of the app
2. What does it do?
3. What can ‘you’ do with it?
4. Call to action : Download / Be Notified
5. Product Shot

The Low Fidelity Mockups

I then began sketching ideas on this concept. Basically, trying to figure out, how should a landing page look, to answer these questions in an easy to read interface.

The Digital Mockups

After I had sketched a few ideas, I began exploring the designs with multiple aesthetics, and different text placements and alignments explaining the what does the app do:

All the different mockups that were tested out.

Picking up the final design

For me, ultimately the final designs had to be something that were visually appealing and where the information was most readable.

Many different prototypes were tested, but you could classify the designs into 3–4 different layouts.

I eventually decided against the shots that contained a product screenshot. The idea was that the product shot is something that the user would anyway look at, once he goes to the App Store page, I picked shots of the Word of the Day feature from the app instead, as they represented what the user would experience once they launch the app.

Left aligned text was preferred over the center aligned text, as something that spread across 2–3 small paragraphs, would be far more readable on a left aligned format. The visual styles were picked accordingly and this prototype was chosen.

However, I made one final prototype, just to test out a different concept. What if I didn’t tell the users all that information on what the app does, but just explained what they’d get out of it. The result was a much simpler version. A few minor tweaks later, this is what I came up with:

With two final prototypes at hand, I put both of them on dribbble, just to check which one’s more preferred.

Links to Dribbble Posts : 

  • * Daily UI Challenge is a mailing list at http://www.dailyui.co ; I started with the documentation from Daily UI #3, and plan to circle back on the first two once I complete with all the hundred.

Please feel free to share your thoughts and feedback on the designs and the design documentation. What would you like to read more about, how can I improve the documentations and the designs. I’d love to hear all the feedback.