GR2: Design
Scenario
Alice, Bob, and Christine are doing a research project together at MIT. They have a research paper submission in a week. After several days of struggling to get arrange meetings and failing to get the whole group together, they decide to take advantage of an app that they have, called Discover.Me, that can better facilitate their meetings.
Alice
She volunteered to setup the meeting using Discover.Me. Unfortunately, she is currently not friends with Bob on Discover.Me.
She:
- Opens the application
- Navigates to the “Search For Friends” screen
- Types “Bob” into the search bar and sees a list of similar names from the MIT directory
After Bob accepts the request, she decides to create the event.
She:
- Navigates to the “New Event” page
- Types in “Project Meeting!!!” into the event name field
- Sets the meeting to take place that afternoon from 2pm-4pm
- Navigates to the “Invite Friends” page
- Types in Bob's name in the search bar
- Sees a list of her friends, narrowed down to names similar to “Bob”, and selects Bob
- Repeats this process with Christine
While doing some reading, she is distracted by her phone lighting up.
She:
- Sees a notification that Christine requested a change to the event time
- Accepts the updated event
Bob
During a short study break he checks his phone for any new notifications.
He:
- Opens the application
- Sees a notification for a pending friend request
- Navigates to the “Pending Friend Request” page
- Sees that the request is from Alice and accepts her request
Later, he checks again for the event invite.
He:
- Navigates to the “Pending Event Request” page
- Sees the invite from Alice
- Accepts the invite, since he knows he is available
- …
- Receives updated invitation
- Accepts updated event
Christine
Having just woken up from a nap, she decides to see if she has any notifications.
She:
- Opens the application
- Sees a notification for a pending event request
- Navigates to the “Pending Event Request” page
- Sees that she has been invited to “Project Meeting!!!”
- Navigates to her Events page to see if she is free then
- Sees a list of events she replied to
- Sees that she had accepted the invite to another project meeting, marked in green, at the same time
- Rejects Alice's invite with a note suggesting to change the times of the event to be 4pm-6pm
- …
- Receives updated invitation
- Accepts updated event
Designs
Design #1
Task |
Sketch |
Description |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Design #2
Task |
Sketch |
Description |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Design #3
Subtask |
Sketch |
Description |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|---|
Entering the Home Screen |
|
|
The screen presents few details to Alice. She sees some of her Friends and quickly realizes that she can find more friends by scrolling down the list or by using the Search text bar. |
Alice can immediately search for her friends by tapping the Search text bar near the top of the screen. She has one-tap access to a listing of her Events and Friend Invitations. |
Buttons and selections are made large so that Alice can tap the right targets on the screen. Alice may accidentally hit the Exit button when she taps on the Search text bar. |
Searching for friends |
|
|
The Keyboard automatically appears telling Alice to begin typing. Alice is familiar with this feature from using other apps. |
It isn't clear whether there are other option for Alice to find her friends besides searching for their names. |
The keyboard is rather compact and Alice may find herself accidentally hitting the wrong key. |
Finding and Adding Friends |
|
|
Alice sees the same list of friends as she saw on the home screen, so she is familiar with the user interface. The buttons to add a friend are colored brightly so that Alice knows she can perform an action by tapping the button. |
As Alice types "Bob," the list updates to show close matches to her entry. For longer names, this could allow Alice to find her friend without typing in his entire name. |
Alice may want to add Bob as a friend but accidentally hits Borat's "Add" button. We can ask Alice to confirm when she taps to add a friend, but this will increase the number of steps she has to perform. |
Viewing Friend's Location |
|
|
Once Alice selects her friend, a map shows Bob's current location. Furthermore, a blue dot shows Alice's current location. Alice is familiar with the blue dot representing her location, since it is also used in the iPhone's Map app. |
Depending on the level of zoom, Alice may need to further zoom in or zoom out of the map. There is a tradeoff between presenting a large map including most her friends' locations, or showing a detailed and smaller map. |
If Alice "flicks" her finger past the screen, there is danger that the current map view will be lost. It will take her some steps recreate the map screen showing her and Bob's location. |
Viewing Friend's Profile |
|
|
Bob's profile includes his phone number and email appearing in blue with underlines. This provides Alice with an affordance to click these entries. |
By selecting Bob on the map view, Alice immediately sees Bob's profile. She can click on Bob's email or phone number to contact Bob. |
If Alice accidentally taps Bob's phone number, then she will begin making a call to him. We can ask Alice to confirm the call, although this will require her to make more selections to accomplish her tasks. |
Viewing the Events Screen |
|
|
Alice will find this view similar to the earlier Friends view. However, she may not immediately realize that she can adjust the time range of events by tapping on the button on the top-right. |
The Events tab allows Alice to immediately see the events she has been invited to or will be attending. Furthermore, she can add an event with one tap. However, if Alice has a longer list of events, there is no option for her to search for the events by keyword. However, Alice can choose to view only events happening in: 1 day, 3 days, 1 week. |
Alice may accidentally select the wrong time-range on the top-right drop-down tab. The drop-down tab is rather small, compared to the other selection boxes on the screen. |
Adding an Event |
|
|
The boxes to enter Event info is brightly colored, providing Alice with an affordance to click on the fields and enter new data. |
When adding an event, Alice immediately sees the event info she needs to provide. She can select the time using a drop down box. The drop-down box may require longer time to fill in the information. |
Alice can select the time using a drop-down box, which prevents her from typing in a wrong time (e.g. 10:70) |
Inviting Friends |
|
|
Alice is familiar with these interface from the Search Friends screen she used earlier. Furthermore, she recognizes that she can tap on certain users to invite them, just as she has previously tapped to add users as friends. |
When Alice types the Search button in the Invite Firends field, she will encounter a list of her friends. Alice can also quickly search for friends she wants to invite. |
Similar to the earlier Add Friends function, Alice may find herself accidentally inviting the wrong friend if she mistaps. To prevent this, we can ask Alice to confirm before sending invitations. However, this would slow down the task process for her. |
Receiving Event Notifications |
|
|
If Alice encounters this notification when she is not using the Discover.Me app, she may not realize the notification relates to the Discover.Me app. |
The notification concisely tells Alice about Christine's proposal to change the event. To present the notification concisely, no additional information is shown about the proposed event changes. |
There is no safety issue because Alice cannot make any selections during the time the notfication box appears. |
Accepting a Changed Event |
|
|
If Alice receives the notification while not using Discover.Me, we can immediately transition to this screen in Discover.Me. This will help Alice immediately realize the previous notification relates to Discover.Me |
If the notification immediately transitions to this Discover.Me screen, then Alice may find the action disruptive. She may be using another app and find it difficult to return to the previous app she is using. |
If the notification immediately transitions to this Discover.Me screen, then Alice may find the action harmful. For example, she may be in the middle of texting a friend. This might cause her to tap incorrectly and accidentally accept the updated event. |
|
|
A pop-up box appears telling Alice that she has accepted the changes and that updated invitations will be sent to all people she originally invited. |
Alice is familiar with notifications because they are used in other smartphone apps. |
The notification concisely tells Alice about Christine's proposal to change the event. To present the notification concisely, no additional information is shown about the event details which have been changed. |
There is no safety issue because Alice cannot make any selections during the time the notfication box appears. |
Viewing Event Status |
|
|
Alice views the event info recorded in the same format which she previously input info into. Therefore, she will know where to find certain fields containing info about the event. |
If Alice has invited a lengthy list of friends to the event, then she must scroll further down to view the entire list. We can make the friends text shorter to fit more names in a page. However, doing so makes makes it more difficult for Alice to find and select certain friends on the list. |
If Alice selects taps on any of the fields displayed on this page, she will be taken to a subpage. This makes navigation cumbersome, since Alice would have to hit back to return to the Events page. |