LANDING PAGE
Helping users navigate on arrival
My Role
UI Designer
Art Direction
John Lepak
My Output
UI Design
After Effects prototyping
BACKGROUND
Encouraging engagement
The advertising campaign included a full takeover of the Union Square subway station. The landing page was designed to invite exploration for people who had seen the advertising and wanted to know more.
AFFORDANCES
Giving the right clues
While the evocative typography delivering a strong statement of purpose provided a point of entry, a key feature of the page was the media content. So a big part of the job was to make clear to to the user that tapping on one of the thumbnails would launch the additional content.
The final design, shown here, indicates the multimedia as the user scrolls up with their thumb.
PROCESS
Testing and Sharing
In order to quickly get ideas in front of stakeholders and the developers, I created a number of mockups in After Effects.
The first thought was to have video stills emerge over the text long enough to be enticing but not so long as to be in the way. But the user had no control over when the video prompts appeared.
Alternative
Another option was to indicate what is available to the user as soon as the page loads. But this felt more like an interruption than an affordance.
Alternative
Another plan was to have a little bit of video play as the user touches the clickable area. But stakeholders felt this was too subtle.