The Challenge

To replace traditional paper flyers and bulletin boards with a fresh mobile app to make it fast and easy for students to promote new on-campus events.

The Process

After a lengthy discussion with our client and some research of our own, we learned about the core problems a student deals with when creating an on-campus event. From this research we began to develop a list of all the necessary functionality for the app.

The 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.

The 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.

Helvetica

The wizard quickly jinxed the gnomes before they vapourized.

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 & 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.

Icon size
28px
Visual tap area
80 px
Icon size
40px
Visual tap area
100 px

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.

  • Settings
  • Place
  • Photo
  • Cancel
  • Delete
  • Edit

User Profiles & 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.

The 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.

Board screen with menu

Login / registration

  • Step 1

  • Step 2

  • Step 3

adding new school

Camera screens

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.

various Screens

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.

One of the biggest challenges for us was that we only had five weeks to finish the project – from start to the submission of the app to the App Store.

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.

product architecture

Json

Amazon EC2 cloud server

php

Cache

Mongo db

Frontend

Backend

Nerdy Facts

200 tasks

were in the original development plan

5 weeks

from the project start to App Store submission

The End Result

The app is the result of a solid two month collaboration between the SoftFacade and Campus Quad teams. It's been proven that the design-driven development we employ here at SoftFacade produces amazing results.

We're currently working on version 2.0 of the Campus Quad app, implementing changes to the UI and code based on user feedback.

We enjoy working with startup companies as we're able to help them right from the beginning.

Get in touch to see what we can do for your company.

“SoftFacade’s design work was the first reason why I selected them to help design our app and app icon – I believe their creativity and attention to detail is unmatched. What I discovered after contracting with them to translate the design work in to a native iOS app, is that their development team is just as talented.”

Ryan Arroyo, Campus Quad CPO