With approximately 350,000 monthly views,the Richmond Public Library's (RPL) website is the main vehicle for sharing information and showcasing the library's services to its community and the world. However, the site's previous major update took place 10 years ago. The site has grown organically to contain more than 700 pages of content. Yet, many people using the site couldn't believe the website had more than 20 to 30 pages. There is a major discrepancy between the library users' perception of the website and the website itself.
RPL needs a new website. As the user experience designer of RPL, I am tasked with the responsibility of redesigning the library's official site.
Step 1 | Engage & Communicate
The first challenge that needs addressing in this project is the issue of stakeholder buy-in.
UX design practices are still relatively new in the public library world. To foster staff engagement and organizational wide understanding of user-centred design practices, I carried out informational presentations, interviews and casual chatters on the topic of user experience design. Not only did these activities help increase staff members' comfort level with what I'm going to do, I also gained the opportunity to learn about the various roles library staff played in using and maintaining the website.
As a result, I was able to integrate lean design process into the existing work processes at the library and successfully generated buy-in from all the stakeholders.
Step 2 | Research & Analyze
I need to have a comprehensive understanding of the existing website's technical structure, content structure, and content management before the re-design. To do this I studied the website's source code, conducted an information architectural analysis and produced a sitemap and a content inventory.
I also carried out preliminary competitor analysis and research by studying other public and academic library websites, retail bookseller websites and existing library statistics (library circulation, program attendance, and public consultation results).
At the end of the research phase, I created a project plan proposal that recommended tackling the website redesign one section at a time, starting with the most highly utilized sections. The redesign of each website section can be viewed as a sub-project. Each sub-project will go through the following iterative process: content design (IA) > wireframing > user testing > stakeholder feedback > prototyping & visual > user testing > stakeholder feedback > official launch > user feedback gathering > additional improvements.
Step 3 | Design & Wireframe - Validate & Test
The design of each sub-section begins with content design. I make decisions about what content to add, remove or retain based on Google Analytics stats, user demographic research, and competitor analysis. The outcome of the content design stage is a new sitemap and a new content inventory that outlines:
- what content will be included on each page of the new site
- who the content owner of each section will be, and
- how frequent each section needs to be updated.
Once I finish content design, I begin creating wireframes in Axure. Wireframes are used to determine the appropriate layout of content and any additional functionalities required.
In this step, I work closely with the developers to determine the technical requirement that is involved in creating the design structures I envision.
After I finish creating my first wireframe draft, I use Axure to make the wireframes interactive. Then I conduct 5 to 8 rapid (guerilla) usability tests that are 20 - 30 minutes in length inside the library. The data collected are qualitative data and I note any difficulties the test participant may have encountered while interacting with the wireframe prototype. At the end of this stage, I will adjust my design based on my findings.
Step 4 | Prototype & Implement - Validate & Test
Once the wireframes are finalized after a review meeting with the website sub-section's key stakeholders, the project reaches the development stage. First, I break down the design into development tasks. Then, I enter the tasks into JIRA and assign them to the developers.
The front-end developer is in charge of developing a fully functional prototype based on the wireframes. We collaborate to envision a look and feel consistent with our existing library's brand. Because the library has plans for a complete rebranding once the website redesign is complete, we aim for a simple and clean style that will be easy to swap out at a later date.
During the development phase, I am in charge of collecting new content, importing existing content to new CMS, and gathering graphical assets. Then I will fill the newly created web pages with the content I gather. Once all the pages and key functionalities of the section are in place I conduct the second round of rapid usability testing with appropriate library patrons.
Any issues discovered in this 2nd round of usability test are tracked. After making design modifications I send the issues to the developers again through JIRA. When all the issues have been addressed, another review meeting with the key stakeholders is held. This meeting marks the official approval to the launch of the redesigned sub-section.
Step 5 | Track Feedback & Analytics
In conjunction with the website's launch, feedback forms are setup to gather user's thoughts on the new design. I also monitor the web traffic of the new section closely and note any fluctuations or decreases in traffic.
This is an ongoing task. Even when the next sub-section's redesign project starts I will still continue to monitor the traffic and feedback of previous sections. This ensures that any issue caused by incorrect assumptions or design decisions can be addressed quickly.
Six out of 7 website subsections have been re-designed by the time I moved to a different company. Our re-design project had increased the average monthly web traffic of the new sub-sections' landing pages by 40% (Google Analytics statistics) through improved website layout, usability, and content strategy. We also reduced the website’s average bounce rate from 47.21% to 21.32% with more intuitive and user-friendly designs.
Website URL: http://rpl.yourlibrary.ca