Group 1: Design For Others
Our group was tasked with redesigning a website for a mobile device. We tailored the experience towards a specific demographic within the age range of 75–85 with an average computer and browsing literacy. Considering the needs and preferences of our target audience, we decided to convert the website for the Worcester Public Library (WPL). We suspected that members of an elderly community are more likely to engage with libraries than the other local organization options including WCTI and Technocopia. Individuals of this demographic are typically familiar with physical text and thus prefer consuming content contained in books, magazines, and forms of traditional media. Non-digital literature is easily accessible at libraries, which qualifies this location to be well-suited for elders. Due to limited exposure and disinterest in recent technological advancements, seniors favor comfortable activities such as reading over enduring a shift in the way they obtain information.
In the preliminary planning phase of the project, we discussed specific pages from the WPL website that are most appealing to our demographic. We first identified the primary desires of our consumers. Then, we examined the value of each page in relation to these desires and determined the level of fulfillment provided by each option. We reasoned that elderly individuals prioritize information that enables them to make comfortable and familiar decisions. Thus, they are likely familiar with driving to a physical library location to browse the catalog. Therefore, information pertaining to locations, hours of operation and proximity to current location are important. This influenced our decision behind designing the Locations & Hours page. Furthermore, it is unlikely that seniors will rely on a mobile device to browse titles and broadly search for information. Rather, they search specific keywords in an attempt to immediately find relevant information. Therefore, we included the Search/Search Results page with content related to media availability at particular locations. Also, we designed the Contact Us page assuming that our end users will frequently have questions about software, policies and other principles. Our users will prefer connecting with a physical library representative to solve complications. Lastly, we incorporated the Get a Library Card page as this application process is essential in gaining access to the remainder of the library’s resources. Ultimately, the goal of the organization is to drive new membership and extend the scope of their products and services.
The Initial Sketching and Decision Making Process
In designing the initial Home screen we aimed to create a UI that served as a quick and accurate navigation panel. Thus, the design illustrated in Figure 1.1, includes large distinct regions that are vertically-oriented with large text representing the titles of unique pages. It is intended that the entire surface area of each block will serve as a clickable button that redirects to the associated page. The motivation behind this layout is rooted in the visual capabilities of our audience. The large text caters towards those with diminishing eyesight or a lack of sensitivity to fine detail. It is also all left aligned in order to generate a strong line of focus and a concrete reference point for the user to return their eyes to as they progress from top to bottom. Furthermore, we avoided cluttering the central section of the screen with various potential actions that may overwhelm and confuse the user. Instead, we favored a very simple design that features buttons with large surface areas to ensure execution even with imprecise touches. The layout also includes a top and bottom banner to instill a sense of unity that encapsulated the main navigation panel. The top banner houses a central WPL logo as a general means of confirming that the user is located on the Home page. A magnifying glass icon is located in the top right and will launch a search bar pop-up. This icon, which redirects to another page is less emphasized than the other redirects because we decided this process will be the least frequent action completed by our users. The bottom banner serves to maintain the integrity of the original website by including an organized horizontal layout of social links and an opportunity to sign up for the newsletter.
Sketches of the Contact Us screen present different options for displaying the information. On the website, this feature is subcategorized into “Ask a Librarian” and “Staff Contacts.” We wanted to preserve both sets of information so directly under the top banner with the text “Contact” we included a toggle button. This allows the user to easily differentiate between the type of contact information they are currently viewing. The general contact information layout is depicted on the left in Figure 1.2. We intend for the headers to be left-justified and bolded. By creating a theme of left-justified text across the several pages a sense of unity is established. As the user navigates through various pages they can expect to find titles in similar manners and discern between categories of information easily. The bold text also serves to emphasize this item and create an obvious visual distinction from the surrounding regular text. We decide to place phone numbers and email addresses directly adjacent to each bolded header in order to increase proximity and develop a close relationship between the contact information and its relative descriptor. This also allows for more content to fit on the screen which in turn decreases scrolling and unnecessary activity to find desired information.
Original sketches of the Get a Library Card page are mainly an extrapolation and reorganization of the information that we identified as most important on the actual website. The website contains an embedded video detailing the application process. We decided that a visual representation of the process is much more effective and efficient that aimlessly scrolling through a compilation of text and instructions. Thus, the embedded video is placed at the top of the screen, directly below the banner to signify its foremost importance. It will also be the first item the user sees and considers interacting with, which increases the likelihood of their engagement. The next horizontally arranged section is an application form. The website contains a seemingly hidden link which redirects to a form. Since membership conversion is a primary goal of this site, we decided to simplify the application process by reducing the number of clicks and navigation required. The form will be organized in an intuitive manner and feature contrasting color in the header text and button in order to effectively draw attention. The bottom of the page contains an FAQ section that is accessible through downward scrolling. All text in this section will again be left-justified and distinguishable through the use of alternating bold and regular text.
The Search Results page is perhaps the most complex as it contains valuable information for each result option. Our design aims to highlight the availability of search items while providing an intuitive and descriptive method for placing a hold. Figure 1.4 shows the standard UI on the bottom as well as a pop-up screen on the top which appears after clicking the “Reserve Now” button. In this design, we ensured proximity by introducing horizontal lines to separate search results. This indicates that viewable content present in a particular enclosed region is related to the same item. This scrollable list will feature the title of the item as well as an associated publisher, author and other necessary text. Again, the text will be left aligned. The upper right corner of each box will include text and an icon specifying the form of media that corresponds to the title. The use of an icon effectively represents vital information in a visually appealing and easily comprehensible manner. The pop-up screen will display a list of different library locations that offer the current search item. The space in each box will be filled primarily with general contact information for the library, which we reasoned is the most pertinent information to elderly individuals. Thus, they can place a hold at an accurate location and verify the address and operation hours to retrieve the item in-person. The individually isolated regions distinguished by horizontal lines provide unity with the prior Search Results page. By maintaining a common structure it is evident that the two screens are directly related, which reinforces the dependency of the screens. Also, the “Place Hold” button on the pop-up screen will incorporate an icon with a color that offers a stark contrast to the surrounding UI.
While brainstorming potential ideas for the Locations & Hours page we concluded that a simple UI, with emphasized text and pictures, would most effectively communicate the desired information for our target demographic. We figured users would frequently use their mobile device prior to making visits to a WPL site in order to verify times of operation. We also substituted the Google Maps view on the website with just a standard picture of each location. The interactive Google Maps tool may cause confusion in an older community. The picture merely serves as an efficient way to navigate the screen and find the desired location without constantly reading the text. Furthermore, the text on the page will be left-justified and organized with the same theme common as text across the site.
When initially thinking of possible re-designs for the homepage, we tried to focus on making the information less condensed and easily accessible. In our research of our demographic (Ages 75–85), we found that one of the most prevalent challenges for older users was their vision. Sources recommended when designing for an older audience that it’s important to have sharp contrast and generous spacing (of both the typeface and elements on the page) so that interactive features are more easily identified. In this design, you can see that we tried to layout the homepage in such a way that emphasized all the important options the user have. This was done by creating boxes around every interactive feature. You can also see we scribbled instructions for how to use the search bar in case its meaning wasn’t inherent to our user base.
One of the pages that our team decided to redesign was the “Getting a Library Card” page. As with the previous sketch, we tried to make the interactive elements on the web page easily identifiable with both spacing and by drawing boxes. Again, we included instructional text, this time below the embedded video because our audience may not be familiar with such a feature. We also tried to make the video the first thing the user would see because it offers a great explanation on the process someone would have to go through to get a library card both digitally, as well as in person.
This sketch is for locations and services. This would be a good design due to the principle of alignment and proximity. The original website only had every library branch would be front and center for the user to see and the page would bring them back to the top so they could view that branches address and contacts.
The original search catalog page was slightly too verbose with some unnecessary information in the book description and sidebar. I chose to have the book search description to have the essential information most people are looking for with options to place a hold or to have the book added to their reading list.
The contact us page would be a search bar where the user can enter their address and find the branch closest to them with all the contact information instead of having to look at each branch one at a time.
The get library page I tried to make more concise by putting the instruction video at the very top of the page so it was the first thing people would see. Right after the video people can scroll down and put their newly learned information to the test and fill out the application form on a separate page. If they have any other questions there will be an FAQ page at the bottom to help them along with any contact info. I wanted the experience of getting a library card to be as simple as possible.
Developing the Paper Prototype
After sharing our individual sketches, our team had to decide on a final design for the paper prototype. Through this discussion, our team generated multiple ideas regarding the interface for searching and reserving a book. To determine which interface was the most intuitive and usable, our team decided to focus our prototype towards testing three different models. These will be referred to as “Checkbox”, “Horizontal, and “Vertical” (Figures 2.1, 2.2 & 2.3 respectively.)
The first model we decided to test was “Vertical” (Figure 2.3). In this model, once a user selected the “Reserve Now” button, an overlay pop-up would appear displaying all the libraries that had the book available. For the “Horizontal” model (Figure 2.2), we wanted to explore a design that was able to reduce the amount of text the user would be subjected to. We did this by only showing the user a single library at a time, with the option to switch between libraries with the use of interactive arrows. Finally, our team created the “Checkbox” model (Figure 2.1) where users could see all libraries that had the book available, and simply click a box and confirm their reservation by clicking a popup.
- Vertical: User wasn’t sure exactly where to click on the scrollable menu — clicked the entire row first.
- Horizontal: Had no issues — relatively intuitive. Recommended something to distinguish the new panel from rest of content to signify that it is a scrollable window. Also suggested that, for our user base, it might be difficult to remember where they are within the view.
- Checkbox: Not very intuitive. No additional input.
Additional Notes: For the “Vertical” model, the user enjoyed how the screen was less cluttered. This user, however, thought the “Place Hold” button could have more contrast with the other page elements to make it more obvious. The user stated that it should be positioned in the same spot, but is just hidden due to size. Recommended that it should be bigger and more colorful.
- Vertical scroll: Tried to click book icon to reserve a book. Was not obvious to the user what was a button and what was not. Successfully clicked “Place Hold” and was able to remove “Success” popup.
- Horizontal scroll: First clicked reserve now, and then tried to click on “Main” to go to the main page. The user said that it wasn’t intuitive to click “Place Hold” or scroll horizontally. Also said it wasn’t obvious the arrow would shuffle through different libraries. Attempted to swipe up on popup box to close it. User showed serious frustration with this feature.
- Checkbox: User said they would like to see the proximity of page elements improved to increase readability. First clicked “Reviews” instead of “Place Hold”. Quickly after, the user was able to select a checkbox and click the “Place Hold” button.
Additional Notes: User said they enjoyed the “Horizontal” model because it was able to provide the information in smaller quantities, making it easier to interpret. The user said that the benefits of the “Vertical” model are that it was able to display more information on the same page and that they were able to click fewer buttons when trying to achieve the intended goal.
- Vertical: User first clicked the book icon, then the “Reserve Now” button, then Place Hold”.
- Horizontal: User clicked text for “Reserve Now” first, then the “Place Hold” button. Could not recognize that the arrows brought them to a different library.
- Checkbox: User first clicked the text “Please Select a Library”, but not the checkbox. The user also thought the layout of the menu was confusing, thus hindering their ability to make use of the menu in order to place a hold on a book.
Additional Notes: The user thought the “Vertical” method was the easiest to use and the most intuitive.
- Vertical: User clicked “Reserve Now” first, then tried to scroll up, and then the “Place Hold” button. The user was able to successfully get rid of the popup.
- Horizontal: User clicked on “Place Hold” button first, and successfully got rid of the popup. The user was not able to switch to a new library, with the user first clicking on the search icon.
- Checkbox: User immediately clicked on the checkbox and successfully placed a hold. The user also was able to dismiss the popup successfully. Stated that the reason was that the checkboxes were more recognizable.
Additional Notes: User ranked the layouts from best to worst: “Vertical”, “Checkbox”, “Horizontal”
In summary, we were able to gather useful feedback from our paper prototype. By observing what users said about each of our three models, we were able to decide the best direction for our final product. One insight we learned through this testing is that most users enjoyed the “Vertical” model the most because it offered the most information while being the most intuitive. We also learned through this testing that we needed to increase the contrast of the “Place Hold” button so that the users could identify more easily. If we were able to change our paper prototype, our team agreed that we would try to incorporate more color. Color is a great way to draw attention to certain elements on a page and may have addressed some of the issues users had with elements not having enough contrast. Another change our group discussed was making our prototype more interactive. By having our prototype better imitate a real phone, we may have been able to gather more relevant insight.
Final Prototype Process
Invision Prototype: https://invis.io/F9OXO9JW354
The audience for our design project for the Worcester Public Library website was for elderly people ranging from ages 75–85. Not having much experience in knowing what elderly people like and don’t like in mobile applications we, of course, did some research into the subject. The team’s initial sketches and designs essentially were a reduction in the amount of navigation necessary to get to important information, increasing font size, and adding in new appropriate color schemes for our target demographic. For developing the final product we used two articles as a source to shape the final layout of the prototype which was “Designing for the Elderly: Ways Older People Use Digital Technology Differently” by Ollie Campbell and “Colors for Living and Learning” by Carolyn Atkinson. From these articles, we affirmed that making the font size bigger is necessary due to failing eyesight which is proven to happen in later years. If the user can easily see the text then it will be hard for them to miss what they are looking for within the pages of the app making it harder to get lost. We exemplified this with the design of the homepage by making the text big and dark. The team also made sure that the most important information that was believed to be what the elderly were mainly looking for was front and center on the homepage instead of being on a sidebar like on the main website.
The color scheme we chose was of a soft purple, pink, green, and apricot color. The article by Carolyn Atkinson was useful for learning that the elderly prefer more soft, warm, and peaceful colors and from that information, we were able to identify the best hex values to use for the colors of the app. The hex values we used were #927CB2 (Purple), #FFF4E5 (Apricot), #E1CBFF (Pink), #8ECC9D (Light Green), #85B290 (Dark Green).
The results of Demo Day showed us that our design was mostly easy to navigate through. One tester even stated that “If I’m looking for anything, I was able to find it”. Everything was clearly visible on the screen especially the text and symbols which is what we were trying to achieve. Only one tester was close to guessing our target demographic which was for ages 75–85 while others believed we were designing for ages 30–40 or for young adults. The testers who didn’t guess our target age usually guessed for an age range that was pretty young this might be due to the simplicity of the graphics and the UI so it would be hard to distinguish whether the app was best for kids or the elderly. Although the color scheme would have been a better clue since young people prefer brighter colors over the soft desaturated color scheme we used. The one tester who guessed 60–70 which was very close to our target demographic was also clued in by the simple layout of the graphics and the UI and the large font size. Since it was also so easy for them to navigate through the pages and find what they needed they must have known we were trying to avoid complexity which adds a frustration factor to the design.