Designing a new app for college campuses
Campus Quad challenged us to reimagine the traditional paper flyer and bulletin board with the goal of making it easier for students to promote and discover on-campus events.
We designed and developed an iPhone app for students to create events, manage guest lists, and explore what's happening on campus, as it's happening.
Before we get head deep in pixels we present early stage wireframes to the client to make sure the overall flow and user experience interactions make sense.
Once the design concept has been approved it's time to get down to business. At this stage we define the visual appearance for the interface—picking all the right fonts, materials, and color schemes. We found the perfect balance for Campus Quad by mixing the cork board appearance from the bulletin board with a light, legible design for the main content.
We used natural materials to develop the user interface in order to provide a pleasurable experience for users throughout the app.
When deciding on a color scheme, we applied our knowledge of color theory to enhance the user experience. Vivid blues and orange tones are used to indicate main actions, while subtle shades of grey work well for the background.
We explored many font options before we ended up with a vintage-looking Capriola for headlines. For the content we selected the tried and true Helvetica—for nice, easy reading.
To emphasize the main theme of the app in the visual interface, we
introduced some real world elements—like the cork board texture
for backgrounds and the use of stickers to show "Liked" flyers. We
added subtle texture treatments to the standard interface controls
to help bring the real world elements into the digital world.
The result is a visual interface that perfectly blends a real world experience with a digital environment into one carefully crafted application.
We adjusted the standard iOS navigation bar to increase the tappable area for buttons, making it easier for users to navigate through the app. We use color differentiation here to focus the user's attention on particular elements and the functions associated with them.
We wanted to make the tab bar icons look as though they were made out of paper. If an icon has any overlapping elements they appear as different layers of paper hovering on top of each other.
We applied circular frames around all user profile pictures and square ones to all event photos, making it easy for users to distinguish between the two different types of photography found in the app and what their function is.
The centerpiece of the app is an interactive board that shows flyers for events currently happening on campus.
The end result is a beautiful interface that makes it easy to create, discover, and promote on-campus events. With just a few taps a user can see what's happening on their campus, interact with other students, and add new friends right from the app.
Posting a flyer is simple—just take a photo, add an event date & description, invite friends, and you're done.
All flyers can be viewed on a map, making it super convenient to find events going on around you.
We sketched out dozens of icon concepts relating to the campus, the flyers themselves, bulletin boards, and the letter "Q" associated with the Campus Quad brand. We decided on a Q-shaped paper flyer, pinned to a cork board.
To make the edges on the raised up cork board just perfect, we modeled and rendered it in 3D.