Design For Others

For this assignment in Human-Computer Interaction, we were tasked with re-designing an established website for mobile users of a specific demographic. The demographic we received was “Ages 75–85, with average computer/browser literacy”, and with that we chose to redesign the Worcester Public Library’s website. The WPL website was not very impressive, and it seemed we would be making major revisions even if we weren’t considering a specific demographic. After discussing, we decided our initial goals for the website were to simplify the process of completing simple tasks and accessing important information, such as searching for books/events and finding location/hours. We decided that our design would not focus on viewing books themselves, and rather focus on a more intuitive navigation of the website.

Paper Prototyping

Paper prototyping was the first step in our design process. Our goals in our first draft took into account both our given demographic, and what we hoped were good design principles. The team decided to focus on these changes:

  • Larger text for buttons/ information for users with bad eyesight to read with ease
  • Flattened navigation hierarchy (no drop-down menu on home page, just a list of options)
  • Suitable icons for homepage options, so that users would not have to solely rely on the text
  • Prioritized information by importance and frequency of use

During class, we had the opportunity to present our prototypes to classmates. We used this time to tell our testers to complete two different tasks, starting from our homepage:

  1. Find out at what time a specific library opens on Wednesday
  2. Find an event to attend at any library

The testing went well, as our testers were able to complete both tasks on their own. Of course, they did have some feedback after interacting with our prototypes.

  • User had trouble navigating home without a back button/ did not recognize the logo at the top of every screen as a way to navigate home
  • User incorrectly attempted to use search bar to find the hours of a library(the first task)
  • User had trouble exiting the drop-down

After discussing this feedback among our team, we came up with some prototype changes we wanted to implement:

  • Get rid of drop-downs for searching parameters on the home page, and only expose them after first search when you get taken to a separate search page. We drew inspiration from google and how it lets you search without specifying exactly what you’re looking for
  • Combine searching for books and searching the site, as currently users cannot be able to tell which to use
  • Move logging in to be less of a priority — members will certainly be able to find it, but most users will want to search/ use the library’s other feature

Invision Prototyping

The logical next step for our team was to take the revised paper prototypes and implement them within an actual UI a tester can interact with. Using Sketch and Invision, we were able to develop a simple user experience incredibly different from the existing Worcester Public Library website. Our first step was creating a moodboard that we felt encapsulated our target demographic and this inspiration for some of our design choices.

Finally, it was demo day. We had several classmates interact with our fully implemented UI with the same tasks we had given them during paper prototyping, as well as guess our given demographic we designed for. Our team received two large pieces of feedback after the testers interacted with Invision’s preview mode:

  1. They was a request for the search bar to be at the top of the home page, as testers felt it was a higher priority tool that a user should not have to scroll to get to.
  2. Testers had difficulty navigating back to the home page. They expressed a desire for a back button, as they did not realize the logo at the top of the screen would lead to the home page.

After one last discussion, we concluded our design with a few small changes:

  1. We decided to move the search bar from the bottom of the home page to the top, as users will more often want to search a book than look at the menu items. Additionally, we decided to add the placeholder text “Search Library…” to the search bar to clarify its purpose.
  2. The team agreed to remove the menu header, as it seemed to indicate a dropdown functionality.
  3. We decided to not implement a back button, because we realized Invision does not have a back button functionality implemented in their software, while any mobile web browser does. We kept our home button as the logo, as that is a common design choice.

Final thoughts

We arrived at our design decisions first by intuition, and then adjusted our thinking based on the useful feedback from both paper prototyping and demo day. Our process (asking the user to complete two tasks) worked incredibly well, as it forced the user to navigate our website without guidance, but with purpose. We chose our layout and fonts to be clean and simple, as to make it as easy as possible to interact with. Our color and content choices mostly mirrored what was originally on the Worcester Public Library’s website (the purple, menu drop-down items, and the logo)

Interestingly enough, people were not able to guess our target demographic on demo day; however, it made sense why this was the case. Our app, while designed for ages 75–85, still had a modern feel to its layout. Our large font and helpful icons did not jump out at the tester as elderly — and we were actually happy with this. No application wants to be unusable by other demographics.

Overall, we are happy with our clean UI how it pertains to our user group. Besides some small suggestions, we received mostly praise for how our user interface would be used by the elderly, even more so after we explained our logic behind our design choices. If given more time, our group would certainly investigate the search functionality further and see if that could be adjusted any further.