Design 1 - For Elderly
This design is meant to be used by elderly users. To accommodate them, the design uses a strong metaphor of a physical calendar, pictures to convey information scent, and only necessary information.
|
1AThis is the home page designed for elderly users. The physical calendar is the main focus of the page, as it can be easily understood by less technologically savvy users. Within the calendar, all events are depicted simply to create an easily readable calendar. An event on the calendar is represented by the picture of the event's main user (usually the child who needs to be driven to or from an event) along with the time of the event. Clicking on the event will direct users to a page that looks like 1B, with all the fields filled in with the correct information. The page has the bare functionality of viewing a calendar, a button to direct users to add an event, a button to direct users to help find a carpool, and a list of what is on the calendar for the current day. These choices were made to minimize confusion for the user, giving them a straightforward way to complete the most common tasks. Going along with the scenario, the user wants to add an event, and so clicks the "Add Event" button, directing them to 1B. |
|
1BThis page makes event creation simple. It asks the most basic questions: who, what, where and when. After these fields have been filled out, the right panel is populated with a list of users that are free at the given time, and by checking them off, the user can request carpools from others, or assign themselves as the driver for an event. This auto-generation of available drivers is key as it helps users avoid driving conflicts, and matches up users who carpool together often. After completing the creation of the event, the user is redirected back to the main page as seen in 1C. |
|
1CThe Main page is visible again, now updated with the new event. Notice there is a notification on the "Find Carpool" button, as the user has initiated a request for a driver for the recently created event. When another user offers to drive for the conflicting event, the user in this case will recieve another notification, and the driver details within the event will be updated automatically. Through the process of initially viewing the calendar, adding an event, handling conflicts within the addition of events, and finding an available driver, this interface uses as few screens as possible to avoid confusion with elderly users. Furthermore, the "Today" panel is useful as a quick reminder of responsibilities for the given day. Lastly, the use of metaphors helps with learnability for older users, and pictures within the calendar helps remove the need for small text, and improves information scent. |
Design 2 - Weekly View Calendar
This design shows a calendar on a weekly basis, with the height of the event proportional to its duration.
|
2AFrom this page, which is the main view, Mary can either click the 2pm Saturday slot or click New Event to add a new event. |
|
2BShe will be taken to this new event page, with the appropriately filled information. From here, she can fill in the rest of the information and click the save event button to finish Task 1. This will take her back to the weekly view, which will let her see the conflicts and complete Task 2. |
|
2CNow, to reach out to other parents for help driving Christine to the birthday party, Mary can click the drop down on the event, which gives her options for what to do next. To reach out, she will click the Reach Out option. |
Design 3 - Vertical Days, Horizontal Times, Pop-ups
This design is meant to give a day-to-day timeline of events. The days span vertically, with each day having its own gray heading bar. Underneath each day, each event that day contains a row, and driving information for to and from the event is shown on either side of the event box. Finally, the use of pop-ups in this design allows users to easily create and update events.
|
3AFrom this main view, Mary can click the add button on the Saturday heading bar to add an event to Saturday. |
|
3BThis creates a box with a pop-up, where Mary can enter the event information, and the box will resize and move itself to the appropriate location. This accomplishes Task 1, as well as Task 2 since Mary can immediately see the new event and determine it conflicts with Andy and Barry's events. |
|
3CThis picture shows a close up of the pop-up for creating an event. |
|
3DNext, to reach out for help, Mary clicks the driver icon on either side of the event box for Daisy's Birthday Party. This opens a pop-up, which gives her the easy options of choosing her or her husband Nick, or entering another parent's name with autocomplete, or clicking the link to ask for help. She will click the link to ask for help. |
|
3EThis shows a close up of the pop-up when the driver icon is clicked. |
|
3FClicking the link takes her to this page to reach out for help. From here, Mary can ask whether she would live help driving Christine to and/or from, add a custom message, get suggestions of individual users or groups of users to invite, and see who she is asking before clicking the send button, which will accomplish Task 3. After returning to the calendar view, she can open the same pop-up by clicking the driver pop-up, where she can enter the name of the parent who will be driving Christine, completing Task 4. |