Group 17 Design Documentation

Yang Gao
6 min readNov 8, 2018

--

Demographic: Parents with toddlers who live 20 miles away from Worcester

Website: Worcester public library.

Thoughts on the website and demographic

Parents who have toddlers normally don’t have a lot of free time. Thinking of this condition, when we were scanning the website first, the pages wasn’t clear enough that we don’t even know where we could click on. Another problem of this page was that the arrangement of the page was complicated. Considering of these aspects and problems, the purpose of redesigning the page is make the website as clear as possible. Adding quick links and reorganizing the information of the page were the two main aspects that our group focused on. The three site other than the main page that we chose were locations & hours page, adult classes page and the kids activity page.

For the main page

The alignment of the header isn’t that great and the quick links that the website provide are redundant. For example, we saw “ask a librarian” on the homepage four times, which is meaningless.(contrast the header we designed and the original header that the website had) Also, when people drop down the menu bar the photos are all covered by the menu. We added quick link at different places, and added kids program and adult classes in the photo and people can access to that page by clicking on the photo. During the testing, users think that we should adjust on how many quick links we should have, because some of them were not important enough to be in the quick link. Additionally, swiping button should appear on the photo that remind the users they can swipe on those photos. The search bar that we design for the website was small so that people can’t recognize it.

For locations and hours site

The map already pointed out the location of each library. If clicking on the library, basic information including address and telephone number would pop out in the information box. However, look down to the page, there were opening hours of each library and individual map for each of them. We thought this was repeating and made the page more complex. Therefore, we added the open hours of each library into their belonging information box.

One of the user gave us an helpful suggestion is that we can create a search the closest library by home zip code. The parents would not to check the map and find the closet by themselves.

For adult classes page

We found the adult page to be rather redundant and lengthy. However we felt it was important to retain the very informative page.The problem of the original page was there was no “back to the top” button. Just imagine, if the user is reading through the page and want to go the top of the page, they have to scroll up to the top. Secondly, the quick access to each category was missing so that the only way to going to certain topic was scrolling down and find by yourself which was difficult and easy to miss.To solve these problems we made the page more visually appealing and easier to navigate. We added a set of 12 colorful icons representing the array of classes offered. Each icon had its name clearly labeled beneath it.

We also added a back to top button that followed the user while they scrolled, allowing them to return at any point. During the prototype testing, “users” suggested that we should add a search bar on the page where they can type the key words of the class or program.

For kids program site

Only the event’s name were listing. The only way to know the date of the event is to check the details of the event, which was time consuming to those parents. Furthermore, the arrangement of the page was off. The button of “click here to check more events” were appear above the main list of the events, which was not very logical. Thus, when we designed our paper prototype, we list the weeks in certain month before the “check more events” button. In each week, we ordered the event in chronological order, and added the date, so the parents can filter out the event that they can go to and then check the details whether they are interested in or not. However, we firstly designed a close button on each week that the user had to click the close and check next week.

During the paper testing, we found out that this close button was “useless” instead of actually close it, we can substitute it by clicking on another week.

Color & Font choosing

Since the user that we are facing are adults who are busy, we use simple font and color on the page. However, the contrast on emphasizing the important part is the main goal that we suppose to achieve. We keep the original main color, purple and black, and create new part with the same theme. For the font, we contrast it with the size, and keep the consistent with the typeface.

Demo Day

On our demo day, most of the “users” used the quick link before we told them to do so. They all like the clean page that we had and the logical order so that they wouldn’t lost while using it. However, people criticized on the color of our website. Since the main color were purple and black, it’s hard to tell the differences and make the contrast less obvious.

Since our demographic was specific, most of the user guess correct on parent’s with babies. However, not really much people considered on location part. People were thinking the parents might not live in Worcester, which was close to 20 miles away.

Conclusion

Through the whole designing, we did achieve our goal that people like the quick link and the clean, straightforward page design. However, we should make the color and font contrast more obvious so it would be easier to read for those parents. If we have chance to fix it another round, we will focus more on the color and typeface. Thus, the page can be more concise and attractive. After this project, we get a sense of how to design a page for specific users. The main point is thinking with their mind, what do they need from the website.

Link for the prototype

--

--