Scenario

Jane is the mother of two sons, Bob and Steve. After hearing of underwater basket weaving and its potential to become the next Olympic sport, Bob asks to be enrolled in a class at the nearest pool, located approximately 30 miles away. Recognizing her young son’s promise in the sport, Jane agrees.

At the beginning of the first class, the instructor welcomes the students and their parents. She mentions GetYoRide.com as a tool to facilitate carpooling. A single mother of two, Jane is extremely busy and is interested in working with other parents to take Bob to class. Thus, Jane visits GetYoRide.com and signs up for an account. After signing up, submitting her address, and entering other contact information, she searches for Bob’s underwater basket weaving class and adds herself as a parent looking for a carpool. Subsequently, she is able to view other parents who had also expressed their interest in carpooling for the class.

Using GetYoRide.com, Jane finds two other parents, Alyssa and Vladimir, who are interested in carpooling and live within a five mile radius of her. Alyssa seeks to minimize gas expenditures. Vladimir does not speak English fluently and has a difficult time communicating over the phone. Each parent submits their driving time preferences. Because GetYoRide.com has a simple and intuitive scheduling interface, the three parents manage to set up a carpooling schedule for future classes that ensures an equitable split of the responsibility. Before each scheduled date, the designated parent receives a friendly reminder along with a map of the carpool route.

Everything proceeds according to plan until Steve’s goldfish dies one day, tragically and unexpectedly, and Jane needs to stay home to console her mourning son. She logs on to GetYoRide.com to alert the other parents and find a replacement since she can no longer drive the children. Soon after, Vladimir responds, notifying the parents that he can take the children in place of Jane. Jane successfully swaps days with Vladimir.

Sketches and Storyboards

Design 1: Efficient

Design 1 provides maximum efficiency. A tabbed layout is used to provide quick access to the various tasks the user can perform. The first tab is for the primary task, searching for an event. In that tab, the user progressively enters more information until he can see the event he is interested in and the other people interested in carpooling to that event. At that point, the user sees the value of the site and thus has a motivation for dealing with signing up so the registration process is then initiated.

Only once the user signs up do the other tabs become visible.

This storyboard demonstrates our first design in action.

Design 2:  Illustrative

Design 2 takes an illustrative approach, catering towards those who are illiterate or have poor English skills.

Coming home from Bob’s underwater basket weaving class, Jane remembers hearing about GetYoRide.com from the teacher. She visits the site and arrives at the welcome screen, which allows the user to either log in or sign up.

Because Jane does not have an account, she needs to sign up first. After clicking the “Sign Up” button, Jane quickly fills out the form and creates an account as it only has 3 fields.

Jane is then presented with the user homepage, which allows the user to find a carpool, view their messages, or check their schedule. Each icon links to a pop-up screen. Jane is here to find a carpool, so she clicks the first icon.

The pop-up asks for Jane’s home address. It also provides a progress bar in the top lefthand corner, so Jane can be visually aware of how many steps she has left. Jane enters the location of her home and clicks “Next.”

The pop-up then asks for the extracurricular activity for which Jane seeks to carpool. A back button is also available in case Jane wants to change something she entered previously. Jane finds Bob’s underwater basket weaving class with the search function and clicks “Next.”

A list of potential carpooling groupmates is displayed in order of distance from her house. The first 2 are automatically selected. Jane has no problems with this and clicks “Next.”

A message is sent out to Alyssa and Vladimir, notifying them of Jane’s interest in carpooling with them. Jane is finished and clicks “OK.”

After a day, Jane comes back to the website to check whether or not Alyssa and Vladimir have responded. She clicks the second icon from the user homepage and arrives at the “Messages” view. Jane is interested in her pending requests, so she clicks the first icon.

This leads her to a display that shows all of Jane’s pending carpools. Jane selects the “Basket Weaving” icon.

Here, Jane is informed by the smilies next to their names that Alyssa and Vladimir have accepted her carpooling request. Because both have accepted, if Jane clicks “Submit,” the carpool group will be formed. Jane clicks “Submit” and the “X” icon to exit the view. 

