Redesigning the Digital Commons Page

Recently, our team has been assisting with a new initiative to make sure documents sent in to our institutional repository (IR) are accessible. I won’t go into much detail, but since this new initiative was being launched, it was proposed to have the digital commons (our IR) page redesigned for the launch.

Old Page

The old page was really just a lot of text, and too much of it. I’m also not sure how long it had been since anyone had revised it. The biggest problem was that it was difficult to find what you wanted, especially how or where to submit a document.

Old Digital Commons Page
Old Digital Commons Page


So the first mockup was actually given to me by the group working on the IR project. While a vast improvement over the original page, I was not a fan of the quadrant look. I’m probably biased because it was overused at my last work place, but regardless, I thought I could do better.

Mockup #1
Mockup #1

One thing that didn’t make sense to me was why you would have a link to a search page instead of just building in a search on the page (same with the news). While a search box was thought of, I’m not sure how it would’ve worked into the square design. I was actually working on the Articles redesign around the same time, so I ended up using some of the ideas I had floating around in my head already.

Mockup #2
Mockup #2

The colours I used were based on the first mockup, which were in turn based on the IR site’s colours.

Redesigned Page

The redesigned page came out pretty much exactly as the mockup. However, the project members called me the day after to tell me that the green shows as a very ugly yellow if the screen or projector is not properly calibrated. So, I ended up changing the colours to our library’s colours.

Current New Digital Commons Page
Current New Digital Commons Page

Most of the text that was on the original page is now on the About page linked from this landing page. I think it’s a huge improvement, so hopefully it helps to encourage more of our users to submit things to our IR.

Revised Articles Section & New Landing Page: Using a Card Sort to Clean Up

As part of the ongoing effort to improve the website, I have been redesigning the website one section at a time. Earlier in the term, I did the Research Help section. In the last couple of weeks (that’s right, only about 2-3 weeks!), I worked on getting the ‘Articles’ section cleaned up with a new landing page.

old articles page
Old Articles Landing Page

Card Sort to Clean Up

old articles menuI knew that I wouldn’t have time to do a proper card sort study, but I decided to do a card sort with the web committee. We have enough people that I divided the committee up into two groups and gave them sticky notes with the names of the existing pages.

The sticky notes consistent all the local navigation links from the left side of the existing page and the second level links you see in the expanded part of the ‘More’ menu here (right). Then, I gave the usual instructions for a silent open card sort (no talking, group as you see fit).

While the purpose of a card sort is not to help clean up a section, it really got staff to see what fit in the Articles section and what didn’t. A lot of the pages were also deemed no longer relevant.

As a group, we made decisions on what to remove, and what to move and where. Quite a lot of the content was moved to either our subject research guides or our FAQ system.

There were one or two pages that we couldn’t decide what to do with, so for the time being they’ve been left where they are for now (e.g. RefWorks page is still in the ‘Articles’ menu though not linked on the landing page).


With the pages that were left, I created a few mockups.

The web committee met again to discuss the mockups. I already had my heart set on either #2 or #3, because the whole idea is that it’s simple and clear. Having only one search bar with just a few links give users focus on what they’re looking for. Different people had different preferences on mockups, but with some discussion, the group settled on mockup #3 with a few revisions.

Staff Feedback

As with the research help page, I posted the revised Articles mockup in the staff room to give everyone a chance to provide feedback. This time, I didn’t get any feedback that resulted in any changes, so the final page is the same as the revised version.

New Page

Even though I’m on vacation, I wanted to get the new page up before the next term, so the new ‘Articles’ landing page went up this week.

new articles page

Getting Quick Feedback: Updating the Help Page

In the past month or so, it became very evident to many of the librarians that the research help page on our site needed to be revamped. As we’ll be piloting a new “Book a Librarian” service next month, I thought it would be a good time to roll out a new help page as well.

Old Research Help Page

There were so many problems with this page, not least of which was that the page and the sidebar had the exact same links only in a different order.

We had a bit of a tight timeline, since I essentially had 3-4 weeks to make mockups, discuss it with the group, get feedback from staff and students, make the page, and get it live.

