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.
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.
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.
Select From Many Schools
Registration Step 1
Registration Step 2
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.
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.
The wizard quickly jinxed the gnomes before they vapourized.
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
- Visual tap area
- 80 px
- Icon size
- Visual tap area
- 100 px
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 & 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 centerpiece of the app is an interactive board that shows flyers for events currently happening on campus.
Board screen with menu
Login / registration
adding new school
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.
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.
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.
Amazon EC2 cloud server
were in the original development plan
from the project start to App Store submission
squashed during QA testing
spent on development and QA
if you printed our source code
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.
Ryan Arroyo, Campus Quad CPO
“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.”