ClientCarnegie Mellon Information Systems Department
CourseJunior Capstone Project, Spring 2013
DescriptionEnteract is a responsive website which facilitated for the first time ever crowd participation at Carnegie Mellon's most famous and largest alumni event, Spring Carnival. Attendees interacted to select the student organization-built booth they deemed the most innovative to be the winner of a new people's choice award.
This project presented our team with both great challenges and rewards. The project originally began as an audience polling system for gauging and grading participating in a university classroom setting as a free replacement for the costly iClicker system.
However, after the basic system was already in place, CMU’s Carnival Committee approached the department simply asking for an application to increase audience participation. Having embraced from the beginning an agile design methodology, the team was able to be flexible enough to seize the unique opportunity at hand to create the requested application. Overall, promoted by a high-visibility print and digital advertising campaign, Enteract attracted around 1,000 unique users over a three-day period and to this day is the only project in the course’s history to be deployed live and receive recognition on the university website’s front page
In a total of only three weeks, we adapted our classroom polling system to be the first-ever interactive voting experience designed for Carnegie Mellon’s Spring Carnival. Due to the project’s success our team was asked to present, among other events, at the Meeting of the Minds, CMU’s undergraduate research symposium. In order to communicate the value of our product to stakeholders and improve the experience for next year, I mapped the user experience with insights gained from exit interviews.
The overall experience can be divided into two scenarios:
- On-Location Voting– A user’s initial touchpoint is a poster located at the physical grounds of the carnival and rates a booth directly after touring it.
- Retrospective Voting- A user’s initial touchpoint is an abstract recollection of an experience or a person talking about Enteract which leads to voting after one has viewed a booth. Voting takes place outside of the carnival grounds, such as when one is at dinner with friends.
Scan QR code
Connect With Facebook
Voting for a Booth
Swipe to Rate
As both the team’s UX and Visual design lead, I took insights gathered from our team’s initial research and user testing to structure the interface and form both the interaction and visual design languages.
My decision to use an agile design process for this project, so as to work in parallel with the developers’ sprints, I was able synthesize and transfer our huge amount of research and pre-existing design framework from the classroom polling application idea to the modified implementation for Carnival that our stakeholders desired. In fact, it was our understanding of the target audience gained through the personas, that was the most helpful. While the setting changed from the classroom to an on-campus carnival, the people we were designing for stayed the same: Carnegie Mellon students (either current or past), professors, and administrators cover the majority of Spring Carnival attendees.
Explaining my role in further detail, my responsibilities can be put into the two categories highlighted on the process diagram above structuring the interface (interaction/ user experience design) and visual design:
Structuring the interface consisted of sketching initial concepts, creating low and high-fidelity wireframes, making the site map, and creating both paper and PowerPoint prototypes to be used during different user tests.
Visual design duties required researching, presenting to my team, and creating all original assets and screen layouts. Creating the visual language involved among many things choosing a color scheme and typographic conventions, which then summarized in the final style guide.
User Research & Personas
Our initial research consisted of interviewing professors and other academic administrators and surveying students in courses which used the iClicker system, which we had previously identified to be our main competitor through creating a comparison matrix within the competitive space of audience polling smartphone applications.
After aggregating and analyzing these hundreds of individual accounts, I determined there to be three main actors with different system needs. So as to facilitate greater understanding and empathy for the users’ needs among my teammates by personifying the system requirements and user stories, I created the personas shown at left.
Gathering & Prioritizing Requirements
We then combined the key tasks and goals of each of our personas to derive the product requirements, use cases, and ultimately, key progress indicators. We then prioritized these requirements to determine our project timeline.
The second version of the Venn Diagram reveals key insights about prioritizing requirements. Those that are shared between the primary personas (Susie the student and Priya the professor) as well as those higher up on the diagram are those that should be implemented first.
To create a shared group vocabulary and make sure we were on the same page we organized the requirements based on associated behavior type: A-level: Poll Class (professor asks questions to class and students answer), B-level: Assess Progress (professor assesses class’ progress and students assess their individual process in a class), and C-level: Assess Product (a department head viewing the product information on our landing pages weighs the cost and benefit of adopting our product).
Medium Fidelity Wireframe Concepts
Classroom User Tests
We created a click-through prototype tested using 100 students in the Freshman Introduction to information systems course. Through this trial, we were able to stress test the system’s request handling capacity and found useful information to improve the student’s UI, which was generalizable enough to be able to integrate these changes in our Carnival implementation.