GR6 - User Testing
Design
Implementation
Back-End
The back end of the web site was built using Node.js and Express. The decision to use Node was mostly for self-improvement purposes, as no one in our group had used node before and wanted to learn something new. In addition, Socket.io was used to build the event driven portion of the app, mainly the Question Queue. The database used was Postgresql, interfacing via the 'pg' module.
Front-End
The front end of the web site was built using HTML, CSS, and Javascript at its core. However, many frameworks were involved. For one, the javascript was served using Embedded Javascript (EJS), which is a templating system. In addition, Jquery Mobile was heavily used, which provided us nice ajax animations and mobile widgets. The decision was made because we figured the biggest use case was on a mobile phone. Other frameworks include Swipe.js for the Stats page, and jquery-rate-it for the stars on the feedback page.
Implementation vs Usability
The main problem with our implementation versus the usability of our system was in the time aspect. By attempting to build our system on a new infrastructure that we were not familiar with (node), there were many speed bumps and getting up to speed to do usability fixes proved very difficult. Much of our time was spent trying to generate data dynamically and setting up the database than usability fixing. In hindsight, it would have been preferable to do a framework we were all familiar with (i.e. rails) as opposed to something new, as that would have allowed us time to make more usability changes. The technical learning curve was our biggest obstacle.
There were other usability fixes that we just didn't know how to do. For example, we were unsure how to augment the Question Queue to include upvotes and to allow the tour guide to remove questions. The latter would have required a tour guide portal that we did not have time to do. The Maps page initially was going to include a path indicating the current tour, current location pin, and a color overlay across the buildings so that the tourist would know what type of building they were walking by (for example, coloring all administrative buildings red, all computer science buildings blue, etc.). This would require a lot of customization with the Google Maps API, which would have been tricky. The 'schedule meetup' feature was supposed to notify the student via email, however that was not fully implemented due to issues getting email to work with node.js .
Evaluation
To evaluate our implementation of the ConnecTour UI, we crashed a tour being conducted on Monday and asked three tourists to test our interface. The three users we found to conduct this round of user testing were tourists, although they were unfortunately not all prospective college students. Early on in this project, we determined that our target user population would be what we called "story tourists": prospective students who were interested in hearing specific and detailed stories from college students about what the college was like. However, as it was already hard enough to find students who were prospective students, let alone "story tourists," our user population was the closest we could find to our desired target population.
Our user test was conducted on the user's mobile device on some modern browser (e.g. Chrome, Safari, etc.). The users were given the briefing and tasks to do below.
Briefing
Problem:
Our group is trying to solve the following problems for college tourists:
- College tourists often have trouble finding campus events/activities, accessing current students for more specific inquiries.
- Tour Guides tend to spend time repeatedly answering common questions from tourists which detracts time from the tour.
Goals:
Our goals for the ConnecTour UI are the following:
- Find out about events on campus
- Facilitate interaction between tour guides and tourists
- Facilitate student-tourist interactions
- Find out about general stats/frequently asked general questions easily
Information about you, the user:
- You are a tourist at MIT (if possible, put yourself into the shoes of a prospective student).
- You are about to check into a tour in the application before the tour begins.
Tasks
- Check in to a tour and Ask a question to the tour guide.
- Find a fact that interests you about MIT.
- Find a dance related event happening either today or tomorrow.
- Find a story that interests you and schedule a meetup with a student who wrote a story.
- Leave feedback for your tour guide.
User 1 Problems
User 2 Problems
User 3 Problems
Reflection
Evan
This course was a very interesting introduction/foray into the world of usability testing. I came into this class with high expectations, and the whole the class delivered. The lectures were engaging and interactive and I learned a lot. More specifically, I learned how to effectively user test, the 3 main principles (safety, efficiency, learn ability) and the specifics within each, the importance of typography and color schemes. The project gave us a chance to implement many of these ideas.
The main thing I would do differently in the class would be to try and focus on a more specific problem for our project. I think it would have been fruitful to work on just the Question Queue and use that as our app. I think the final product would have been a lot more polished, and we would have had more time to work on usability issues, which is the focus of the class. In addition, I would have liked to have made the lecture panel (I was late both lectures that my name was called). But hindsight is 20/20, and overall I had a great experience! (and a great TA :) )