Title | Screenshot | Alternatives | Description & Justification |
|---|
1. Title Screen | | - Our first implementation of the title screen actually centered the form fields.
| - We opted to shift the form fields to be slightly higher (40% way down the screen), because we realized that otherwise, the soft-keyboard would actually occlude the Log In button. (Pilot Testing)
|
2. Tutorial Screen | | | - One of the biggest issues raised from our heuristic evaluators was that the application's minimalistic design and gave users a slight learnability problem when confronted with the application for the first time. The evaluators suggested for some kind of tutorial or instructions to walk first-time users through the the main features of the user interface. We thus implemented a by-passable tutorial screen which walks users through the various icons and what they meant on the home screen, as well as explanation of the icons on the map view. (Heuristic Evaluation)
- Based on our user tests, many of them showed approval and were welcoming of the tutorial screen. (User Testing)
|
3. Bubble showing the details of the person have a close button on top right corner
| | - tapping on a dot denoting a persons position opens a bubble showing the details about that person.
- previously this bubble was dismissed by a second tap on the dot.
- our new design have a small "x" at top right to close the bubble.
| - people found it hard to figure out how to close the details bubble, because of the missing affordance, even though this feature is externally consistent with google map applications.
- to alleviate this problem we made the close button visible.
|
4. Profile Page
| | - previously all the profile details were enclosed in a bounded text box.
- in our new design we removed the boundaries.
| - people confused these boxes as editable text box.
|
5. Map view of event
| | - previously the RSVP was indicated only by difference in color (red, green and gray) of the connecting lines.
- now it is indicated by both colors and texture. and a legend is displayed on upper right corner to help users learn the meaning.
| - choosing only color as indicator proved to be ineffective because it was hard for color blind people to distinguish these colors.
|
6. Notification Page
| | - originally all the notifications were displayed in similar manner, irrespective of whether they are click-able or not.
- now the notification which may require user to perform an action or have further details to show have a tine arrow on right, giving the affordance to show more.
| - users faced difficulty in understanding why tapping some notifications redirects them to another page while on some nothing happens.
- to let user distinguish these different kind of notifications visually we placed an arrow for the notifications which are click-able.
|