Table of Contents
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 Get Your Ride 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 Get Your Ride 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 Get Your Ride, 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 Get Your Ride 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 Get Your Ride 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.
Jane arrives at Get Your Ride and sees the homepage. (Note that the other tabs would not yet visible at this point since they only become visible after signing up.)
Jane enters, "Underwater basket weaving Bakersville," into the search box and presses enter. The next section then appears, showing Jane the events that match her search.
When Jane clicks on the first result, the next section appears, showing details about Jane's event. Jane sees two other parents, Alyssa and Vladimir, who have signed up to carpool. Curious about how far away they live from her, she clicks the button to enter her address.
As a result, the section updates the "Dist from you" column. Seeing that Alyssa and Vladimir live nearby, Jane clicks the button to add herself to the event. This is when the registration process occurs for Jane since she is a new user.
Upon registering for the site and adding herself to the event, Jane can now select the checkboxes next to Alyssa and Vladimir and click the button to email them.
Design 2: Illustrative
Design 2 takes an illustrative approach, catering towards those who are illiterate or have poor English skills. There are two main motivations behind designing with this group in mind. First, one of our interviewees was an immigrant who had trouble connecting with other parents due to language barriers. Second, although parents as a whole are generally capable of using technology for their daily needs, they prefer interacting with simpler interfaces that are easy and intuitive; an illustrative approach would satisfy this need. As such, the design optimizes for learnability, but sacrifices efficiency. This storyboard aims to walk through most important features of Design 2, from Jane's initial sign up to Jane dealing with her first scheduling conflict.
Coming home from Bob’s underwater basket weaving class, Jane remembers hearing about Get Your Ride 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. (Note: There will also be an interface where Jane can block out times when she is unavailable, so the matches will be filtered out by compatibility.) 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 targeting mobile phones. This design is essentially a condensed version of the original application. Ideally, it would only be used once a carpool account has been set up online. Our storyboard works under this assumption.
The first screen is a sign-in display. It also has a “remember me” option to make it faster to use while on the fly. Note that we include a “Do not use while driving” message as a reminder for users to prioritize safety while using our application. Jane enters her email and password that she previously set up online.
Once Jane signs in, the main screen shown above is automatically displayed. At the top, there is a countdown to Jane's next driving time. Below this notification, Jane sees buttons to access the three most relevant tasks, “get map”, “I can’t make it,” and “View Carpool Arrangements.”
Jane presses the “Get map” button, which pulls up a list of directions to aid Jane in navigating her carpool route. For example, suppose Jane needs to drive to Alyssa’s house and then to Vladimir’s house before driving to basket weaving. In this example, the options displayed would include “Route to Alyssa’s House,” “from Alyssa's House to Vladimir's House,” and “from Vladimir's House to Basket Weaving”. We would also have a “reverse” button at the bottom for getting back. The forward/reverse direction would have its default route display based on the current time.
Jane can also press the “View Carpool Arrangements,” which shows the person who is responsable for driving next time, followed by the full schedule.
However, since Jane needs to stay home with Steve today, she needs to inform the other members of her carpool in order to find a replacement. She returns to the home screen to press the "I can't make it" button. The “I can’t make it” button displays different options to inform the carpool members. Jane can then use the app to call, text, or email the members about the time conflict.
Analysis
Design 1: Efficient
Pros
- Learnability: The tab structure follows the real-world metaphor of file folders, a method of organization that most parents would be familiar with.
- Efficiency: The design allows the user to get started very quickly by immediately typing in the event they are looking for upon arriving at site.
- 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: All of the required steps, from searching for an event to finding other interested parents, occurs within a single page.
- Efficiency: A floating sidebar on the right allows the user to quickly access other parts of the form on the page.
- 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 who are not fluent in English.
- Learnability: There isn’t an overwhelming amount of text, so the user simply needs to glance rather than read; by information foraging theory, the interface provides good information scent.
- Learnability: When users are trying to find a carpool, the progress bar clearly communicates how many steps are left in the process.
- Learnability, Efficiency, Safety: Auto-complete helps user understand what they should input.
- Efficiency: The schedule view prioritizes the most vital information first (the user's next pick-up time), while presenting less vital information as links.
- Efficiency: An editable schedule is linked beside the group chat interface, in anticipation of the fact that a major reason why the parents would need to communicate with each other is that they need to swap days.
- Safety: Since nearly all the windows are pop-ups and each of these have a highly visible "X" icon, the user is in control because they can see the homescreen at all times and know that they can easily return to the homescreen once they exit out of the pop-up.
Cons
- Learnability: Images do not mean the same thing to everyone and may actually confuse some people who are unused to seeing them.
- Efficiency: The user must click "Next" every time; the form is not located all on one page.
- Efficiency: The user needs to click through multiple levels of button links to access groups, which could be slow and frustrating if the user has many carpools to keep track of.
- Efficiency, Safety: Pop-up windows require that the user first exit out of the window before going anywhere else. If the user seeks to return to that window, they'll have to go through all the steps again.
Design 3: Mobile
Pros
- Learnability: The interface is simple and intuitive to use.
- Efficiency: Since mobile phones are generally personal devices, the user stays logged in, so they only need to sign in once.
- Efficiency: Since this does not offer the full capability of the website, the few options are very easy to access and fast to utilize.
- Safety: It is easy to navigate between tabs/activities.
- Safety: There are few options, so making an error is unlikely.
Cons
- Efficiency: The mobile interface is unable to complete all the tasks that users 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 the user accidentally presses “I can’t make it.")
- Safety: Since the form does not use multiple pages, the user will lose all of their entered information if they accidentally press the back button.