Getting Quick Feedback

Part 1: The “Committee”

It wasn’t a formal committee, but it was essentially an ad hoc working group. I presented all three mockups to the group. If the group couldn’t agree on one, then I would have taken two of the mockups to staff and students for feedback. However, since the group felt quite strongly about mockup #3, I decided to go ahead with that mockup to gather feedback.

Part 2: Asking the Students – Survey

I decided to do two versions of the mockup based on the meeting’s discussions. Mockup #4 is exactly the same as mockup #3 except with the chat widget in the middle.

Mockup #4

We taped the mockups on a movable whiteboard and offered candy as incentive. We pulled students aside as they walked past on the main floor and asked them some basic questions on:

  • how easy it is to find what they’re looking for,
  • whether they understood all the terms, and
  • which design they preferred and why.

We had decided on getting however many students we could in an hour. Since it was a quieter day, we ended up with 7 students.

Part 3: Asking the Staff – Open “Silent Forum”

In order for all staff to have a chance to provide feedback, without having to gather them all together, we decided to post the mockups in the staff room with a couple of questions to think about (similar to the student ones). Sticky note pads and a pen were left for staff to write their comments.

The Results

Of the students we asked, more of them preferred #3 with the chat on the side, because they would never use it. On the other hand, the students who preferred #4 thought the right-side chat widget would be ignored or even mistaken as an ad. Other reasons for #4 included:

  • balanced and symmetrical
  • more aesthetically pleasing
  • better division of groupings
  • helps to promote the Ask chat service

Of the staff that provided feedback, they unanimously chose #4 for many of the same reasons that students provided.

Other feedback resulted in my adding:

  • a header for the chat widget,
  • “Hours & privacy policy” link for chat widget,
  • hover behaviour for chat widget,
  • tooltip text for “TRSM”, and
  • changing the wording of “YouTube” to avoid branding.

While we could’ve gotten more feedback, I think we got enough to help improve the page and implicit confirmation that it works.

New Research Help Page


The page, along with the new “Book a Librarian” service and a revised “Research Help Services” page is set to go live on Oct 1.

We will likely also be changing the “Ask Us” logo in the header to direct to this page as opposed to the “Contact Us” page as it does now. Hopefully, it’ll help to promote our services and resources, and get people to the right place.

UBC Education Library Redesign

This is another assignment, this time from Planning and Design class. Our assignment was essentially to redesign a space. I decided to do a minimal, practical redesign for the Education Library. Although I did send the library a copy, the project reflects my personal views and was not commissioned by UBC Library, etc. (insert usual disclaimer). Finally, please note that the letter introducing the report and appendices are only available in the full report (which if you want a copy/see, you’ll have to e-mail me) as it is a long enough post already without them and the appendices include some copyrighted photos.

If you find the report too long to read, check out the presentation design board that I made instead (or do both!):

Education Library Redesign on Prezi

Purpose & Goals

This report makes recommendations for changes to the University of British Columbia (UBC) Education Library in order to provide greater access and a better environment for its users. The proposal was encouraged by the demands and comments by various users. While users are primarily Faculty of Education students (undergraduate and graduate), users include any person who walks into the library including faculty, community users, and staff. While community users frequently include alumni and working professionals, recently, there has been an increase of families with children using the library, especially on weekends, and such usage is likely to continue to increase with the expansion of housing on and near the university campus.

The propositions and goals of the redesign are based on observations and interactions with users while taking into account the constraints on staff, budget, space, and technology. Some of the common requests and complaints include:

  • not enough computer workstations,
  • lack of express use station with Internet access,
  • lack of quiet study (that is actually quiet), and
  • confusing layout of materials.

Other recommendations are based on observations rather than direct comments from users. The goals of the redesign focus on making better use of the existing space and thus, recommendations are made to fulfill the following goals:

  • create defined spaces with a clear purpose to each space within the library,
  • increase navigation, access, and use by consolidating collections,
  • maximize the use of natural lighting, and
  • meet users’ needs.


