Eventie
bringing students together.

eventie_logo.png

The Project

During this eight week project, I, along with three other students, designed, from conception to digital prototype, an application that aligns with the 2019 CHI’s Student Design Competition prompt of strengthening social fabric and enhancing interactions between individuals and communities. The prototype was designed using Figma.

Eventie aims to help students at the University of Michigan browse and connect with organizations that interest them on campus.

Research

Problem Statement

The current methods of finding clubs on the University of Michigan’s campus are frustrating. Students run into out-of-date websites, past Facebook events, and inactive social media accounts of many organizations on campus, hindering the ability to join these clubs or attend their events. 

 

Currently, tools like Maize Pages, Facebook and the Michigan App offer somewhat of a bridge to connect organizations and students, but nothing is intuitive, up to date, or accurate. There is also no way of filtering school organizations by student interest on any existing platform. 

 

We want to create a single application that consolidates all campus club information and events to allow students to find clubs based on their interests and stay in the loop for meetings and events. This will hopefully remediate the disparity between a student and the many on-campus clubs the University of Michigan has to offer.

Competitive Analysis

Direct Competitor

Maize Page logo.jpg

Why: Its goals and implementation are very similar to what we want to create in order to link students with campus club events.

Advantages: Functionality: students can use it to search and filter through events. 

Disadvantages: Poor interface, low standards for event information and maintenance, lack of engagement from organizations on campus, and contact information for many organizations is out of date, providing false information for students. 

Filtering: 

• Unclear how events are organized by default

• No built-in personalization

• Users can search and filter by Dates, Themes, Categories, and Perks

• Users can click on an event to get additional information and integrate events with iCal or Google Calendar.

Analagous Competitor

mindbody.jpeg

Why: MindBody serves as a platform to connect people to a variety of services including health, wellness, and beauty specialists.

Advantages: Offers features such as seeing time, date and location of events, the ability to add favorites, add events to a calendar, setting reminders for events, and having updated contact information.

Disadvantages: Lack of feedback when using the application.  

Filtering: 

• Allows searching for a certain service, ie yoga, and the search results return with yoga studios in the user’s area.

Personas

“I want to learn how to build my resume, practice consulting, and learn from those older than me. I also want to foster professional connections.”

Brooke

About:

Age: 19

Device Used: Laptop, iPhone

Brooke is a 19-year-old college student eager to develop herself to prepare for post-graduation. She is a computer science major, but is also interested in other business factors. She needs a concise way to browse and organize clubs that will help in mentorship, professional growth, and career preparation. 

Goals:

  • Learn more about on campus organizations that will help boost her resume and learn more about the recruiting process.

  • Gain a larger network and learn how to develop professionally.

  • Find something at Michigan that can assist her in landing her dream job.

Frustrations:

  • Thinks there isn’t enough tangible information about each professional or developmental organization or what they provide.

  • She also finds it hard to discover which academic and professional clubs are on campus, and has only heard about the larger organizations that are centered around “fun”.

“I want to join a club I’m passionate about!”

Luke

About:

Age: 18

Device Used: iPhone

Luke is an 18-year-old male who just began his freshman year of college. While he isn’t sure of his major, he is interested in biology. He loves being outdoors and in his free time enjoys volunteering. He is trying to find ways to get involved on a new campus. 

Goals:

  • Find a club related to his interests: outdoors and volunteering.

  • Make friends who have similar interests.

  • Through the club, he hopes to feel more confident in choosing his major. 

Frustrations:

  • The amount of club options is overwhelming. 

  • He doesn’t know of any clubs involving his interests.

  • The club finding event on campus is too large to find an event he is passionate about. 

Based on our research and goals, we created two personas. We decided to build personas to give us a reference point of what kind of people would be using the app and what it needs to include and solve. For the personas we included basic information, goals, frustrations, and quotes. 

Scenario

          It’s the second week of Adam Jones’s freshman year. He wants to find a club event to attend this week. Adam refers to our platform in search of an event. It’s his first time using it so he fills out some information about himself and his interests. He chooses to add interests to his profile like Volunteering, Nature, and Sports. He saves his profile and starts looking through this events this week that are suggested to him. He finds an event for Michigan Climbing Club where he can try out rock climbing on Saturday at 7pm. He RSVP’s for the event and adds it to his calendar so he won’t forget. He also follows Michigan Climbing Club in case they host any other events he might be interested in later. 

 

