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.