Meeting users’ needs and providing for library users are core to the vision and mission of the library. Meeting the redesign goals will assist in moving the Education library towards fulfilling the goals of the library’s strategic plan, particularly in providing excellent access, service, and an open, inclusive environment. The redesign goals are beneficial to both library patrons and staff.

  • Creating defined spaces:
    • provides a clear purpose to a space,
    • decreases amount of noise in quiet study areas, and
    • delineates which areas noise is allowed versus quiet study.
  • Increasing navigation, access, and use by consolidating collections:
    • allow for better wayfinding and greater efficiency for both patrons and staff,
    • provide a more intuitive layout to the library,
    • decrease the number of directional questions, and
    • increase use and security of resources.
  • Maximizing the use of natural lighting:
    • contributes to aesthetic,
    • has positive psychological effects,1 and
    • instills the sense of an open environment.

Overall, library users’ satisfaction and library use should both increase.

Constraints & Solutions

The recommendations have been written based on current constraints, including:

  • lack of funding,
  • minimal staff resources,
  • technology determined by central library IT, and
  • use of the existing space.

To work around these restrictions, the recommendations are based on minimizing spending and contract or outsourcing by reusing furniture and equipment where possible (see Appendix A, Budget Summary), and employing the time of staff. As well, changes of higher priority are presented, while some aspects of the library work well and should not be changed, such as:

  • carpet, shelving, and other furniture are durable, mostly wood or neutral colours, and help to absorb sound,
  • lighting, which is bright and diffused, and
  • shades are already installed to control natural lighting for times when sunlight might be too glaring or hot.

Keeping interruptions to access and services for patrons was also an important consideration in creating the recommendations.

The Redesign

Defining Spaces

The library is primarily used by students (undergraduate and graduate) to work or study individually, work or study in groups, read, eat, and socialize. It is important for students and other users to know which areas are appropriate for which activities. However, the current layout of the library confuses readers as spaces are diffused and spread out. In particular, group study areas are next to or in the same space as quiet study areas, such as in the Course Reserve Area, which has study carrels next to the copiers, and the Lower Level Area, which has workstations in study carrels in the group study area (see original floor plans in Appendix B). Noise also becomes a major issue as the upper level is open to the lower level (see Appendix B Redesigned Upper Level), thus allowing sounds from the group study area on the lower level to disturb the quiet study on the upper level. The lack of defined spaces also causes problems for staff as they cannot take action if there are complaints about patrons that are, in fact, using the space appropriately.

In order to create defined spaces of which users can understand the purpose without needing signage, similar types of furniture should be used in a single area. The Lower Level Area should have all large tables removed with only study carrels (with or without computers). Similarly, the study carrels in the Course Reserve Area and Workstations area should be removed. To encourage group work in the Workstations Area, the reference collection should be moved to make more room for group tables, and the computers currently in carrels would be on long tables and spaced, allowing multiple people to work on a single computer (see Appendix B Redesigned Upper Level). To minimize the costs of new furniture, the existing furniture can simply be moved around (see Appendix A for details). While signage can be used to assist in the use of the spaces, the type of furniture and their layout would be enough to signal to users which areas are for quiet study and which areas are for group work.

Reading areas would likewise be defined by the use of reading chairs, but would be placed next to windows in order to maximize the use of natural lighting, such as in the Journals Stairway Area and the Lower Level CCBC Area. The one major change needed is to shift the CCBC collection away from the window to allow more space for the reading chairs to create a ‘cozier’ space (see Appendix B Redesigned Lower Level). The reading areas are also purposely kept near non-circulating collections that patrons may want to read while in the library.

Consolidating Collections

In addition to creating defined spaces, consolidating collections will assist in providing a more intuitive layout for better wayfinding, navigation, access, use, and efficiency. Mainly, patrons have difficulty finding new journal issues as the display is in the Course Reserves Area, and not clearly visible, while the rest of the journals are in the upper level stacks area. It is highly recommended to move the journal display next to the journal stacks area. Furthermore, the reference and historical collections should be moved to the Course Reserve Area for greater security (behind another security gate) as well as to have all the smaller collections in a single area (see Appendix B Floor Plans). With this setup, only the books, videos, journals, and CCBC collection will be outside of the Course Reserve Area, providing a simpler layout and possibly decreasing the number of directional questions.

