Managing a Responsive Design Redesign Project

Rebekah GodshallDirector of Project Management, NewCity

Photos by David Poteet

Responsive DesignWe’ll discuss the HOW and the WHO of responsive design:

the complexities responsive design adds

how to develop a more agile process

how to support a cross-functional team

For more on the WHAT, WHY and WHEN of responsive design, I have materials available.

Whatweb pages that respond to different devices

delivers quality experience to desktop computers, netbooks, tablets, and mobile phones

using new css techniques, fluid grids, flexible images, and media queries

Whythe proliferation of smart phones

high level of continuity between different devices

designing for mobile requires focus, prioritization that improve user experience

may not require updates to function on new devices

Whendifficult to retrofit an existing design, best to start from scratch

most appropriate when continuity between different devices is a priority for users

does not constitute a mobile strategy: separate mobile sites and mobile apps may also be needed to satisfy user needs

Who Forming Your Project Team

Team Organizationsmall, dedicated team

working in the same location

collaborative types who enjoy working in a team environment

User Experience Architect

focuses on optimizing the experience of the user

trained in •interface design

•information architecture

Graphic Designerresponsible for the look and feel of the site

trained in •graphic design

Web Developertransforms design files into templates browsers can interpret

trained in •html/css

•javascript

•media queries and new css techniques necessary for

How The Project Process

Project PhasesResearch and Strategy

User Experience Planning

Design

Development

Research and Strategy

Research Methods & TechniquesFocus Groups

KJ Sessions

Stakeholder Interviews

Audience Interviews

Site Audit

Baseline Usability Testing

Mobile Strategy

The Myth of Mobile ContextMobile users are always distracted, in a rush

Mobile users really only need location information.

That’s not a feature we should include because she’s on mobile.

–  Luke  Wroblewski

Where are people using mobile devices?84% at home

80% during miscellaneous downtime throughout the day

76% waiting in lines for appointments

69% while shopping

64% at work

62% while watching TV (alt. study claims 84%)

47% during commute in to work

READ MORE // Luke Wroblewski. "Mobile Context Revisited." http://www.lukew.com/ff/entry.asp?1333

ImplicationsThe device does not necessarily imply a context (stationary or mobile).

There is a misconception that mobile users want different things from your product than desktop users do.

Responsive design offers a high level of continuity between different devices.

With responsive design you only need to develop, manage and maintain one site and one content silo.

Most Valuable Content For Mobile

1. Academic program listing

2. Cost/scholarship calculators

3. A calendar of important dates and deadlines

4. Specific details about academic programs

5. An application process summary

6. Online application forms

READ MORE // Noel-Levitz. (Feb 2012). "The Mobile Browsing Behaviors and Expectations of College-Bound High School Students."

Desktops: First Link They Look For

1. Academic programs

2. Enrollment and admissions information

3. Cost

4. Scholarships

5. Other information

6. Student life information

7. Financial Aid

READ MORE // Noel-Levitz. (Feb 2011). "The Online Expectations of Prospective College Students and Their Parents."

52%  of  students  have  looked  at  a  campus  Web  site  on  a  mobile  device.  (Up  from  26%  in  2011.)    –  Noel-­‐Levitz.  (Feb  2012).  "The  Mobile  Browsing  Behaviors  and  ExpectaHons  of  College-­‐Bound  High  School  Students."  

So, How To Begin?

Our Working Agreement

We will create only as many artifacts as are necessary to communicate the idea.

We will design on a grid.

We will keep all of the designs as close to the desktop design as possible to •maintain the high level of continuity that responsive design

offers

•minimize necessary reviews and approvals by the customer.

User Experience PlanningStart with what is familiar. Put your website on a diet. Know when enough is enough.

Start With What Is Familiar

Put Your Website on a Diet

Embracing ConstraintsSmall screen sizes forces you to prioritize.

Slow connections and limited data plans require you to be vigilant about performance.

"One eyeball, one thumb"

Know When Enough is Enough

Communicate just enough to the client, designers, and developers.

Trust the rest of the team.

For us, “enough” was wireframes for the desktop versions of each template.

Design and DevelopmentStart with what is familiar. Have regular design reviews. Get to the real thing quickly.

Start With What Is Familiar

Design ReviewsDiscuss and test the developers’ design recommendations.

Review, design, build and repeat.

This closes the gap between traditional “design” and “development” cycles.

Get to the real thing quicklyDevelopers act as ux designers, too, designing in the browser.

Close the communication gap across the project team.

Communicate to stakeholders how the responsive design will work.

Design within the constraints of the real medium.

Designing in the Browser1. Start with the wrapper.

2. Define how the layouts will change.

3. Address individual content blocks.

START WITH THE WRAPPER

DESIGNING IN THE BROWSER

DEFINE HOW LAYOUTS WILL CHANGE

DESIGNING IN THE BROWSER

ADDRESS INDIVIDUAL CONTENT BLOCKS

DESIGNING IN THE BROWSER

Timeline and Budget Impactredesign takes 20-30% longer—and ‘costs’ 20-30% more—than a desktop-only site

reduces ongoing maintenance costs

comparable to implementing a modest stand-alone mobile site

major milestones are unchanged, but a few new waypoints are added

bulk of time increase was in development

Implications for the Project Manager

Change makes people uncomfortable.

UX and Design may feel they are losing control.

Developers may feel overwhelmed by increased responsibilities.

Requires a high degree of trust.

As a manager, my role was to encourage, support, and promote conversation.

A Couple More Lessons LearnedTeam members report being pleased with how much they learned about their teammates’ disciplines. This cross-training was a natural outcome of the process.

Because the design at each breakpoint was so similar to the desktop design, the customer did not feel a loss of control despite not reviewing and approving each design.