Design
Home Screen
The home screen is where users are initially taken when they view the application. From here, you can login, create an event, or view your past events and messages.
Decisions:
We put buttons on a "well" background and provided some information about our company because testers said they had difficulty seeing the buttons. We also moved focus slightly away from the logo by moving it from the center to the left side of the screen and shrinking it slightly.
Create Screen
Business Suggestions Screen
This page is shown to the user after they have created their event and shows businesses that match the event based on the event details.
Design Decisions
Allow for scrolling through businesses with the scroll bar rather than needing to click next and previous buttons.
Sped up the scrolling speed if user hovers over a button
Changed how businesses are added to messages and show which businesses are on the message.
Changed message recipients to unchangeable blocks rather than an editable text box.
My Events Screen
Implementation
In terms of technology, we used JQuery-UI and Bootstrap for our front end, and Node.js and MongoDB for our backend. Our implementation mostly stayed true to our original design, with the exception of slight modifications in the Business Suggestions page. There, we changed the layout a bit, in response to some preliminary feedback and testing, to improve the efficiency of messaging.
We placed heavy emphasis on simplicity in our design and implementation. Our layouts were deliberately uncomplicated, and this strategy paid off in our user testing, as most users responded positively to the design.
Evaluation
Briefing and Preparation
We conducted our user tests in the same way as our previous testing in our conference with Jeremy. We first briefed our users about the problem our site tackled and the scenario behind its use.
We also performed demos with varied thoroughness for comparison. Then, for one user, we performed a demo of the full functionality of our site, including account creation, step-by-step event creation, business-results, and message sending and viewing. For the second user, we performed the same demo, except we did not show the message viewing component in My Events. And, for the final user, we did not perform a demo.
User 1
User 2
User 3
The third user tested the site without a demo from us beforehand. He immediately clicked on the "Create Event" tab in the header. He had no problem choosing a charity, but after its logo appeared in the square display, he became confused. He tried to click around the logo, thinking it might be a button. Then, he tried to click the "Logistics" display square instead of using the "next" button at the top. When nothing happened, he paused, looked around the page and noticed the top buttons. He ended up clicking the "Logistics" header button instead of the "next" button to continue to the logistics page. In the logistics section, he entered an address "77 Massachusetts Ave, Cambridge MA 02139" instead of just a city, which drew a chuckle from him when the full address appeared, overflowing, on the welcome-sign icon. He proceeded through the rest of the event-creation process without any hiccup. His reaction, when sixteen business results popped up, was "Oh, nice!" He chose the first two and successfully sent messages to them, although he did not realize that he could send one message to multiple businesses.
Reflection
Overall, the project was a tremendous learning experience, and like all learning experiences, this meant doing some things right, but also making a lot of mistakes. If we had to do it again, we would have went about the design process slightly differently.
First, we would have prototyped our My Events page. We decided not to prototype this page at the time, because it did not play a part in our user task scenario. However, in hindsight, it was an essential piece of the site as a whole, and should have been designed before its implementation.
Second, due to time-constraints, we implemented only the part of the site that served the event-planner as a user. Given more time, we would have also implemented the other half of the site, for the business as a user. This would have allowed an actual exchange of messages between event planners and businesses on the site, instead of a simulated exchange.
However, there were some decisions we still feel are strong ones. We received a lot of positive feedback about the overall simplicity of the site.