Increasing Access

Further to defining space and consolidating collections, other changes can be made to increase access and use to the library, its collections, and resources. For example, one of the most common concerns patrons seem to have is the number of computer workstations for use, especially for the purposes of printing. Therefore, it is recommended that one of the standing height computers be changed to an express station for printing and quick use. As well, two additional computers can be added on the Lower Level for quiet work.

One way to increase access and better navigation is to improve flow of pedestrian traffic. For example, notices are currently taped on the security gate as well as put on signs in various places. If patrons stop to read the notices, the entrance and exit may be blocked. Thus, the purchase of an announcement board is highly recommended to be placed in the small niche area next to the security gates (see Appendix A and B for details). Similarly, a book display currently sits in the niche (where patrons are unlikely to want to stop to read), another book display is currently next to computers (preventing student use of the table space), and a third book display is in a trophy case (which makes the books inaccessible). Purchasing a new book display will not only allow greater accessibility to books, but will also enhance the use of the space and encourage patrons to stop and read (see Appendix A for details).

Some areas of the library are currently also underused, but the most likely reason is because they are cluttered with furniture. To increase use and access, unused furniture should be removed, such as the locker and shelving in the Journals Stairway Area, and the extra reading chairs in the Lower Level CCBC Area (see Appendix A and B for details). Staff should also make sure not to put portable furniture, such as book carts, in patron used areas. In particular, the Journals Stairway Area is rather narrow, and though optional, it is highly recommended to change the new issues display to a slat wall display for optimal space usage, and easy access (see Appendix A for details). Ideally, users will feel welcome and comfortable using any of the spaces for reading and studying.

Implementation – User Input & Assessment

When implementing any redesign, users should have input into the recommendations as the mission and vision of the library are focused on providing for and supporting users. Current recommendations have been made based on patron feedback, however, further user input should be gathered to ensure that the redesign is aligned with users’ priorities. Different methods can be used to collect data, such as surveys, focus groups, and interviews. Considering the constraints on resources and time, surveys are recommended for easier scoring and taking up less staff time to facilitate.

Based on user input, recommendations can be added or changed to better address patrons’ needs and priorities. The study should include questions on access, use of resources, use of space, and navigation, such that a similar study can be conducted afterwards with some of the same questions to compare with pre-design answers to measure whether the goals of the project are achieved.

In addition, should the project prove to be successful, the assessment can be used as proof to administration and potential donors to the library to fund further improvements and a larger redesign project.

Possible Further Improvements

As the changes presented take current constraints into consideration, many possible further improvements are recommended in the longer term, particularly with more funding. While not an exhaustive list, possible further improvements include:

  • Purchase of new chairs that are more ergonomic with adjustable seat and height in a neutral colour, such as black, that match redesigned library branches (such as UBC Law Library) and do not distract patrons’ attention (which may be the case with the current strong colours of red and green) (see Appendix C).
  • Ensure computers, especially mice and keyboards, in the quiet study areas are near silent, and purchasing replacements if necessary (see Appendix C).
  • Paint cement walls to remove the ‘cement bunker’ feel.

Consultation will be needed for improvements that require more expert advice and analysis, such as:

  • improving temperature control,
  • minimizing noise from the stairway, and
  • improving the colour scheme.

Currently, the colour scheme uses the additive primary colours of red, green, and blue. However, design colour theory is based on the traditional red, yellow, blue subtractive primaries model.In addition, psychological primary colours suggest that red and green are antagonistic to each other and should not be used together as the human visual system does not respond well to both at the same time.3 As the library already uses a fair amount of neutral and wood colours, the existing blues can be added to with other blues to create a calm and comfortable mood.4 The resulting scheme, may look similar to the following:5
IndigoSilver Colour Scheme
Blue may also be a good choice as it is the UBC school colour. Nevertheless, the particular blues need to be carefully chosen as not to create a cold or depressing colour scheme.6

Future Outlook

