When we relaunched Lexity recently, we got tremendous kudos for the new site design. ‘Sexy’, we heard. ‘Beautiful’ was a common refrain. ‘Effective’ too!
Well, we’re definitely very happy with the feedback so far – and I wanted to talk a bit about the thinking behind the rework.
When I first started fundraising for Lexity, I got sage advice to write the elevator pitch out in three different lengths –
- 3 words (or 1 line) – for a quick soundbite
- 1 paragraph – for a quick introduction at an event/party
- 3 paragraphs – to use in an email introduction
Applications to site design
When we were designing our homepage experience, we went through a similar exercise. We asked ourselves – are we creating an experience that lets everyone get to the information they need, to the depth they need it, given the time they have, and the attention span they’re likely to have?
- Satisfy the site visitor, whoever they are, and however long they spend on the site. So, someone who just has a few seconds to spare should get a quick sense for what Lexity is about, and someone who has half a hour should be able to go all the way to signing up, without friction.
- Encourage the vistor to explore further – whether they’re a potential customer, partner, or a future Lexiteer. For this, build in progressive disclosure, with the site unfolding in front of the visitor’s eyes as they spend more time with us.
- Potential & Existing Customers
- Potential & Existing Partners
- Future Lexiteers
- Future Investors
- Tech Community
- 1 second – the person has barely any time to spend on the site
- 30 seconds – the person wants to get a quick sense of what Lexity is
- 5 minute – the person wants to go in-depth, looking for information based on their interests
- 15 minutes – the person, presumably a potential customer, wants to sign up
- return visitor – the person returns to the site later on
- what they would see during that time period
- what cues we would build to encourage exploration, pushing them towards the information they were most likely to be interested in.
- Animation that starts bold but becomes more subtle as you spend more time. In fact, on successive visits, you don’t even see the big informational carousel; its work is done.
- Consistent use of color as the story of Lexity unfolds. This theme is carried on into the application itself.
- At every stage, depending on how much time you’ve spent so far, a different set of navigational cues are presented. You can always sign up, but you don’t see links to detailed info if you’re just stopping by.
- 1-5 seconds: will scan the images and get a rough pictorial sense
- 5-20 seconds: will read the headlines quickly, and get an overview
- 20-60 seconds: read the text to understand the features more
- 1-5 minutes: click on ‘read more’ to go in-depth on features they care about most.
Design your site with your audience’s attention spans in mind
Design your site for your audience, but also for the attention spans they are likely to have. You can’t control the time and engagement level of your visitors – so it’s your job to satisfy them quickly, and encourage them to explore further!
Amit
@akumar overflow 
Pingback: The ‘Coffee Break’ design philosophy: UI for Small Businesses | @akumar overflow
Insightful post. This is classic news journalism: writing a good lead, and developing the story using what they call the intreated pyramid approach. You put the important stuff first, then the next important stuff, then the next, etc.
So that a skimmer could get the meat in one paragraph, and all the details are there for someone who wants more depth.
Simple but good advice. The new site looks good.
As an aside, any reason why you have not provided subscription features on the blog for people to subscribe by RSS or email (or did I miss it ?)
Ah! now I see – maybe using “Notify me of new posts via email” while commenting is probably the way to subscribe.