"DeCLUB" WEB APPLICATION
This project was completed for Introduction to Human-Computer Interaction, the first class I took as part of my current major. The goal of this project was to design a a mobile or web application that would increase student participation in clubs at DePaul University. My group and I developed the idea of DeClub, a website that allows students to "shop" for clubs to join, notify users of upcoming club meetings, and joing Google Hangouts meetings with other club members.
OBJECTIVES To design a system that would increase student participation in clubs at DePaul University
SKILLS UI Design, Illustration
PLATFORM Digital wireframes
CONTEXT Class project for Intro to Human-Computer Interaction
RESEARCH AND USER PERSONAS
After initially creating the idea for this application, my group and I needed to define its target users. We decided to specifically design for transfer students, who we felt often have a more difficult experience getting involved in college activities. After conducting interviews with transfer students at DePaul University and analyzing the results, we created two personas named Proactive Pedro and Reactive Rita. Pedro is a representatino of users who are actively seeking to network and prioritize communication with others. Rita on the other hand represents users who live hectic lifestyles and need efficiency and consistent feedback and reminders about club events.
STORYBOARDS AND WIREFRAMES
After gaining a better understanding of target users of this application, the next step was to begin creating concepts that would address their needs. In order to cater to users like Pedro, we decided on creating a course cart that would allow one to browse different clubs without the pressure of having to make an immediate decision on whether or not to join. To address the needs of users who commute like Rita, a Google Hangouts meeting option was implemented. In order to visualize the context of these features, I created the following storyboards.
These storyboards helped the team visualize how users would interact with the system. This understanding guided the design of the interface by portraying the processes involved in using the application. For instance, the following wireframes created in myBalsamiq show the steps a user would take to add a club to a cart and join it.