Campus Theatre: A Redesign for Business Professionals
We were tasked with redesigning the Campus Theater website into a mobile application. Our target audience was focused on corporate clientele and as such a large motivator for our system was finding a happy mix between form and function. Corporate clients are typically looking to host large quantities of people and provide food/entertainment/etc. Our primary design objectives were to strike a happy medium between offering as much information as possible while not overloading the viewer. We put an emphasis on shortcuts, clear communication, and productivity to streamline our design into a usable resource to corporate clients.
This document will recount the process we took to create our final design.
Part 1: Need-finding and Sketching
Paramount to the success of our design is having a solid understanding of the audience our app will be catering to. As we have stated our target audience were Corporate Clients and as such we focused on similar locations that offered reservations and catering to these groups. Thus the beginning of our mood board was formed.
We utilized the mood board application available through Invision. Our goal was to add pictures and figures that gave the idea of a professional design as well as gain an understanding of what kinds of colors and fonts we should use for our design. We found it best to start with this so that we could ensure the rest of our design was made in accordance with our audience in mind.
We found various similarities across the different locations that we used to put together our mood board. These locations included predominately hotel websites that were hosting large corporate parties such as Marriott or Best Western (think convention centers). We found that there was always an emphasis on editable fields being prominently displayed at the top of screens. Subsequent information about the facilities and more followed below. Images were always shown as highlights for locations and would often be layered underneath the important fields as to not take up a large portion of the available real estate on the page.
Our color choices were based off of recurring themes across the pictures we saw, as well as wanting to retain the Bucknell theme as our location is Bucknell affiliated. Black and White are both givens in the sense that they are necessary for all designs in the form of text/backgrounds/etc. We chose 3 colors of blue for highlights and shading with orange as a emphasis color. Grey is a very professional color that can add to the overall design when Black/White are not ideal. Furthermore, we ensured these colors matched with one another using Adobe’s online color scheme checker.
Fonts are deeply connected to the feel and style of a design. In order to choose a proper font we looked at common choices on our sites that we investigated. However, we chose to use FontPair.co in order to choose a pair that worked together. We wanted a impactful title font (Fira Sans) with a easily legible content font (Montserrat). FontPair.co focuses on paring legible fonts together that compliment one another. These fonts are both sans-serif fonts that improves readability.
Once we had defined the general style of the app and what stylistic choices we needed, we moved onto needfinding and generating the final design of the app.
One big design choice we made was debating over whether or not to have a dedicated ‘home’ screen. While discussing the information that needed to be displayed it became apparent that besides some ‘pretty picture’ with cool animations there was no content or reason to have a main home page. This was in accordance with our design philosophy since we wanted to remove any unnecessary content that would bloat the experience and obscure information. This way we were able to default the user to a location that immediately relates information about the location. Our design finalized with four tabs to cycle between: About Us, Calendar, Rentals, and Movies. The default location would be About Us to give immediate information about the services the Campus Theater provides.
Our sketches were mocked up as initial ideas that we would expand upon as the system was built. Our sketches were certainly useful to us in our design process but ultimately only worked as templates for the final design. For instance we removed the home tab completely from our sketches and focused on improving content elsewhere. The About Us page was changed slightly to fit better as a home screen since we needed a location to start users off. To this end we altered the About Us page to offer more general information and provided links to other useful information within the app. Our Calendar tab was intended to only show the available times the theater was available but was extended to be interact-able. The Rentals tab was a good start to get information down and was the core functionality of the app besides ticketing (since our target audience would most likely be interested in renting the location) but underwent several changes to more easily display information.
Part 2: Designing
Although Invision has an array of useful tools at our disposal to create the design mock-up, we opted to use Adobe XD due to our teams experience on that platform. We considered the difficulty of learning a new platform to utilizing existing experience and decided that since XD offers the same resources as Invision, it made sense to use it.
Our toolbar went through multiple iterations before we settled on a final design. The hardest portion of this process was the allocation of assets to use for the toolbar itself that would accurately and quickly relate the functions of the tabs to the users at a glance. Adobe XD did not have many options available for icons that fulfilled these requirements when we started. Having clean designs for a movie ticket stub is a fairly uncommon icon and as such we had to find available resources online to allow us to create this asset. However, we believe that it certainly accomplishes the goal we set out for. The toolbar highlights the current tab your are on while still allowing the other options to be visible which greatly increases our accessibility to users.
As we stated before, we opted to remove the homepage from our design. Instead we chose that the ‘About Us’ tab would be the home screen for new users. This is justified since our product is focused on usability without any unnecessary information that could confuse and bloat the design. The homepage tab would not bring any new information to the app that had not already been conveyed in a more efficient matter elsewhere and as such it was scrapped in favor of simplifying the design. We believe this is in accordance with our audience since corporate parties would be interested in the content available first and foremost, followed by pretty pictures. So any method we could find to ensure the easiest flow of information while maintaining a professional design is useful.
Our ‘Movies’ tab was envisioned as a method to supply our client with a straightforward, unambiguous listing of showings available at the theater. To this end we made a single column scrolling design that would give the cover art of the movie, its name, rating, and its showing times. In practice this tab would need to be updated fairly often since the Campus Theater rotates through showings very often but is a efficient way to express the available showings to a potential client. The user scrolls vertically to see the showings in chronological order.
Our ‘Rentals’ tab is curtailed directly towards our clientele. This is the page that offers the most pertinent information to corporate entities that would be interested in the theater as a meeting location. In order to relate the most important information to our clients we chose what we considered to be the selling points of the theater and prominently displayed them to entice prospective clients. Scrolling down the page the user has access to contact information in order to rent the space as well as the instructions that have already been designed by the Campus Theater for this situation.
The ‘Calendar’ tab was all about data visualization. Ensuring that there is no ambiguity around when showings occurred was paramount to the success of this portion of the design. Elapsed days on the calendar are greyed out to emphasize what showings are still available. Movie art is displayed on their appropriate days because the user has a much easier time recognizing the art than the name of a movie. In addition this design couples well with our ‘Movies’ tab since we reuse the art on both views which reinforces the information.
Lastly, the ‘About Us’ page was again intended as our start screen. We chose this page over others since it gives the most ‘high level’ information about the Theater as an overview. Our biggest trouble with this view was integrating Yelp reviews as unobtrusively as possible while still allowing for reviews to be present. We chose to display only a few and have an option for the user to view more if they desired, collapsing information like this not only saves space but also adds to the overall feel of the page and keeps it in tone with a professional feel. Below the yelp reviews lies all of the contact information for the Theater as well as a brief overview of the history of the Theater.
Part 3: Feedback
We received lots of positive feedback on our main movies screen, navigation bar, and rentals page. People really liked the large view of upcoming movies as well as being able to see them from the calendar and click on them to enlarge the picture. Many users also commented on the ease and simplicity of the navigation through the app. They liked the toolbar at the bottom that made it very easy to select whichever page they were interested in viewing. The rentals page was also praised as a great solution for the business client looking to book a corporate event at the theater. People liked that this feature had its own page and displayed all necessary information right upfront.
We also received some negative, but constructive, feedback. People did not seem to enjoy our color scheme, despite picking it to suit business professionals while still maintaining a connection to Bucknell. They wanted more colors and more “pop” throughout the app, rather than our simplistic and function focused design. Several users also suggested that we add more details to the movies, such as a synopsis. Clicking on a movie in the calendar simply enlarges the photo and title, but they would like to also see information like run time and cast. These changes are all valid and we definitely see how feedback can improve our design in multiple ways. We think that had we spent more time engaging other people in our design, many of these issues would have been found.
Overall we were very pleased with our final design. It incorporated as much as what we saw as important to appealing to our client audience (Corporate Groups) as possible. We went through several changes to the design of our product which speaks to the necessity of doing these processes. We certainly have room to grow and the product as a whole would always benefit from more time but we were certainly pleased with the point we were able to make on our design.
Matt Harmon, Omar El-Etr, Malachi Musick, Dan Kershner
