Featured

iDesign Mobile Competition Walgreens UX Internship CompLit UX Design Cooking Tutor IxD Project Teledraw UX Research

Other Experience

Graphic Design Projects AT&Ti PM Internship CUVolunteer Redesign JFGAA Contextual Inquiry WikIt! Palm App Competition

iDesign Mobile Competition


I designed a mobile app called "MLibrary to Go" for the MLibrary Going Mobile iDesign Competition in March 2013. Included are sketches, flows, and mockups of the proposed UI and interactions, along with justifications.

Target User Group

Students who want to save money by using the university library, but lack the motivation and/or know-how to navigate the MLibrary system.

Design Goal

Incentivize use of MLibrary by showing money saved by using the library and making wayfinding simpler and therefore less daunting. Wayfinding has two components; finding the material's location and availability, and physically navigating to it.

High-Level Solution

Incentivize using the library by making a mobile app that makes wayfinding easy and surprises users by showing how much money they saved by checking out at the library! The mobile app can take advantage of smartphone (and tablet) capabilities, including camera, bar code scanning, GPS and push notifications.

User and Needs Research

In the Mobile Survey conducted by MLibrary in 2012, 46% of respondents reported using at least one MLibrary service on their mobile device. 32% (673) of respondents searched for library hours and locations, closely followed by 28% (585) who searched the catalog. This meant it was important for a mobile app to still support both of these functions.

In the survey, users were able to indicate what additional services they might be interested in. The top three desired features were texting to renew (64% or 1387 respondents), due date reminders via text (63% or 1374 respondents), and bar code scanning (59% or 1156 respondents).

At the time of the survey, 70% of respondents owned a mobile phone with internet (e.g. iPhone, Blackberry, Droid, etc.). This number can only be expected to increase as time progresses.

MLibrary to Go Design

Flow of the Mobile App


Flow Diagram of MLibrary to Go

Flow Diagram of MLibrary to Go

Flow Diagram of MLibrary to Go

Launchpad

MLibrary to Go Launchpad

Launchpad (Logged in, Android)

MLibrary to Go Launchpad

According to the 2012 MLibrary Mobile Survey, the most often used function on mobiles was searching for Locations & Hours, which is why it's featured as the first option. Search is provided at the top of the page via search box so users can directly begin searching from the Launchpad. Checkouts lets you see what books you have checked out, how much money you're saving compared to Amazon or list price, and lets you renew. Saved Items takes you to your Favorites and Wishlist, a new area where you can save items that you want to check out in the future. Lastly, Alert Settings is where you adjust your notifications. For example, you can set an alert or push notification to remind you a book is due 7 days prior to its due date, or when you have items overdue. You can turn these on and off and adjust how often you wish to receive them.


Launchpad Log In Screen

Rough sketch: Logged Out - Can still use Search and see Locations & Hours.

Launchpad Log In Screen

1. Locations & Hours

The main new feature of the Locations & Hours is mapping. While no mockup is available, it is similar to the Library Item Page featured later. As shown in the flow diagram, users can search via textbox or browse for locations; library are grouped by their location, e.g. Central Campus. On any library's Info page, users can immediately access a campus map with the building highlighted, or Get Directions, which is a button they can press to open their phone's Maps application. The address of the library location will be automatically placed in the destination, with the starting point as "Current Location", a common practice used by apps such as Yelp that is now possible due to GPS capabilities. The campus map is already a familiar resource to most students and will help them identify where a building is relative to buildings they are already familiar with. The only addition necessary is that a custom campus map must be created for each library location, with the library building highlighted.

2. Search

Search Screen

Search Screen (Android)

Users can search for materials via three methods: textbox, barcode, or camera. Using the textbox is like a standard search. Using the barcode opens up a barcode scanner, which will directly take you to its MLibrary page if it exists within the library. Similarly, the camera allows you to take a picture of the cover of an item; this functionality requires that the library have an image of the item on file, which if not possible now, hopefully will be in the future. Checkboxes used by Mirlyn Mobile were carried over for consistency and ensure the same functionality was provided on both apps.