From the user homepage, Jane clicks the third icon to see her schedule. Here, her next pickup date is displayed prominently. An icon linking to a map of the route is also shown. However, she can not make it, so she clicks “Swap Date.” This sends an automatic email to all group members, requesting an exchange of dates. Jane clicks the “X” icon to exit the view.

From the user homepage, Jane clicks the second icon to see messages from the basket weaving carpool. (The navigation to get there is exactly the same as that of the pending requests view.) The most prominent display here is the chat-style messaging system. Vladimir has replied, and they agree to a swap. They can keep track by clicking the “Full Schedule” icon on the left-hand side and editing in the changes.

Design 3:  Mobile

Design 3 tackles non-computer interfaces, specifically mobile phones.

The Mobile design is a condensed version of the original application. It is only to be used once a carpool account has been set up online.

The first screen is a Sign In display. It also has an option to “remember me” to make it faster to use while on the fly. Note, the “Do not use while driving” message to try to remind users to be safe using our application.

Once a user has signed in (or has selected remember me) the main screen shown above will automatically get displayed. At the top it shows a countdown to the users next driving time. Below this notification, it shows what we think are the most useful information about the carpool. The three buttons are “get map”, “I can’t make it” and “View Carpool Arrangements” and can be selected in any order as needed.

The “Get map” button shows a direction list. The user has already selected the route preference on the website ie. Jane drives to Jake’s house and then Ashley’s before driving to basket weaving. In this example, the options would be “Route to Jake’s House” and “Jake to Ashley” and finally, “Ashley to Basket Weaving”. We would also have a “reverse” button at the bottom for getting back. The forward/reverse direction would have it’s default route display based on the current time.

The “I can’t make it” button displays different options to inform the carpool members. You can use the app to call, text, or email the members about the time conflict.

Analysis

Design 1:  Efficient

Pros

• Efficiency: The design allows the user to get started very quickly by immediately typing in the event they are looking for upon arriving to site.
• Efficiency: All of the steps needed to go from searching for an event to seeing who else wants to carpool for that event occur within one page.
• Efficiency: Minimal investment is required since signing in or signing up is only requested after the user has found the event that for which they want to carpool.
• Efficiency: The tab structure allows the user to quickly switch between different tasks.

Cons

• Learnability: Some users may not understand what the various UI input fields are asking for since the design lacks dense descriptions or pictures.
• Learnability: With so many options in one place to promote efficiency, beginners may not find the UI intuitive.
• Safety: Since the form does not use multiple pages, the users will lose all of their entered information if they accidentally press the back button.

Design 2:  Illustrative

Pros

• Learnability: Images are easy to understand for people not fluent in English.
• Learnability: There isn’t a lot of text; good information scent.
• Learnability: Progress bar clearly communicates how many steps are left.
• Learnability, Efficiency, Safety: Auto-complete helps user understand what they should input.
• Efficiency: Schedule view prioritizes most vital info first, while presenting less vital info as links

Cons

• Efficiency: Having to click next every time instead of having everything you need to fill in all on one page.
• Efficiency, Safety: A pop-up window requires that you first exit out of the window before going anywhere else. If you want to return to that window, you’ll have to go through all the steps again.
• Efficiency: Having to click through multiple levels of button links could be annoying if you have many groups.

Design 3:  Mobile

Pros

• Learnability: Simple interface.
• Efficiency: Sign-in only needs to happen once.
• Efficiency: Since this does not offer the full capability of the web style, the few options are very easy to access and fast to utilize.
• Safety: Easy to navigate between tabs/activities.
• Safety: Few options to make errors with.

Cons

• Efficiency: The mobile interface is unable to complete all the tasks that they could perform from the website.
• Safety: Because some buttons are so easily accessible, they may be pressed accidentally. (For example, it might be troublesome if you accidentally press “I can’t make it.")
• Safety: Since the form does not use multiple pages, the users will lose all of their entered information if they accidentally press the back button.