Ultimately, the redesign and its goals are to assist the library in fulfilling its mission and vision. While there are many restrictions currently preventing a full redesign, many improvements can still be made to the Education Library with minimal investment. The success of the project should be measured through the use of assessment tools before and after changes, and if successful, the library can garner support from administration and donors to make further augmentations or a full redesign. The space is somewhat flexible and should be planned to accommodate changing and future user demographics and needs, particularly due to rapid growth in technology and campus housing, which may bring more families into the Education library. Thus, more planning should be completed in order to ensure alignment with the strategic plan in the years to come.

Works Cited Endnotes

Note (Sep 2018): All the links appear to be broken. The sites still work but lead to 404s.
1. Chase, C. & Hiltz, S. (2011). Lighting [Class handout]. LIBR 578, School of Library, Archival, and Information Studies, University of British Columbia, Vancouver, Canada.
2. Tuberman, L. (2008). Color theory.
3. Foster, M. (1897). A text book of physiology. California: Macmillan.
4. Chan, F. & Rocheleau, N. (2011). Colour theory [Class handout]. LIBR 578, School of Library, Archival, and Information Studies, University of British Columbia, Vancouver, Canada.
5. Indigosilver. (2011). Indigosilver2. ColorSchemer Gallery.
6. Tuberman, L. (2008). Color characteristics.

About Portal

So the About portal really was just a redesign for the most part. The process was the usual inventory of pages of the current About section (see below left), trying to put them into cateogries, then coming up with a preliminary information architecture. For this portal, we also consulted with the Communications department to ask about what else might be added.

Attempt #1
The first attempt at the redesign was to use the existing design from the Help and Services portals (see above right). If you look at the full version, you can tell that the problem with using the existing design is that there is a lot of white space since each category only has 2-4 links. Everyone, who looked at this first attempt, agreed that it just didn’t work. We concluded though that since the About portal didn’t serve the same sort of purpose as Help, Services, and Find, it would be okay to use a different design. So, it was back to the drawing board.

Attempt #2
When thinking about how we might do another design, one of the ideas was to somehow bring the University Librarian’s message back to the foreground. We essentially ended up with the layout of the old design, just with the set of links organized in the new way. This didn’t work either since the navigation of the portal was essentially lost.

Attempt #3
Finally, I thought perhaps we could go with a simpler design. I looked at a bunch of other sites (library and otherwise) to see how they dealt with the layout and organization of their About sections. Based on those layouts and suggestions from others, we came up with the current design.

screenshot of current about
New About

The new About design uses the same organization as in the first version, but simply lays out all the links underneath a heading. It also has the first two paragraphs of the university librarian’s message, where if you click on the title, you will see the full message. We agreed that this was a nice balance between the first and second attempts.

Contact Us page
Most pages/posts were simply moved over, but all were in agreement that the Contact Us page needed a redesign. So, a redesign it was. We felt that the old page had too many links (all users who saw this page during the usability test said as much), especially since a lot of these links exist elsewhere on the site (namely on the Services Portal) and the front page as well in many cases. A couple of the forms were merged or updated to par down the number of links further.

Migration of all the pages have been done and everything has been setup, but since the Newsletters were moved into Issuu, issues were embedded to posts (which worked fine), but then didn’t show up on aggregated pages (the embedded object would just be stripped out). Styling has yet to be done as well. Hopefully it’ll be live soon though.

Launch of Help

So with the launch of help today, it will mean a redesigned section of the website. The key things we were going for:

  • clean & easy to read
  • consistent look & feel
  • standardizing some of the content
  • organization that makes sense to users
  • providing a design that gives a primary, secondary, and tertiary focus

This was the original main page, which was just a bunch of links which were not very well organized after the years of simply adding things compared to the new main page.

We took out the “Ask Us” from the main navigation bar and put it in a site wide side button, which many new sites are doing with feedback buttons. We also took out a mouse over menu from the main navigation bar that was a user guide type of page depending on the patron’s role (“Services for You”).

We moved those onto the Help page as well and linked to new versions with more or less the same content, but with some of it standardized and with a common look and tab navigation.

I like it and thinks it looks way better than before. Plus I think it’ll help our users find stuff!

EDIT: We received a lot of positive feedback! Yay!