Inspiration for this page was derived from Amazon's Android app, shown below.

Amazon Search Screen

Amazon Search Screen (Android)

Amazon Search Screen

If there is a listing found for that item, it will include a button called "Add to Wishlist" so that users can save it as a reminder that they wanted to check it out later. This is especially helpful for people who come upon something of interest randomly, such as at a friend's house or at the store. This is an easy way for them to look the item back up later when they're ready to check it out.


3. Checkouts

Checkouts

Checkouts

Checkouts

Checkouts shows you all the materials you have checked out, their due dates (or how overdue they are), as well as a notice at the top of how much money you've saved by checking out at the library. Users can renew books by accessing the submenu and clicking "Renew Items". This will display checkboxes which the user can select and a Renew button which will renew whichever items they selected. Selecting an item takes you to its dedicated page, where you can see details and where it is held.

Checked Out Item and Map

Checked out item page, leading to Shapiro page with campus map, Get Directions, and Request Delivery buttons

Checked Out Item and Map

Selecting a holdings location takes you to a page showing that library's name, a campus map, a Get Directions button, and a Request Delivery button. This page is designed to make it clearer where the item is located and how to get there. Again, the campus map lets them see the building on a map they are already familiar with; or, they can choose "Get Directions" to open their mobile device's Maps application and get directions directly. Alternatively, they can request delivery via the "Get It" functionality already offered on the MLibrary website. Selecting "Request Delivery" allows them to either have the book held at a library of their choosing, or have the materials sent electronically via 7-Fast if they are a grad student or staff member.

4. Saved Items

Saved Items includes tabs to one's Favorites and to their Wishlist of items they want to check out in the future.

5. Alert Settings

Alert Settings is where users can specify whether they wish to be alerted when a due date is approaching or has passed. They can alter how long in advance they wish to be alerted, such as 3 days or 7 days. One of the desired features mentioned in the survey was reminders of due dates via mobile, which this feature achieves by sending push notifications to the mobile device reminding that they have a material due. They can also choose to send themselves an email notification.

Supplemental Information

Extra Design Process Images

Brainstorm Map

Brainstorm Map

Brainstorm Map
Brainstorm Map

Search Flow and Important Metadata and Actions

Brainstorm Map
Brainstorm Map

See Details, Location, Request Delivery

Brainstorm Map
View Checkouts and Saved Items Flows

View My Checkouts and Saved Items Flows

View Checkouts and Saved Items Flows
Search Results Flow

Search Results

Search Results Flow

Technical Implementation

Since the library has limited resources to implement mobile applications, I propose building what's known as a hybrid mobile app. Native apps often have to be written in a language specific to that platform (e.g. Android), which makes releasing the app on multiple platforms a time-intensive task. Frameworks such as PhoneGap and MoSync can be explored, which allow a mixture of HTML, CSS, Javascript, and native code to be used together. These frameworks are advancing at a rapid rate, making them a more feasible option as their speeds and the tools they include increase.

An excellent introductory article explains the advantages and disadvantages of cross-platform design: http://mashable.com/2012/02/16/cross-platform-app-design-pros-cons/ It is important to note that some of the user interface elements would still need to change depending on which platform the app is meant for. For example, the location of tabs in the iPhone is at the bottom of the screen, while on Android, they are near the top. It is important that UI conventions be followed based on platform, both for acceptance to their respective stores and for the end users.

Thank yous to both Diana Perpich and Sonali Mishra for assisting me during the competition!


View PDF Submitted to iDesign

Final Report

Details

Competition

iDesign "Going Mobile"

Role

Designer

Date

Jan 2013 - Mar 2013

Skills

  • sketching
  • flows
  • mockups
  • Illustrator
  • Android