This case study outlines the process of retrofitting the Eastern Virginia Medical School's desktop site to improve its mobile experience, addressing various challenges faced due to the site's extensive content and layout. The strategy included careful planning, user-friendly design, and thorough testing to ensure a seamless transition without disrupting the desktop site. Key recommendations emphasize assessing whether to retrofit or redesign, cataloging complex pages, and adapting the deployment process to enhance usability.

1. Responsive Retrofit
Turning a rigid desktop site into a great mobile experience

2. Eastern Virginia Medical School
A case study
1. Background
2. Strategy
3. Process
4. Design
5. Deployment

3. iFactory
A focus on higher education
Strategy
UX
Design
Development
Social media

4. EVMS
A school of medicine and
health professions founded
by the community, for the
community

5. Background

6. Current Site

7. Challenges
5000 pages on public site
3000 pages on portal
23 page layouts on public site
34 page layouts on portal
70+ departments
120+ content contributors

8. This won’t hurt one bit

9. Strategy

10. 1
Retrofit or redesign?

11. 2
Users shouldn’t suspect
the site was retrofitted

12. 3
No disruption to desktop site

13. Process

14. Step 1: Catalog

15. Step 2: Mockups

16. Step 3: Functional Spec

17. Step 4: Static HTML

18. Design

19. High Resolution Images

20. Touch-friendly Links

21. Navigation

22. Carousels

23. Portal: Right Column

24. Deployment

25. Inserting T4 tags

26. Rigorous testing

27. Moving to production

28. Ongoing challenge:
Tables & Images

29. Tips
1. Should you retrofit or redesign?
2. Catalog your messiest pages
3. Work out your design in mockups and HTML
4. Adapt to organic site usage
5. Use hands-on deployment as a
learning resource

30. Thank You
Facebook iFactoryBoston EVMSedu
Twitter @iFactoryBoston @EVMSedu