Primary Screens

These primary screens show the major framework for the app, as well as the visual component. Some of the major changes made from the wireframes to the final screens came from the search function.


In the above primary screens, when the user clicks on search, it directs them to a filter page that allows to search by specific name, category, and whether the user is searching for an event or group. That page is then directed to a filtered page of listings once the user pushes apply. The user can then filter those results even further, by date, price, and distance to make the event exactly what the user is searching for.


Similarly, the user profile here adds saved events. When the user "likes" an event, it automatically gets placed into their personal event filter.



Virtual Student Events Calendar


Fall 2016


Personal Project


Ideation, Creative Direction, Prototyping, Videography



Students at large universities, like the University of Washington, struggle to find communities they feel comfortable in. At the University of Washington, only official events calendars and Facebook events allow students to find what is happening on campus- technologies that are not inclusive or accessible always.


A holistic application that allows students to discover events going on, and people going to those events, will create opportunities for student engagement and discovery of new communities.

Initial Research




Event Expands

Search Function

Search Results

These wireframes showed the homepage full of events (in a lotto and newsfeed-style arrangement) that are scrollable, and then expand when they are clicked upon. The user can then search events via the bottom search navigation, and filter their results as they search.


However, it quickly became clear after team critique that the search section needed multiple levels and abilities to search. When we mapped out a typical user flow, the need for genre-specific searching (and thus categorization of events) was necessary for most users looking for something generic in the area of their interest.

Visual Identity


Graphik Semibold Graphik Regular Graphik Light

Dub Cal in Action

Final Thoughts

This project proved particularly important to my experiences as a designer as I navigated, in a quickly iterative manner, how to translate my ideas to developers and have them produce the visuals and interactive pieces I imagined in my prototypes. Working together on an entirely self-driven project with my peers was rewarding and real, and allowed me to see the potential of cumulative knowledge and action working hand-in-hand to create technology-based inclusion.


This is a project four peers and I worked on together called Dub Cal. Dub Cal scrapes event information from Facebook, the University of Washington Calendar, list servs, and manual input to create a cohesive and interactive student calendar. Students can check out clubs and events based on their interests, searching from suggested topics such as music and arts to more specific suggestion by user input. The application allows students to see how close they are to an event going on at that very moment, and who is already at the event.

Through our competitive analysis, we discovered that many apps were forced to make up for the lack of systems that encouraged community engagement virtually and were catered for a specific audience. We saw that many University of Washington clubs and entities were using Facebook to communicate events to their club members, but were struggling to do so with incoming students or those unfamiliar with the specific club name. In being so open and wide, Facebook struggles to help University students solely looking for UW events.

In terms of visuals, a generic iOS visual-style was applied here as users will likely recognize the look and feel, and thus feel more familiar with the application as it is. The bright purple here stands out for things selected and important, as purple is the primary University of Washington color.



The type used is Graphik, a clean sans-serif that goes from bold to light in order to show hierarchy.