Storyboard 3 - Minimalist

The overall motif of this design is minimalist. The other two designs focused on a central calendar as the main focus. For this design, we attempted to try something different, instead letting the calendar be just part of the overall system. Additionally, we wanted to reduce the amount of clutter on the pages to make the page look clean and sharp. In doing so, this design will have any more pages but would be easy to navigate and offer many affordances.

3A 

This is the home page for PackPlanner. As mentioned before, instead of having the calendar be the central focus, we instead have many different aspects of the site represented by the tiles. This simplistic design was inspired by Preston's design for children using easily clickable tiles and Andrew's design for illiterate users that incorporated pictures for every action.

In order to add Christine's event, Mary would click the Calendar tile to navigate to the calendar view.

3B 

This is the calendar view shows a very basic version of the calendar. The view lets the user visualize the entire week through the collapsed days, while at the same time reduces clutter by focusing on just one day at a time. In contrast to the other designs, this design does not try to represent the events using space as a measure of time (i.e. longer events have longer boxes). This non-spatial time representation was slightly inspired by Preston's design for children.

One of the nice this about this design is the affordances offered by the event tiles. There are two buttons in the lower right that use familiar pictures for editing and removing. Additionally, clicking the driver's wheel or the names next to the driver's wheel allows the user to reach out for help (discussed later). Finally, clicking any other place on the event tile (the tile will stand out when the mouse is hovering over it to indicate to the user it is clickable) will go the event details page.

To add Daisy's birthday party as an event, Mary can click either the Add Event button at the top or the Add Event button below the event tiles.

3C 

Clicking either add event button comes to this New Event page. This is a basic form, designed to be minimalist and including photos as per Andrew's design for illiterate people.

Mary will fill out this form with the correct information, leaving the driver fields empty as she is not yet sure who could drive her. After completing this form, Mary has successfully added the event and completed Task 1.

3D 

Adding the event will return Mary to the calendar view. As you can see, Christine's new event has been added. Mary can now see that there is a conflict since both she and Nick will be busy driving Andy and Barry respectively. This accomplishes Task 2.

3E 

As mentioned earlier, this page offers the affordance of quickly reaching out for help for events. By hovering over the driving wheel or the names next to the driving wheel, an informational message will pop-up reading "Reach out for help driving, and a rectangle around the names and driving wheel will turn dark gray. This shows the user that they can simply click the rectangle to reach out for help.

Mary will click this rectangle to reach out for help since she and Nick are already busy.

3F 

Pictured to the left is a close up of the event tile showing what happens when the mouse scrolls over the rectangle containing the driver's wheel and names next to them.

3G 

After clicking the rectangle, Mary will be taken to this page for her to reach out to other people for help driving. On this page, she can type a custom message, in addition to choosing who to ask. To help her choose, the page offers the affordances of autocomplete, and suggestions for both individual users and groups. The suggestions feature and the user group feature come from Preston's third design.

Here, Mary will fill out the custom message explaining why she can't make it and maybe possible ways she could help (i.e. dropping Christine off at the helper's house on her way to Andy's game). Then, she will choose users to ask. This picture shows her typing Olivia into the text box, with two possible users suggested in autocomplete. After pressing enter, a message will be sent to the chosen users, completing Task 3.


3H 

Finally, to change the driver information, Mary can click the edit icon (pencil) from the calendar view for a particular event, bringing her to this page. From this page she can type in the driver's name using the autocomplete fields. When she saves the event, the information will be updated, completing Task 4.

Learnability

  • Pros
    • The icons on the homepage are very simple to learn and give the user a good idea of the layout and affordances of the site.
  • Cons
    • Knowing to click the driver wheel to reach out for help is something that must be learned throush showing.

Efficiency

  • Pros
    • The calendar view offers lots of affordances to choose what specific task the user wants to do.
    • The ability to contact groups of users at once saves time adding each individual user to the list.
  • Cons
    • Unfortunately, the minimalist style is designed to not have a lot of information.
    • Navigating from page to page takes time for the user.

Safety

  • Pros
    • The simple navigation structure makes it hard for the user to get lost.
  • Cons
    • The new and edit event pages could include cancel buttons, since the user always needs a way out.
  • No labels