SFCD is a digital product agency that combines strategy, design and engineering to create world-class mobile and web apps.

Campus Quad iPhone app

Designing a new app for college campuses

Background

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.

What we did

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.

Wireframes

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.

Visual concept

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.

Materials

We used natural materials to develop the user interface in order to provide a pleasurable experience for users throughout the app.

Colors

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.

Fonts

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.

UI elements

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.

Buttons and glyphs

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.

Icons

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.

User profiles and photos

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.

Flyers

The centerpiece of the app is an interactive board that shows flyers for events currently happening on campus.

Final designs

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.

Flyer page

We paid close attention when designing the detailed flyer view as this page contains a lot of information. Flyers show you everything about an event—the date it was created, a photo and description of the event, the location, the attendees, and any comments posted by other Campus Quad users.

The end result is clean and simple page that's capable of displaying a lot of information without overwhelming the user.

App icon

We had a single goal in mind when creating the app icon: to create a meaningful and recognizable metaphor for Campus Quad that matched the visual direction we set out with from the get-go.

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.

Development

The SoftFacade team was in charge of complete iPhone app development—from the app itself to the powerful back-end API.

In order to meet these tight deadlines we delivered new builds of the app to the Campus Quad team every day and had frequent calls to gather feedback and discuss progress. Our UX designers worked closely with our development team, directly supervising the implementation of the designs and interactions.

Thanks to our full-service approach and efficient collaboration between the teams we were able to successfully complete the project on time.

More projects

Halftone 2 iPad app

Project Noah Android app