Storyboards + Design Sketches

Scenarios

Wendy | Wendy just got out of her 11:10 five minutes late and knows that all of the lines will be crazy. She is not sure whether or not she should go to Lulu or elsewhere. She has roughly twenty minutes to eat because she has a lab starting at 1 o'clock in the science center. Wendy has no time to stop moving after she leaves class, so she must use her phone while walking and trying not to run into anyone. She is walking very fast and cannot afford to slow down at all, so she opens up the Wellesley Bites app to quickly look at the dining halls closest to her, an option that is available from the home screen of the app. Wendy wants as much time as possible during lunch to both eat and study for her theater midterm happening later in the day.

Martha | Martha is a first year who still finds the dining halls and their variety to be exciting. She has arranged her schedule so that she can avoid classes immediately before lunch or during dinner time. Martha wakes up with enough time before her afternoon classes to plan out where she should go to eat that day. She uses the app while she's still in bed and very comfortable. Martha uses Wellesley Bites to view all of the dining hall menus at the same time so that she can make an informed decision about where to eat. Martha realizes that there will be a special event at the Lulu that night revolving around peanut butter. Martha has a peanut allergy and cannot eat the food for the special event, but she notices that there will be an interesting pizza topping available, so she decides to eat there. Later, a friend of Martha's texts her to ask if she would like to eat dinner with her in Tower, but Martha rejects the invitation because she is already set on eating the special pizza in the Lulu.

Gabby | Gabby is an upperclasswoman Art History major who knows exactly who her friends are and has a very established habit of eating lunch with them every day. Gabby checks her phone as soon as she leaves her 11:10 pm art history course in Jewett, to find ten new messages from her friends on WellesleyBites. She's made plans to meet with friends coming from class in the Science Center, and they are currently discussing the merits of each nearby dining hall. Sara and Emily are debating between eating at Tower and Stone-Davis, and Gabby needs everyone to come to a consensus quickly so she can start moving towards the right dining hall. Because Gabby and her friends are all texting during class, their texts are typically not at top speed. Gabby opens up the WellesleyBites app to view her friends' locations before she sends a message regarding where she thinks everyone should eat. The map indicates that the dining hall two of them are closest to is Tower, so they agree to eat there.

PRELIMINARY INTERFACE DESIGNS

Design 1: Newsfeed

newsfeed design NAVIGATION of this design version is accomplised using a nav bar along the bottom of the screen. this bar contains icons representing each of the main screens of the app: Home, Menus, Find, Friends, and Preferences. The location of the nav bar is easily accessible for the user on a touch-screen devices and allows them to move seamlessly between main screens from anywhere within the app.

HOME shows the user the current meal at the top of the page, and the time for which that meal is available. Underneath this banner is a dynamic newsfeed, providing updates about friends meal plans and current offerings from various dining halls that the user has flagged as important in their preferences.

MENUS shows the user six photo-tiles representing the five campus dining halls and other culinary locations (such as the Leaky Beaker). Each of these buttons will lead to a screen with the daily menu for that dining hall and its hours.

FIND gives users the option to search all dining hall options, or user their current location to find the nearest dining hall. For locations they are not currenty at, users can select a building from a menu. They can also view a campus map with all locations. After a selection has been made, the nearest dining hall location is displayed.

FRIENDS works as a messaging feature, allowing users to communicate with groups of friends and individuals to make meal plans. An icon is present to allow users to add new friends and groups, and conversations will be displayed by recent activity.

PREFERENCES allows the user to personalize the app, choosing which foods they want to be alerted about on the newsfeed, and the ability to log out of the app.


Design 2: Minimalist

minimalist design, part one
minimalist design, part two NAVIGATION is done on the Home page to maintain the minimalist theme. There are icons representing Dining Hall, Search, Friends and Settings. To go back to the Home page the user takes advantage of the mobile experience by swiping left, allowing them to return to the navigation panel.

HOME shows each of the categories in an image format, in a simple, circular style. This is to minimize the amount of text in the app. The 'Feed Me' button is large and central, focusing on the automatic suggestions of a dining hall. There is a simple bar at the top stating the name of the app - Wellesley Bites - and a '?' button on the bottom right in case it isn't clear which category each icon represents. When clicked, the '?' button shows the names of the categories alongside the icon.

DINING HALL is a list of buttons of each dining hall, making use of her dining hall logo and and the whole width of the phone's portrait orientation. Each button leads to a dining hall's individial menu, or when clicked on 'Compare All' has a side-by-side comparison of several dining halls' menu. The 'Compare All' section is optimized for landscape orientation.

FRIENDS is a map. This allows the user to see the current locations of all her friends as well as herself, visual represented by dots that change in size depending on the number of friends that are located in that building. (Filled-in dots are the user's friends, and a circle-dot is the user.) The user can click on the '...' button to find out more information about friends' locations, such as the building name and names of friends. The bottom of the screen also has 'B', 'L' and 'D' buttons that correspond to Breakfast, Lunch and Dinner. Each button will show friends' locations in that future time period if they have inputted their anticipated dining hall. The buttons are time-based and only future meal locations can be viewed.

SEARCH allows the user to search all dining hall options in the search bar, or by using presets below the search bar. Presets are customizable by the user in case she wants a custom filter to make into a preset.

SETTINGS will be the same as Design 1's Preferences section, without the navigation bar on the bottom.

SHARE is a button that appears on pages where the app suggests a Dining Hall and the user has an option to share that information to an external texting app. The app has an automatic message ("Want to eat at (dining hall suggestion) at") and allows the user to fill in a time, if needed. This button appears on several pages, such as the Friends page.

STORYBOARDS

Preface

A phone on a desk
Image credit 		Gabby arrives in her 11:10 class in Jewett and sets her phone out on her desk alongside her notebook and pencil. Having the phone out and in reach means that, even though it's on silent, she can still see all of her notifications.
Student texting
Image credit 		The messages about lunch start pouring in around noon. Gabby does not wait until class is over to respond, but having some respect for the professor/trying to pay attention to some extent means that she's not as fast at texting as she usually is.


Design 1: Newsfeed

Design 1 Storyboard 1 Design 1 Storyboard 2 Design 1 Storyboard 3



Design 2: Minimalist

Design 2 Storyboard 1 Design 2 Storyboard 2 Design 2 Storyboard 3 Design 2 Storyboard 4



Conclusion

Women eating lunch
Image credit 		The group decides where to eat and eat lunch together.