Design for Others — Redesigning the Worcester Public Library Site
Summary
In the Design for Others project, we redesigned the Worcester Public Library Site for an iPhone based on a specific demographics group we were given, which was women aged 30–40 years old. Currently, the site has a lot of links on its pages, some even clustered together in an attempt to give the users all of the library information. This design is especially inconvenient on mobile phones as users would have to scroll for some time to find certain information quickly. Thus, our goal was to reorganize the site to increase user readability and navigability.
Idea Generation
We first looked at what pages would be most useful and important for women aged 30–40 years old. We decided that we would redesign the following pages:
- Homepage
- Booklist Page
- Adult Classes and Programs Page
- Find Your Next Great Read Survey Page
We chose to redesign these pages to be more compatible with our demographic group and mobile phones. We decided that the layout would remain the same to emphasize the feel of the current website, but we wanted to incorporate a different style and more pictures for women aged 30–40. We also found a common theme among the pages - they had a lot of details and links that were hard to find. We decided we wanted to either reorganize all this information or provide links for categories that take the user to a different page to make it easier to find, less cluttered, and save time.
Sketches
The first thing we did in our design process is develop some sketches on some ideas we had about the new site for our specific target group. We came up with about 10 design ideas for a screen. For example, below are 3 sketches of the Booklist screen:
In this first design, the links on the current page are organized in boxes with bullet points for easy user readability and navigability, satisfying our goal.
This second design serves the same purpose to reorganize the content, but in a different method to make sure that 30–40 year old women could get what they needed fast.
Another idea was to provide links at the top of the page to the user that take them to a different page to view the specific information.
Next are some sketches of ideas for the Adult Classes and Programs page and the corresponding page to be linked from there.
For the Adult Classes and Programs page we had the idea to have the title at the top and then just have a list of the categories of events. From there, the user can see the events for their desired category. We chose to do it this way rather than having all events on one page because then there is more information then necessary for each user and it makes it more difficult for users to find what they need quickly. Originally on the WPL page they had all events listed on one page. For the pages linked for each category we used a similar format to the one on the original website with some minor changes to fonts and text colors. We chose to use different colors for the font and also change the font sizes between the event title, location and time, and the description of the event. All of the categories will have the same design.
The sketch below is the initial design for the main page. We decided to reorganize the blocks to make the form better for the size of mobile devices and keep all the elements on the main page.
However I asked some testers (due to time constraints I didn’t find 30–40 year-old women so I asked 20-year-olds instead) about their thoughts on this design. I got feedback that there were too many elements on this page and they want the main page to be more concise. Therefore we decided to reorganized the elements on the main page, such as having the “Search for Books” category at the very accessible position of the page and deleted the other modules from the main page in the final draft.
We kept the search function instead of others because women aged 30–40 years old are very busy so they’d want to get hold of information quickly. The “Search for Books” function is more frequently used and other modules are accessible through the menu.
The 3 sketches below are designs for menu bar and the “Find Your Next Great Read” page. I got feedback from users that they can easily understand how to user these functions work so I decided to keep this design in the final design.
For the survey, we wanted to provide less content to the user to keep them from feeling overwhelmed. So, our idea was to add the “next” button. In addition, we added the “back” button to take the user back to the homepage after completion of the survey.
Moodboard
We set up a mood board that consists of the colors we would use, fonts, some pictures of the screen we want to create, and a description of our goal.
We used the above colors specifically for our target group in order to create a relaxed mood on the site. For our font, we used Arial and kept it consistent and big enough for readability. We also changed the size and color of some headings for more emphasis on some information.
Designs using Adobe XD
We implemented our sketches using the Adobe XD software. We used the Moodboard for the colors and font we had brainstormed in our designs. The following is our design evolution for the booklist page:
- Firstly we came up with the blank page with the most essential elements that exist in every single page.
2. We start to organize and put contents in the blank page.
3. The following is the final design that was used in our prototype:
We went through a similar design process with the Adult Classes and Programs page, as well as the Music page that links off of it. Below is the process we went through for those set of pages.
- We used the same header for each page, which included the WPL logo, social media links, the search bar, and menu button.
- Based on our sketches, we then designed the first draft of the pages. The first drafts are very similar to the original sketches.
Below are screenshots of the final designs for both pages. The Adult Classes and Programs page did not change much from its original design. We decided there was too much white space on the page so we added a photo in the final version. We put a picture that would be relevant to our specified demographic so it was more relatable. With the addition of the photo it also led to us changing the order of the categories to the photo was able to fit better on the page, while keeping the font size consistent between lines and not having them run into the photo.
For the Music page linked off of that page we decided to change the font color for the date and time of the event as well as the location so it stood out more. We decided to do this because we thought this was more relevant information to our users and thus they would quickly want to see it as that is a main factor in deciding if one is able to attend the event.
The images below show the process that we produced the menu bar.
1.After we decided on the design of menu bar, we started by push the main page rightward first, and added the background color to the region.
2. We divided the menu bar into small blocks for different modules.
3. Finally we filled in the name of different modules. The images below are final designs for the menu bar.
The “Find your next great read” survey was totally according to the sketches by simply add the questions and texts to the blank page.
Prototype using Invision.com
Finally, we created our prototype using invision.com. We put all of our page designs on the site. Then, we started linking the booklist page, adult classes and programs page, and the “Find Your Next Great Read” survey page to our homepage. We also included some pictures of women using some library resources to grab the attention of our demographic group.
Feedback
We had our demo day for our class on March 23rd. We got a lot of feedback on things that went well and things that could be improved. A lot of users liked the book survey layout. We also got positive feedback on our menu layout, specifically the tiering. However, some users indicated that instead of having the drop down go to the side it shifted downwards. It was very helpful to receive feedback from peers and we could take this into account if we made future prototypes.
Looking Back
In the future our prototype could be improved. We could make our homepage more focused towards what our specified demographic would most likely want to access the most. We could do this by making those fields more prominent than they are now. We did include those fields in the sliding picture wheel, however we could make them stand out more on our side menu. While testing our prototype with other users, we realized we should make it so when clicking on the menu button, clicking on it a second time would close the menu.
