You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web

You’ve Only Got Two Eyeballs:

Designing Products for the Responsive Web

@abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation

Part one of a workshop by Drew Bridewell + David Sherwin

Hello. We work on Lynda.com at LinkedIn.

@abridewell + @changeorder • #rwpd • HOW Design Live

Our product helps people learn business, technology and creative skills to achieve their personal, academic and professional goals.

Mobile + tablet appsiOS Android Windows 8

OSX Windows

Apple TV Roku

TV appsDesktop apps

Anytime, anywhere learning via our apps


Mobile + tablet web

Anytime, anywhere learning in the browser


Desktop web Large display + multi-screen use

11:30 AM–12:15 PM

Modular Design Approaches for Responsive Web Products

10:15 AM–11:00 AM

Prioritizing Features for Responsive Web Products


This workshop is about planning the creation of responsive web products

Part 1



Responsive web design is…when you resize your browser window and the website does this cool thing where it changes the layout



Responsive web design is…when you resize your browser window and the website does this cool thing where it changes the layout

Responsive web design is…


Fluid grid, flexibile images, media queries (a la Ethan Marcotte)

Responsive web design is…


But it’s more than technical considerations

Fluid grid, flexibile images, media queries (a la Ethan Marcotte)

Responsive Design Fundamentals • Responsive Web Design in the Browser • Creating a Responsive Web Design • Advanced Techniques in Responsive Web Design • Responsive SVG Images • Responsive Web Design with Bootstrap and Dreamweaver • Creating a Responsive Design with Edge Reflow • Responsive Images • Building Responsive Forms • Design Aesthetics for Web Design • Building a Responsive Single-Page Design • Creating a Responsive Web Experience • And many more…

Sure, we have 35+ courses on responsive web design



But our courses don’t always talk about the hard tradeoffs that happen when you plan and design web applications on select Internet-connected devices.

Course pagefrom 2014

Our design process

Content Strategy

Project Goals Feature Prioritization

Information Architecture

Iterative Prototyping & Testing

Engineering & QA A/B Testing


Content Strategy






Project goals


1. Increased access via mobile, tablet, and large-screen devices 2. Improved usability and accessibility for members 3. Easier updates for new features and experimentation Overall, preserve engagement and learning efficacy.

Designing for scale

Millions of learners and thousands of organizations around the world 7,000+ courses and 100,000’s of videos in five languages New interactive learning features like quizzes and code practice


Content Strategy






Lynda.com Course


Lynda.com Course Understand

Apply


Plan

Lynda.com Course

Navigate courseRead course overviewAdd to playlistSee related courses

Watch videoRead transcriptWrite notes

Download exercise filesParticipate in quizzesPractice in coding window


Understand

Apply

Plan

Navigate courseRead course overviewAdd to playlistSee related courses

Watch videoRead transcriptWrite notes

Download exercise filesParticipate in quizzesPractice in coding window

Prioritizing responsive web features across devices


Yes YesYes YesYes YesYes Yes

Yes YesYes YesYes Yes

Yes YesYes YesYes Yes

XL Desktop Desktop Tablet Smartphone

Yes YesYes YesYes YesYes Yes

Yes YesNo NoNo No

No NoYes NoNo No

Understand

Apply

Plan

Where will people expect to access content? How frequently? With what session duration?

What information will people require? Is most relevant in that context? In what chunks?

What functionality should people use? Will be hard to use on smaller screens? Require an app?


Features

Content

Context

Questions to ask your team

Activity 1

Feature Prioritization Bingo


Find a partnerTake 2 minutes to get to know each other. You’re a team.


10-Second Film FestivalA client has approached you with an idea perfect for people with short attention spans: An online competition for the best 10-second videos created by independent filmmakers.


Your challenge:

Each feature costs a certain amount to implement for each breakpoint. And your team only has $100. In the next 15 minutes, work with your partner to debate and decide what features you want to build, and on what devices.


Designing Products for the Responsive Web: Feature Prioritization BingoYour team has $100 to spend on design and development for your 10-Second Film Festival website. With your partner, figure out how

you want to spend your money. What features do you want to support, and on what devices? Why did you make those choices?

©2016 Drew Bridewell & David Sherwin / LinkedIn / @abridewell + @changeorder

Upload videos to enter festival

Watch video entries on website

Search video entries on website

Vote on video entries on website

Share videos from website

