iphone-graphic-wide.png

Wellesley Bites

Tools
Balsamiq, jQuery Mobile, HTML5, CSS3, JavaScript, Adobe Illustrator

Created For
Human-Computer Interaction Course,
Final Team Project

Links
Project Website

Wellesley Bites is a mobile web application interface, created to enhance the dining experience of students at Wellesley College. With its expansive campus, Wellesley offers students five dining halls to choose from. The variation in dining options allows students to choose between a wide variety of locations and meals, but also brings about the paradox of choice. The busy Wellesley student has little time between classes and meetings to decide which dining hall to visit, and can frequently end up in a dining location far from their friends or with food they do not find appealing. Wellesley Bites aims to provide users an easy way to find delicious food in convenient locations, and coordinate meals with friends while on the go.

For this project, my team conducted user and task analysis, created a storyboards and design sketches, created and tested a paper prototype using Balsamiq, iterated on our paper prototype to create an interactive computer prototype with jQuery Mobile, and finalized an interactive implementation of our web-based application based on the data we gathered from our testing previous of prototypes.


User & Task Analysis

Our intended users are students at Wellesley College, a group that is predominantly female and between the ages of 18-22. We conducted interviews with five Wellesley students to assess their experiences dining on Wellesley's campus, and created user personas based on their different prioritizations of socialization, food choice, and location.

 
Summarized user personas.

Summarized user personas.

 

Next, our team created a task analysis model to break down the process of eating a meal, taking into account the differing priorities of our users.

Task analysis for eating at a dining hall.


Design Sketches & Storyboards

To begin the design process, our team wrote scenarios focusing on three imagined Wellesley students, using the information gathered during our user and task analysis. From these scenarios, we created sketches for two preliminary designs and a storyboard for each design based on one of the scenarios.

"Newsfeed" design sketches.

"Minimalist" design sketches.

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. The messages about lunch start pouring in around noon...

Storyboard for "Newsfeed" design.

Storyboard for "Minimalist" design.


Paper Prototype

Wellesley Bites' paper prototype was created using Balsamiq. Our team tested the paper prototype with current Wellesley students by presenting them with a project briefing and three scenario tasks to complete. We recorded each student's actions while completing the tasks, along with their observations about the interface and their experience.

Task #3: It’s 12:15. Arrange to eat with your org’s E-Board at Lulu.

After our pilot testing, we identified some major issues in our application and began making small changes to improve functionality (e.g. "Suggest" was changed to "Invite" to better describe the action being performed). We also added additional screens to our prototype we realized users might encounter during testing, though they weren't necessary to complete the tasks. During our second round of testing, we used the added screens to ask further questions after the users had completed the three main tasks.

Updated paper prototype for task #3.


Computer Prototype

Our team continued the iterative design process with a computer prototype, built with HTML5, CSS3, and JavaScript in jQuery Mobile. Our design incorporated colors and images from the Wellesley Fresh website students are already familiar with. Using feedback gathered from our paper prototype, our team updated buttons on our interface to be more descriptive of their action (e.g. "Custom" became "Create Your Own"). We tested our computer prototype with current Wellesley students, as we did with the previous iteration.


Interactive Implementation

Using the feedback gained from testing the computer prototype, our team created our final interactive implementation of Wellesley Bites using jQuery Mobile.

Main screens of Wellesley Bites.

Sending a meal invitation with Wellesley Bites.