Goals / Tasks Successfully Completed with our platform: 

  1. Found events tailored to his personal interests.

  2. Added event info to personal calendar.

  3. Signed up to get more information in the future.

Design

Sketches

Screen Shot 2020-10-07 at 1.08.21 PM.png
Screen Shot 2020-10-07 at 1.07.56 PM.png

We started the design process with sketches. This is the way I iterate through many design ideas and options quickly. The sketches gave us a better idea of potential interactions to include in our app.

Storyboards

We then created storyboards to further shape our user journeys. The storyboards are used to show some of the ways students might use the app and help us develop requirements for the application. 

Screen Shot 2020-10-07 at 1.14.47 PM.png
Screen Shot 2020-10-07 at 1.15.02 PM.png

User Flow Diagrams

We made user flow diagrams to show how a user would move through the application and how the screens would interact with each other. Because there are two types of users (students and clubs) there are two main pathways.

Screen Shot 2020-10-07 at 1.27.15 PM.png

Club: Create Profile and Add/Edit Events

Screen Shot 2020-10-07 at 1.27.54 PM.png

Student: Create Profile and Browse

Screen Shot 2020-10-07 at 1.30.51 PM.png

Student: Add Event

Screen Shot 2020-10-07 at 1.31.24 PM.png

Wireframes

Screen Shot 2020-10-07 at 1.43.13 PM.png
Screen Shot 2020-10-07 at 1.43.56 PM.png
Screen Shot 2020-10-07 at 1.43.23 PM.png
Screen Shot 2020-10-07 at 1.44.10 PM.png

We turned our sketches into wireframes, using figma, to see the layout on a computer. These wireframes made it easier to visualize our design ideas and make adjustments accordingly. The designs were then used for paper prototype testing. 

Paper Prototype

Added back arrows to allow the user to go back and forth between pages to reduce confusion.

We made every button/call to action a circle to provide consistency for our users and to make our interface more intuitive.

Screen Shot 2020-10-07 at 1.58.47 PM.png

The navigation icons we chose are common icons that are easily recognizable, such as a house for the homepage, and person silhouette for the profile page. 

Turning our wireframes into a paper prototype helped our team feel the flow of the design and determine if our sequential actions made sense. From testing the prototype, we made several key design decisions and discovered possible improvements.

Key Takeaways from Testing:

• Include a calendar page for events. This calendar page will show all the users’ events in one centralized location. This is accessible from the second icon on the navigation bar on the bottom of each page.

• Make a student profile page for each user. They can see the clubs they are a part of, upcoming events, their interests, and the information that is unique per user. This will be accessible from the last button on the navigation bar.

Digital Prototype

We then developed our paper prototype into a digital prototype. This brought the feel of the prototype closer to the final design and gave users a better understanding of the application for testing. From testing the prototype, we made three key design improvements. 

Key Improvements:

Screen Shot 2020-10-07 at 3.04.35 PM.png

Added interactive filter differentiation between clubs and events when browsing for more precision.

Screen Shot 2020-10-07 at 3.05.14 PM.png

Added visual calendar within Calendar page instead of a list of upcoming events for better understanding.

Screen Shot 2020-10-07 at 3.04.12 PM.png

Added ability to switch accounts to make it easier for users who are both a student and a club owner.

Final Design

Taking what we learned from testing the digital prototype, we made upgrades to our design leading us to our final design. Some of the screens from this final design are shown below.

Frame 1 - Login.png
Student Registration.png
iPhone 8 Plus - 9.png
iPhone 8 Plus - 5.png
Student Registration (3).png

Final Takeaways

From this project, I learned that there is a significant gap in ways to connect with clubs on the University of Michigan campus. Through this process, I discovered that students want customizable options for filtering through potential events and clubs to join. They also want a centralized location to keep track of their events due to their already busy schedule. These realizations guided the design and led to the final design.