1 of 26

Slide Notes

Complete website redesigns can be lumbering, costly, and impractical. Worse, they can leave your users' needs unmet for months or years during that long cycle before launch.

Continuous iterative improvements and frequent feedback can help keep your site fresh and meeting user needs.

Come see how UCSF Library has applied this kind of successive evolution to keep pace with changing priorities and user expectations while making user experience a cornerstone.

Redesign Your Website in 4,000 Easy Steps

Published at Nov 18, 2015
Complete website redesigns can be lumbering, costly, and impractical. Worse, they can leave your users' needs unmet for months or years during that long cycle before launch. Continuous iterative improvements and frequent feedback can help keep your site fresh and meeting user needs.

PRESENTATION OUTLINE

REDESIGN YOUR WEBSITE

    Complete website redesigns can be lumbering, costly, and impractical. Worse, they can leave your users' needs unmet for months or years during that long cycle before launch.

    Continuous iterative improvements and frequent feedback can help keep your site fresh and meeting user needs.

    Come see how UCSF Library has applied this kind of successive evolution to keep pace with changing priorities and user expectations while making user experience a cornerstone.
    Photo by chexee

    UCSF Library Parnassus Campus

    UCCSC • August 4, 2014
    Audience:
    - graduate students only
    - health sciences only
    - faculty and researchers

    Tips shared today are applicable in any setting though.

    Conference site https://uccsc.ucsf.edu/

    Photo by Hourann Bosci http://commons.wikimedia.org/wiki/File:UCSF_Medical_Center_and_Sutro_Tower_in_2008.jpg

    WEBSITE REDESIGNS

      Collective wisdom has dictated that most websites undergo a redesign about every 3 years.

      Dependencies?

        The argument has always been that dependencies require total overhaul (e.g. architecture, design, navigation, content, infrastructure, etc.)
        Photo by Brandon Koger

        RESOURCE Intensive

          But a complete redesign is no small undertaking, and it requires a lot of time, money, and people.

          Entypo pictograms by Daniel Bruce — www.entypo.com

          EVERY PENNY COUNTS

            That can be tough to rationalize in academic settings or in lean budget years when every penny counts.
            Photo by terrypresley

            While you're busy redesigning...

              Website redesigns can take more than a year of effort -- or longer if you have limited resources.

              In the meantime, your live site languishes and users are forced to make do until your next big release.
              Photo by Texas.713

              Almost 6 YEARS AGO

                It was time for us to do something. Not only was a total redesign impractical -- we realized it might not be the best approach anyway.

                Photo credit: http://seriouslyforreal.com/seriously-for-real/17-things-you-probably-didnt-know-about-the-wizard-of-oz/

                One piece at a time

                  Instead, we planned to tackle smaller improvements and updates on an ongoing basis rather than planning a big relaunch.

                  Fail early and often

                    Pushing smaller updates more often also exposes negative outcomes more quickly, allowing you to learn from mistakes and make adjustments.
                    Photo by ajagendorf25

                    Don't Build to Obsolescence

                      Frequent iterations also give you the opportunity to re-evaluate priorities frequently.

                      Don't commit to building something so large and complete that it's obsolete before you finish.

                      KEEP PACE WITH USER EXPECTATIONS
                      Photo by mugley

                      guiding principles set the direction

                        Guiding principles ensure that the Library site provides an optimal user experience.

                        These may see obvious, but setting them down really has been helpful in making our case to others, and in serving as a rudder for site improvements.

                        full description: http://wiki.library.ucsf.edu/display/LWP/Purpose+and+Guiding+Principles
                        Principles inspired by those used at Duke University Libraries

                        Tools: user feedback

                        Heatmaps, Interviews, Google Analytics, User Testing
                        Getting user feedback does not require a team of experts and a usability lab. We've gathered useful feedback in several ways including heatmaps, interviews, Google Analytics, and brief user tests.

                        REMEMBER: Regular is more important than comprehensive.

                        Before...

                        At the start of this process a few months ago...

                        AFTER

                        First changes included stripping out repeating background image and a few other items that got little use (and were not missed.)

                        Sometimes better to ask forgiveness than permission.

                        Before...

                        AFTER

                        The next round of small changes included:

                        - re-organize and rename menus based on how USERS approach the site rather than how the staff thinks about it
                        - streamline and focus to Popular Links (all high use) rather than a confusing mixed bag that included things we wanted to promote.
                        - lower right now highlights a featured guide rather than being a mostly unclicked catch-all area

                        Before...

                        AFTER

                        Most recent changes:

                        - move menus and make them less button-like
                        - move the much used hours information up to the top of the page for quick access
                        - add links to header for other high use areas: Study Spaces and Ask Us

                        Before...

                        Improvements to an internal page.

                        Before: Let's cram as many links as possible on the page and make it all about who WE are.

                        AFTER

                        After:

                        - more visual, less text
                        - less emphasis on describing the department and more on the user and the things they do most often

                        Response?

                          Mostly positive so far, but we have used negative feedback as a way to quickly adjust or roll back things that weren't working.

                          Really important and helpful to talk to staff members that have a lot of direct contact with users. Great insights.

                          Photo by Reuver http://www.flickr.com/photos/reuver/10105949326/

                          wireframes, mock-ups, prototypes 

                          Wireframes, mock-ups, and live prototypes were all helpful in getting reaction to our ideas and adjusting accordingly before making them live

                          Lessons Learned

                            We've only been using this approach for a few months now, but we already have learned some things.

                            1. Be transparent and talk to staff throughout process.

                            2. Get users and staff used to the fact that the site is not static but ever-evolving like the rest of the web.

                            3. This approach has proved to be more efficient and effective than a full redesign.
                            Photo by Cian Ginty

                            Conclusions

                              1. We will continue cycles of user feedback and iteration -- it works!

                              2. This approach better serves users

                              3. The occasional platform migration or overall graphic design update will be easier easier when content and function are already in good shape.
                              Photo by Novowyr

                              Thank You

                              • Thank you
                              Michele Mizejewski, Web Initiatives Lead, @mmizejewski

                              Rich Trott, Director, Center for Knowledge Management, @trott