Library to Mobile: A tale for UI/UX designers

Design Process

The design process for the final app consisted of four parts: brainstorming the general mock-up, sketching the desired app functionality, implementing the latter utilizing paper prototypes, and conceptualizing the idea via Invision software. Our target demographic was freelancing ui/ux designers. First, the target website for porting to mobile was chosen.

We selected the Worcester Public Library Website as our objective. This decision was made after carefully reading all site options, and while each website provided room for creativity, exploration, and improvement, the Worcester Public Library website contained misplaced, unorganized, confusing, and complex content that provided optimal fodder for experimentation. We selected four pages to improve: the Homepage, included the menu and footer, branch library location listings, library resources, and the calendar of events.

After mentally envisioning the desired changes to each page, the task of sketching each change was initialized. For each of the four target pages, approximately four to six sketches were completed for each. Somewhere detailed examples of smaller app elements, others where broader attempts to portray a finished app interface. After the preliminary sketches where completed, the best mock-ups were chosen to be conceptualized via paper prototyping.

The paper prototyping was accomplished by cutting paper into the necessary components for each mobile page. Buttons, menus, maps, calendars, and icons where sketched on paper, extracted, and placed on background paper to serve as a de-facto mobile screen. The paper prototypes where then tested, in class, on other peers acting as a potential user for the final product. We garnered feedback from the paper prototype testing, which was used to update the sketches.

Then, the final paper prototypes were brought to life as Invision projects. To be as photogenic as possible, the paper sketches were replicated as best as possible using a host of online tools, including Invision’s own sketching feature. Each member of the team created the specific web page assigned to him or her. Lastly, each web page was linked to the finished homepage.

Final Home Page
Final Designs

Design

There are many different factors in the design from font to color scheme to layout. Our idea for the design was to make it still recognizable, that one can think that it was still a website for the Worcester library. The first thing we chose was font. We decided on a font that was already on the website, Arial, Helvetica, sans-serif. The next step was a color scheme. The website already has two colors #662061 and #D5F9B7. We used a color pallet generator to choose a third color which is #B7F9F2.

We wanted the website to be easy to use and we wanted to change how the navigation works on mobile. The website has a lot of different links organized into several subcategories. We wanted it to be easy to access everything so we spend a while discussing how to do the navigation. But with the demographic we wanted the navigation to be more playful and innovative then what most mobile websites use. This lead to the bubble navigation.

Current Navigation
Example of bubble navigation

The next step was to pick a few pages. We picked pages that on mobile weren’t useful, they were cluttered or even unusable. The group also centered around pages that are essential to a library website such as the calendar and locations. When looking at the mobile version we noticed that the ebooks page didn’t work. You could not see all of the content, thus that became our forth page to work with.

Mood Board

Paper Prototypes

To create our paper prototypes, we started from the ground up with UX designers which was our topic in mind. First for the front page we removed a list of less used items and added them to an expandable menu on the top and bottom. These expandable bubble menus were vertical and ran parallel to the page, this allowed for full utilization of the small screen real estate on phones. The photo carousel was resized such that it would fit on the phone while still showing pieces of the next and previous image as a preview.

Next the calendar page was changed so that the clutter was organized and put in an orderly manner, two expandable bars were put at the bottom of the page so that they could be pulled up vertically to get access to extra information, this was done to provide extra categories to sort information in and also act as functional info screens for the search and filter of the map. These bars also went over existing screen space as if sliding upwards therefore such they provide a easy way to compress more information into the small phone screen. The search and filter options were also changed to clean buttons and bars for ease of use and to save space, when pressed these buttons would pull up the bars at the bottom with the appropriate settings.

We also redesigned the map page, first we added a moderately sized button to find the closest location to you which allowed for quick access to the information the user would want. Next the table which displaced the timetable was compressed to a button which expanded with the information when pressed. A button which showed timing changes and holidays was also added right next to the ‘find closest location’ button, this was done so that the user would have easy access to information about changes in schedule or the days the library would be closed.

Lastly we also recreated the eBooks page, we changed the information to fit in a mobile format and made the eBook platform table horizontally scrollable while keeping the first row persistent, this was done because it allowed for a good layout which let the table be explored easily.

User with Paper Prototypes

Demographic Guesses

Overall the testers were unable to guess our demographic. Partially, the guessers were mostly guessing ages instead of job titles. That fact messed up our data and even when we tried to hint that a job can be a demographic many did not take the hint. The most interesting part is that we got guesses from a young teenager to an older person, making this more inclusive to a wider range of the population.

User with Invision Prototype

The first guess was a teenager to young adult, they’re guess was mainly on some smaller text on the website, that it looked interesting and that the website look nontraditional. The main clues for this was the navigation and the page about ebooks. The navigation was different from most pages and the ebooks page had fairly small text.

The second guess was a retired grade school teacher. This guess was because the mobile website was colorful and not very cluttered like the original website was. They thought that it was similar to how a grade school teacher wants the classroom to be neat.

The third guess was that it was made for adult but not senior citizens further clarified to be someone that is trying to visit the library. This was due to our focus on the calendar and locations pages. The caveat about senior citizens was once again the smaller text on the ebooks screen.

The forth guess was a European. Our group was confused based on his guess. However the participant guess that due to the inclusion of a the language selector on the home page. Our confusion was that this was on the original library website and that of the five alternative languages only two are main languages from Europe.

The final guess was a older person, likely a writer, that likes to read. This was because we chose the library and sought to include the page about ebooks.

While no one guessed it, when told what the answer was many of them could see it. They could see it in the navigation, color, calendar page and compactness of design. All of the guessers did not realize our demographic was a potential option. Our group will include it as a win that we were able to encompass a variety of ages since anyone can be a freelance UI/UX designer.

Link to the final product:
https://invis.io/P2OWRHYXEZC