Portfolio: Stanford Human-Centered AI (HAI) – Conference Mockup 2
Objective: From initial content and mockup, create some design concepts for Stanford HAI’s fall conference “Policy & AI: Four Radical Proposals for a Better Society” landing page while abide by Stanford HAI’s Identity Guidelines. And yes, I was amused, intrigued and surprised to see my first name as an acronym for “Human-Centered AI” 🙂
Original
Mockup 2 – for desktop
(click on image then the plus magnifying glass when mouse over image for full size)
Mockup 2 – for mobile
(click on image then the plus magnifying glass when mouse over image for full size)
Mockup 2 – for desktop (with animation)
Execution: Going from the top to bottom, here are my thoughts for the design of each section…
HEADER
I’ve decided to keep the header as is as it is very nice and clean in its presentation of HAI logo, dark background color (helps make the hero and body contents stand out below) and navigation links.
HERO
Going with today’s modern design trends for website, I’ve decided to utilize appropriate photography (with diversity) for the hero image. For this version , I covered the entire width with the photo. Intersection graphics (lines) are used below to enhance the visual while connecting them with HAI branding. The projector screen and podium are perfect representative images to hold the conference’s title and info. And finally, I slanted the entire hero to give it a unique look to make this page stands out from a typical hero image horizontal rectangular look. As an option, an animated version is provided and can be used to bring the webpage up to the perceived level of technological sophistication and professionalism.
BODY
For the main body, I’ve laid out a two-column grid with good white spaces around the contents for easy viewing. I’ve also added a suggested proposal submission icon illustration (designed with HAI branding in mind). Its link can go to an online form submission page so users can easily submit their proposal online without having to email it.
TWITTER POSTS
Adding the line “Join the conversation with us” as call-to-action phrase is always better than having none at all. And since these are Twitter posts, showing its logo with link to HAI Twitter webpage is appropriate and good to have.
FOOTERS
For the HAI footer, the four-column distribution of its content inside doesn’t look proportional. I spaced them out evenly and added the intersection graphics to further differentiate it from the Stanford University footer below it as having two similar looking footers at the bottom looks kind of odd. And lastly, I changed the Stanford University footer background color to its official red version for branding reasoning and also I’m really not a fan of the dull dark grey color being used there 🙂
Which design (static or with animation, this mockup or mockup 1) should we use? A/B testing could be setup between the four versions to see which one would score best for registration/proposal submission.