UI DESIGN
Designing the Bulletin user interface.
For the final project in my New Media Design course, I collaborated with 3 of my peers to brainstorm an original app idea and design it using our knowledge of graphic design, typography, photography, user interface design, and user experience design. We then built the app using Marvel, an interactive prototyping platform for app and website creators.
My group of four decided to create Bulletin, an app that would list, locate, and provide information on all of the events and activities from every department, organization, club, or class on campus all in one place. College students could easily access all of this information using their verified college email address. They could also create a page for their own organizations or events and subscribe to notifications and updates on new events and events they saved.
During our brainstorming sessions, we realized there was a lack of cohesion when it came to the advertising of events on campus. Most departments had their own calendar instead of collaborating to create a university wide calendar. Through our research, we counted 21 different calendars available on the web that related to University of Georgia events around campus. That's a lot of calendars to keep track of!
This is when Bulletin was born. The next step in our process was designing the interface. We utilized the process of design thinking in order to understand our user, solve potential problems, and create the most effective application.
-
Verified university members can create posts for their event including: date, time, location, type of event, food/prizes, duration, photographs, costs, and details about the event.
-
University members can create pages for organizations, clubs, and classes to provide information about what their group does, the values and views of the group, information about weekly meetings, and how to join.
-
The app features a cohesive list of the events that can be filtered by event type. The list is organized by date by default showing today’s events in chronological order starting with the most recent at the top. The list can be narrowed by various categories. A search bar is also available for navigation.
-
A map view is also available through our google maps feature. The location pins are color coded and marked by an emoji emulating the type of event. Clicking on the pin will take you to the event’s page.
-
Users can create their own personal profile page to include organizations they follow, events they have created, and events they plan on attending. Users can also save events to their “My Bulletin” to review for later.
-
Event categories, color correlation, and emoji correlation are as follows:
-
Athletics – Red – Soccer Ball (default); User can choose sports emoji
-
Cultural – Pink – Red Female Dancer
-
Activism – Green – Tree
-
Music and Arts – Yellow – Painter’s Palette
-
Career – Orange – Briefcase
-
Philanthropy – Purple – Two Finger Peace Sign
-
Greek – Blue – Roman Columns
-
Free Food – White – Pizza
-
Click the image at the top of the page or the hyperlink below to explore our interactive interface of Bulletin created with Marvel.
Note: Not all buttons and features are clickable. This is an example of the general idea and flow of the application.
We created Bulletin with the following features: