HAPPENINGS

Mobile Events App

 

University of Michigan

Mobile Events App

 

THE TEAM
Danielle Colbert, John Falcone, Sara Ramaswamy, Jessica Vu

MY ROLE
UX Designer and Researcher

TOOLS
Adobe XD, InVision

OVERVIEW

Happenings is a mobile application for campus events inspired by the lack of resources available to students to find events that align with their interests in a centralized and accessible way. The application provides a personalized experience for users with a custom feed curated based on their interests and activities, and allows users to save and RSVP to events directly through the app.

Initial Ideas

College students are relying on club fairs to discover new clubs to join and oftentimes these fairs are overwhelming and inefficient to navigate. 

The team wanted to design a tool that centralizes, digitizes, and simplifies the search for campus events that align with students' interests in an efficient and accessible way, so that they can find the community that is right for them and become more involved on campus.

Design Process

DEFINING THE USER

As a team, we began design process first by defining a target user through the development of personas and scenarios. It was important for the team to think about what kind of users they were designing for and understand their goals, motivations, and situations. 

We defined our target users as college students looking for campus events that relate to their interests and club admins who want to promote their club's events on a centralized and digitized platform. Our secondary users, we defined as a seasoned user who is only interested in seeing what is happening on campus from time to time. A user we are not designing for, our anti-persona, is a parent of a college student looking to find student-led events to attend while on a visit to campus.

Key Findings

After interviewing and testing users on the current site, we came up with the following key research findings that highlight overall user attitudes towards the design and usability of the existing site.

  1. Stakeholders and users want items in the collection to be more visible and accessible

  2. Users found the current archival site to look outdated and “archaic”

  3. The filtering system of the current archival website is a big frustration experienced by users

Personas + Design Requirements

PERSONAS

We wanted to make a website with an improved ability to search and browse to make resources in the Ryerson and Burnham archives more accessible for a diverse user-base from experts to non-specialists.

 

SCENARIO SKETCHES

QOC’s & WIREFRAMES

Our team worked through design considerations for three critical features of our application: event filtering, navigation, and displaying events through the QOC (Question, Opinions, and Criteria) approach. In this Design Space Analysis, comprised of 3 QOC’s, we consider the tradeoffs between different design options, highlighted the preferred option we would like to adopt, and explained the rationale for adopting it.

We chose collapsible pills for our users to filter events. With collapsible pills, the filtering option saves a lot of space on the screen so as not to confuse or overwhelm the user. It is also intuitive to use because many popular website and app designs use this aspect for menu and filtering navigations. There is also continuous feedback available to the user because they are able to see each step of their filtering process.

We chose collapsible pills for our users to filter events. With collapsible pills, the filtering option saves a lot of space on the screen so as not to confuse or overwhelm the user. It is also intuitive to use because many popular website and app designs use this aspect for menu and filtering navigations. There is also continuous feedback available to the user because they are able to see each step of their filtering process.

Screen+Shot+2020-07-31+at+12.11.17+PM.png
We chose to display the app navigation at the bottom of the screen in a bar form. This way, the space of the most of the screen real estate is taken up by the app content, the users can understand it easily as this is the display for many popular social media apps, and it requires low effort because it is within the thumb zone.

We chose to display the app navigation at the bottom of the screen in a bar form. This way, the space of the most of the screen real estate is taken up by the app content, the users can understand it easily as this is the display for many popular social media apps, and it requires low effort because it is within the thumb zone.

Screen+Shot+2020-07-31+at+12.11.35+PM.png
We chose to display “featured” events in a carousel at the top of the screen with a vertically scrolling newsfeed that displays the user’s personalized events right below the carousel. This layout follows strong conventions of other apps that need to display similar information - it conserves screen real estate while allowing users to see all information at once with continuous feedback.

We chose to display “featured” events in a carousel at the top of the screen with a vertically scrolling newsfeed that displays the user’s personalized events right below the carousel. This layout follows strong conventions of other apps that need to display similar information - it conserves screen real estate while allowing users to see all information at once with continuous feedback.

Screen+Shot+2020-07-31+at+12.11.47+PM.png

PAPER PROTOTYPE

This is a video of our lo-fidelity paper prototype that shows a user flow and in-app interactions.