Comment on video entries

Browse video entries by category

Save favorite video entries to view later


$3

$3

$3

$3

$3

$3

$3

$3

$5

$5

$5

$5

$5

$5

$5

$5

$7

$7

$7

$7

$7

$7

$7

$7

$10

$10

$10

$10

$10

$10

$10

$10

Total Cost Per Feature

Total Cost for App

$

$

$

$

$

$

$

$

$

Debate which featureshave the most valuefor your users.














$3

$3

$3

$3

$3

$3

$3

$3

$5

$5

$5

$5

$5

$5

$5

$5

$7

$7

$7

$7

$7

$7

$7

$7

$10

$10

$10

$10

$10

$10

$10

$10


Total Cost for App

$

$

$

$

$

$

$

$

$















$3

$3

$3

$3

$3

$3

$3

$3

$5

$5

$5

$5

$5

$5

$5

$5

$7

$7

$7

$7

$7

$7

$7

$7

$10

$10

$10

$10

$10

$10

$10

$10


Total Cost for App

$

$

$

$

$

$

$

$

$



CONSTRAINT

Every feature you decide to include for the app must support the XL Desktop breakpoint.

CONSTRAINT


CONSTRAINT


CONSTRAINT

Every feature you decide to include must support the XL Desktop breakpoint.













$3

$3

$3

$3

$3

$3

$3

$3

$5

$5

$5

$5

$5

$5

$5

$5

$7

$7

$7

$7

$7

$7

$7

$7

$10

$10

$10

$10

$10

$10

$10

$10


Total Cost for App

$

$

$

$

$

$

$

$

$

18



CONSTRAINT


CONSTRAINT


CONSTRAINT


CONSTRAINT














$3

$3

$3

$3

$3

$3

$3

$3

$5

$5

$5

$5

$5

$5

$5

$5

$7

$7

$7

$7

$7

$7

$7

$7

$10

$10

$10

$10

$10

$10

$10

$10


Total Cost for App

$

$

$

$

$

$

$

$

$

18

8

Identify the tradeoffs.



CONSTRAINT


CONSTRAINT


CONSTRAINT


CONSTRAINT


Share with another team


Show them your worksheet and the prioritization decisions you made. Take only 2 minutes per team.

Great job, everyone!





See you back here at 11:30 sharp for Part 2!




Part two of a workshop by Drew Bridewell + David Sherwin


10:15 AM–11:00 AM

[second phase - 11:30-12:15]

11:30 AM–12:15 PM


Modular Design Approaches for Responsive Web Products

This workshop is about planning the creation of responsive web products

Part 2

Modular Design Approachesfor Responsive Web Products


Content Strategy






Now that you’ve prioritized your features, it’s time to define your grid…



2:02 / 5:16

Contents Notebook

2:02 / 5:16

Contents Notebook

Contents Notebook

Create prototypes on the grid


2:02 / 5:16

Certain features will not live on all screens


2:02 / 5:16

Notes Code Practice

Transcript

Exercise Files

t

Y

X

X

X

Y

Y

Test horizontal and vertical breakpoints for your content


Course page modules and patterns on Lynda.com


Activity 2

“All at Once” Design


Get back with your team.Snag your Feature Prioritization worksheet from Part 1.If you just joined us, find a team to work with.


10-Second Film FestivalA client has approached you with an idea perfect for people with short attention spans: An online competition for the best 10-second videos created by independent filmmakers.


Using your feature prioritization from Activity 1, create a design for the home page of your 10-Second Film Festival web site.You have 20 minutes to create this design for browsers on desktop, tablet, and smartphone.


Check off what features you’ll be including on your home page for each device.

Designing Products for the Responsive Web Based on the features you “bought” in the previous activity, sketch how those features

should appear on the home page for your 10-Second Film Festival website.










My paper prototype for Desktop will include:


Block off where you think features will go on ALL the devices before you start sketching.

(The video player aspect ratio is the primary constraint.)















browse

watch

browse

vote

upload

comment













browse

watch

browse

vote

upload

comment

Give your team a fist bump!


Course pagefrom 2014

New design


You’ve only got two eyeballs.


Keep people focused.

Thanks for joining us!

©2016 LinkedIn Corporation

Drew Bridewell [email protected] @abridewell

David Sherwin [email protected] @changeorder

mailto:[email protected]?subject=

mailto:[email protected]