Design
|
|
|
|
|
|
|
|
|
|
|
|
Our final design uses consistent colors and widgets to achieve a native feel on a phone.
Important design decisions that were influenced by paper prototyping and the UI evaluations were the time selector screen and our use of color. The largest change in our design from the prototype to the final iteration is the behavior of the time selector. It now moves continuously instead of discretely. This makes the experience smoother and makes the user feel like they have more control over the widget.
We now use only 2 colors in the interface, blue and green. These colors are used in buttons and in the time widget and their meaning is consistent. Blue means selected but not confirmed or submitted, and green means confirm or submit.
Implementation
The following section describes our implementation details for MashCal.
Front-End
We used the built-in features of JQuery Mobile to create our UI design. JQuery Mobile is a great platform that attempts to standardize mobile development. It provides various built-in features that can be used to create mobile pages quickly.
Back-End
We have a SQLite database that stores our models and data. SQLite is a light database that is easy for us to merge with our web framework.
Web Framework
We used Sinatra (a Ruby web framework) to deploy and provide functionality to MashCal. Sinatra is lightweight and easy to use for building websites.
Hosting
We hosted our live site on hyperbo.la, from Ryan Lopopolo. We shared our codebase by using GitHub. Git is easy and helpful for us to work on our code.
Challenges
- JQuery Mobile is a new framework. It is still a bit immature and heavy to run on a mobile phone. Sometimes it is very slow to load and render.
- Sinatra provides a limited amount of functionality that would not allow us to scale up fully as opposed to Rails or Django
Evaluations
Users: We evaluated our interface on two users, representative of two of the user populations. They were interviewed during the GR1 for user analysis. One of the users was a freshman, representative of the novice user population. The other one was a sophomore, representative of the Office Socialite group.
Description: Two users who were briefed about Mashcal and the tasks we used for the user testing. They were asked to create and invite users to an event and respond to the event they created after logging in as another user. We did not do a demo because the briefing we provided was enough and our interface was intuitive.
Results: Generally, the users liked the interface and thought it was really useful. Both users liked the fact that the design was minimal and easy to set up a meeting. One of the users was grateful that some of the suggestions she made was incorporated in the design. She suggested the responder to be able to indicate the dates that he prefer and Mashcal will sort of merge the available times and find the optimum time. They really want to see the some sort notification implemented.
Recommendations: Push notification or text message notification would make Mashcal even more usable.
Problems: They did not really have any issue going through the scenarios.
Reflection
The biggest thing our team took away from the iterative design process is the idea that we are not the user. Throughout all of the prototyping and user testing, we were continually surprised that interaction methods we thought were intuitive confused users. Users also surprised us by attempting to use the interaction methods in ways we did not intend. Especially on a mobile app, it is necessary to conform enough with the platform that users can think in their "iPhone paradigm" but be unique enough to make the app intuitive and exciting.
During the implementation phase, it became clear to us that frameworks are the way to go: someone or some team has done the hard work of designing widgets and thinking about the consistency of them and how they interact together. However, it is still challenging to choose these widgets and compose them together in ways that the user expects and is familiar with.
We also realized that the we have to take an iterative approach when doing a user design. Even after two or three iterations of testing, during the evaluation, we received recommendations that would increase the usability of our design. This goes to show that we have to be taking inputs of the users into account throughout the design, implementation, testing, and deployment period of the software.
There are some features of the interface could benefit from like push notifications, multiple rounds of date selection. In the future, these features could be incorporated to make Mashcal the best date selector out there,