Designing and Developing a simple App for Class Assignments Management
This is a post describing the progress on design and development of an App prototype for the Interaction Design class of the University of California San Diego.
In the following sections I will walk you through the development of the App from the begging, the need finding, paper prototyping, real prototyping, user testing, design choices and the final results.
Needfinding:
We were given three topics our app could be about, “Change”, “Glance” and “Time”.
Change Mission: Design an interface that facilitates personal or social behavior change.
Glance Mission: Find people and design a personal dashboard tailored to their needs.
Time Mission: Redesign the way we experience or interact with time.
I picked a mix of Time and Glance, by observing how three students dealt with their assignments, I came up with the idea of reducing their stress when it comes to scheduling their tasks, tracking their assignments and deadlines. So instead of students having to write notes regarding deadlines for each class, they would instead have a calendar managed by his professors, with real time updates where they could just go and see what they should be working on at that time, how the class have been progressing towards that activity and so on.
After observing and talking to the students; came the time to brainstorm ideas for the app, how should it solve the issues, what were the issues, how could I facilitate the students and professors lives.
My Point of View on that is the following:
“Today each Professor has his own calendar and students have to remember all deadlines from all different classes, it does not need to be that way. If professors had the ability to plan their assignments with knowledge of each other agendas they could do a better job at distributing work through the semester. If students had some form of access to such calendar they wouldn’t need to keep track of all deadlines themselves, reducing the load on them. Time and memory management for students and professors seems to be a great opportunity.”
Then came story boarding, or creating little stories that illustrates how that app could solve real world issues:
With some very early paper design prototypes:
Then came the time to do more paper prototypes, this time being a bit more serious, there was also some space for doing heuristic evaluation for the prototype, I believe it was still too early for that, but that is what we did haha
From there on the development started to have a real shape, the first navigational prototype was baking in the oven, there was already some feedback on the paper prototypes I could use to make the app better, at this point I was creating a development plan, a timetable for this project.
Then came the first navigational prototype (it can be accessed here: http://classlendary.brasi.li/v1/app.html ):
The only functional thing this prototype did was navigation, I implemented it in CSS,HTML,JS because I found it easier and faster to do it that way, since this was just navigational I could have used a prototyping software such as Mockplus to make it, but I was thinking ahead, at some point the prototype would have to be a fully functional app, so why not build the skeleton in a technology I have total freedom ? And that is why the first prototype was coded, mind you, very simple code, it would take me longer to drag and drop my way into all those panels above.
The following prototype is about the same as the first one, just that it was all functional app, you can access it here: http://classlendary.brasi.li/v2/app.html
So the next step was to test that functional prototype with real people, by watching the testers and their reactions I would be able to tell what is working and what is not, what is confusing, what needs more explanation and so on.
With that testing I came up with a list of changes that the app needed, for example, even though a calendar is really intuitive for dealing with time, what happens when you have assignments assigned for the next month, say day 1 or 2 of that month, and you are in day 28 of the previous month? If you don’t look at the following month in the calendar, you are probably screwed, with that in mind, I came with a redesign for the home panel of the app.
Those were prototype A (http://classlendary.brasi.li/v2/app.html)and prototype B (http://classlendary.brasi.li/v3/app.html).
With those I could do A/B testing online and see which worked better, my finding was basically that the list panel worked better but was lacking time representation, while calendar panel worked way worse but give the users the time/scheduling feel they expected from the app.
Though the service is quite expensive the online testing was really good and done at UserTesting.com .
With that final testing I had the input on what I had to do, I changed the font to something more classy, fixed some calendar view bugs, mixed the two time interfaces together and finally got into the final prototype (http://classlendary.brasi.li/v4/app.html):
Now with the final prototype in hand I am here, showing the results of this work that have been baking for quite a while!
You can see a video of the app here:
See Ya!