Managing a Responsive Design Website Redesign Project August 1, 2012 eduWeb Digital Summit Rebekah Godshall, Director of Project Management, NewCity The typical waterfall approach to website redesigns falls short when redesigning a site with responsive design. Learn to develop and manage a more agile process.

1. Managing a Responsive
Design Redesign Project
Rebekah Godshall
Director of Project
Management, NewCity
Photos by David Poteet

3. Responsive Design
We’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.

4. What
web 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

5. Why
the 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

6. When
difficult 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

7. Who Forming Your Project Team

8. Team Organization
small, dedicated team
working in the same location
collaborative types who enjoy working in a team
environment

9. User Experience
Architect
focuses on optimizing the
experience of the user
trained in
•interface design
•information architecture

10. Graphic Designer
responsible for the look
and feel of the site
trained in
•graphic design

11. Web Developer
transforms design files
into templates browsers
can interpret
trained in
•html/css
•javascript
•media queries and new css
techniques necessary for

12. How The Project Process

13. Project Phases
Research and Strategy
User Experience Planning
Design
Development

14. Research and Strategy

15. Research Methods & Techniques
Focus Groups
KJ Sessions
Stakeholder Interviews
Audience Interviews
Site Audit
Baseline Usability Testing

16. Mobile
Strategy

17. The Myth of Mobile Context
Mobile 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

18. 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 //
LukeWroblewski."MobileContextRevisited." http://www.lukew.com/ff/entry.asp?1333

19. Implications
The 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.

21. 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."

22. 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 andTheir
Parents."

23. 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."

24. So, How To Begin?

36. 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.

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

38. Start With What Is Familiar

39. Put Your Website on a Diet

40. Embracing Constraints
Small screen sizes forces you to prioritize.
Slow connections and limited data plans require you
to be vigilant about performance.
"One eyeball, one thumb"

41. 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.

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

43. Start With What Is Familiar

44. Design Reviews
Discuss and test the developers’ design
recommendations.
Review, design, build and repeat.
This closes the gap between traditional “design” and
“development” cycles.

45. Get to the real thing quickly
Developers 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.

46. Designing in the Browser
1. Start with the wrapper.
2. Define how the layouts will change.
3. Address individual content blocks.

47. START WITH THE WRAPPER
DESIGNING IN THE BROWSER

53. DEFINE HOW LAYOUTS WILL
CHANGE
DESIGNING IN THE BROWSER

59. ADDRESS INDIVIDUAL
CONTENT BLOCKS
DESIGNING IN THE BROWSER

63. Timeline and Budget Impact
redesign 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

64. 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.

65. A Couple More Lessons Learned
Team 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.