homepage design slam bbcon 2015

22
Homepage Design Slam PRESENTED BY LACEY KRUGER, PRINCIPAL INFORMATION ARCHITECT MICHAEL CHANG, CREATIVE DIRECTOR

Upload: lacey-kruger

Post on 15-Feb-2017

197 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Homepage Design Slam bbCon 2015

Homepage Design Slam PRESENTED BY LACEY KRUGER, PRINCIPAL INFORMATION ARCHITECT MICHAEL CHANG, CREATIVE DIRECTOR

Page 2: Homepage Design Slam bbCon 2015

Who we are

Michael Chang, Creative Director •  Creative strategist and senior visual designer •  Clients include Make-A-Wish, Easter Seals, Kent State University,

National Multiple Sclerosis Society, Children’s Hospital of Colorado •  Best-in-Class Awards from Interactive Media Awards for

Common Cause and Feeding America websites •  4 years at Blackbaud/Convio •  [email protected]

Lacey Kruger, Principal Information Architect •  User Experience designer and researcher •  Clients include Feeding America, Central Park Conservancy,

Jewish National Fund •  Speaker: IA Summit, BIG Design, bbcon, Convio Summit •  10 years at Blackbaud/Convio •  [email protected]

Page 3: Homepage Design Slam bbCon 2015

Back to the future

3 #bbcon

Page 4: Homepage Design Slam bbCon 2015

Responsive design?

4 #bbcon

Source: http://responsivedesign.ca/examples/the-boston-globe-a-newspaper-for-the-21st-century

Page 5: Homepage Design Slam bbCon 2015

Trend #1: The “fold” is fake

5 #bbcon

Data: Random sample of 25 million user sessions from across the web. Source: Chartbeat Blog: “Scroll behavior across the web” http://bit.ly/1h8LiQ5

Page 6: Homepage Design Slam bbCon 2015

Trend #1: The “fold” is fake

6 #bbcon

Data: Random sample of 25 million user sessions from across the web. Source: Chartbeat Blog: “Scroll behavior across the web” http://bit.ly/1h8LiQ5

Page 7: Homepage Design Slam bbCon 2015

Trend #1: The “fold” is fake

7 #bbcon

Source: Conversion Rate Experts: “Does optimization ever end? How we grew Crazy Egg’s conversion rate by 363%” http://bit.ly/1kH9bS6

Page 8: Homepage Design Slam bbCon 2015

Trend #1: The “fold” is fake

8 #bbcon

Page 9: Homepage Design Slam bbCon 2015

Trend #2: Ditch the carousel •  Bullets

•  Second level •  Third level

9 #bbcon

Page 10: Homepage Design Slam bbCon 2015

Trend #2: Ditch the carousel •  Bullets

•  Second level •  Third level

10 #bbcon

Page 11: Homepage Design Slam bbCon 2015

Trend #2: Ditch the carousel •  Bullets

•  Second level •  Third level

11 #bbcon

Page 12: Homepage Design Slam bbCon 2015

Trend #3: Rethink the hamburger menu

12 #bbcon

Page 13: Homepage Design Slam bbCon 2015

Trend #3: Rethink the hamburger menu

13 #bbcon

Page 14: Homepage Design Slam bbCon 2015

Trend #3: Rethink the hamburger menu

14 #bbcon

Page 15: Homepage Design Slam bbCon 2015

Trend #3: Rethink the hamburger menu

15 #bbcon

Page 16: Homepage Design Slam bbCon 2015

Trend #4: Use the space you can’t see

16 #bbcon

Page 17: Homepage Design Slam bbCon 2015

Trend #4: Use the space you can’t see

17 #bbcon

Page 18: Homepage Design Slam bbCon 2015

Trend #4: Use the space you can’t see

18 #bbcon

Page 19: Homepage Design Slam bbCon 2015

Trend #5: Test and optimize

19 #bbcon

Test Question: Where would you click on this Web page to sign up for email? Success rate: 75% 114 total responses Up to 4 paths available to click Average response time: 37 seconds

Page 20: Homepage Design Slam bbCon 2015

Trend #5: Test and optimize

20 #bbcon

Page 21: Homepage Design Slam bbCon 2015

We Can Help!

•  Grab a business card up front. •  Email us at [email protected] and [email protected] •  Learn more at http://bit.ly/1NXWcub

21 #bbcon

Page 22: Homepage Design Slam bbCon 2015

Volunteers? Please be respectful and nice. The timer rules.