Campus Theatre App: Designing for the Middle-Aged

By Caroline Whitman, Daniel Tobak, and Stefano Cobelli

Our mission was to create a new app for the Campus Theatre targeted at middle-aged men and women between 45 and 65. The first thing we did was browse the Campus Theatre website, which we found to mainly target students. While we did not ask any middle aged people around Bucknell, our instincts told us that it was overwhelming for people in that category: Text came in animations, the background didn’t move when scrolled, the text was small, and there were an excessive number of buttons to navigate pages. To find what successfully captures this demographic, we researched products and stores that target middle-aged people. We found trends that these sites and apps used like big pictures, simple colors, few navigation buttons, and simple/straight to the point information. We also knew we could completely cut out social media buttons and icons, because this demographic is generally not as active on most social media sites. Middle-aged men and women could have possibly had smart phones for ten years, so there was a clear divide between designing for the elderly (medicare.gov) and designing for this group. After getting a grasp on direction and design principles, we built a mood board and filled with themes and colors that we felt represented our target audience.

Sketching

Before we could start working out our prototype on a computer, we decided to sketch it on paper in order to work through our ideas quickly. This led to a big mess on lined paper, but ended up helping us work out ideas until we came to an idea for each of the five pages we genuinely liked. Below are the five pages as we originally designed them, not too far from the end result.

Prototyping

Next we started a prototype on PowerPoint, because of its shallow learning curve. Below is the Members page, where you can see the basic design that was created with PowerPoint.

While steadily coming up with ideas on the fly, we built what we felt represented our audience. Finally, we integrated our design into InVision. Most of our ideas were able to be translated into the app, while some were not. Testers found it easy to use and access, especially for its demographic. Negative reviews came back on the color scheme choice and clarity. Movies on the home screen should have been able to be clicked to show a detail page, but this was never implemented. We agreed that our design, while successful, could use work in demonstrating the total functionality of the app, as we kept it to only five pages per the requirements.

Design Choices

The first major design choice we had when designing the prototype, was where to put the menu bar. The Campus Theatre website has a large collection of information, which on the website is a little too cluttered for the web, let alone a mobile application. We decided upon a bottom bar with 4–5 icons which clearly displayed the page which it would lead to. We all really like this design, and how it turned out in our app. We felt that the hamburger button, which was the other idea we pondered, would have been too cluttered, and feel like the website’s current design, but on a phone.

Another design choice we made was the banner at the top saying “Campus Theatre” on the landing page, and the name of the page on every other. We decided for our demographic that a banner to reassure them they were in the correct place was necessary, as they are more likely to “get lost” on a mobile app than say, teenagers would be. The other idea for the banner, was to have the “Campus Theatre” always on top, then have a subheader with the name directly underneath. We felt that this created too much clutter on the already packed with information screen, and the “Campus Theatre” on every page was a little redundant.

Once we had the main layout of the page as a constant, we felt that just trimming to important information left on the pages was essential, and that is reflected in the schedule, tickets, membership, and about pages. The unique part of the about page is a slideshow of the campus theatre, which we feel adds a more gentle feel to a page dedicated to the Lewisburg landmark.

The “radio button” idea for the schedule and tickets page came about when deciding on what could be grouped together in our 5 button layout at the bottom. We felt these two went very well together; however, were important enough to warrant their own pages without scrolling. We took advantage of the radio button in order to show what the schedule was, and then a simple way for the patrons to see ticketing information for that show.

Paper Prototype to InVision Prototype

For the most part our paper prototype transferred well to the web, but one major change we made was on the scheduling page, where we went from a calendar like layout, to a scrolling page with banners and show times. We felt like this kept with our theme of being minimalistic and removing clutter, while still getting the point across.

Strengths

The final result was not perfect, but the prototype had some strong design elements that suited our target demographic. The strengths of the prototype mainly lie within the design features. The simplicity of the app was an intentional design decision to best cater towards 45–65 year olds. The app was designed to be easy to use, avoiding any features that could complicate usability or that users could simply miss. The large buttons and large text aided in the app’s accessibility, and the minimal text helped draw attention to the most pertinent information offered in the app.

The visual hierarchy was especially important in text-heavy pages, as the About Us page demonstrates. The eye is immediately draw to the photo slideshow at the top of the page, offering the user a visual of the Campus Theatre to contrast with the block of text that follows.

Weaknesses

Despite strong design features, the app did have weaknesses, especially in regards to the color palette. During our design and sketching phase, we looked at a number of websites that would likely be visited by our demographic. We chose colors similar to those used on the websites, but the compilation of the various colors is where we went wrong. The colors chosen contrasted well but did not match each other. This affected the aesthetic of the app, masking the quality of the design features.

We tried to stick with our initial color theme, but ultimately lacked consistency in the final product. As seen above, we weren’t consistent in the use of white (Schedule button) and the off-white/grey (title color), and while not glaringly obvious at first glance, it does detract from the overall quality of the app.

Next Iteration

If we were to do another iteration of the app, the first change we would make would be altering the color palette. A white background would simplify the color scheme, and choosing either red or blue as the accent color would improve and modernize the app’s aesthetic.

Furthermore, a user test with our demographic would be helpful to determine the best order of the navigation buttons. Our app placed the home button in the center of the navigation bar, associating the home button with where a home button would likely be on the mobile device.

This placement confused some of our peers during feedback, so further testing the order of the buttons would help to create a more intuitive navigation system.

That’s a wrap!

This design sprint was a great learning experience, not only for designing or a specific audience, but also for gaining experience with sketching for ideation and prototyping. We were able to identify good design features to target our audience, but we ran into trouble implementing them in a visually appealing app. Sketching was the fastest way to put our ideas onto paper, whereas creating a prototype took considerably more time. This necessitates a solid idea of the app to be sketched on paper before starting to create the prototype. We plan on changing our strategies on prototyping to streamline this process. Other classmates were able to build a more elegant prototype using programs like Sketch. We also hope to test this design on middle aged men and women to get real feedback directly from our audience. We believe that after a couple more iterations, we can meet our goals of creating the ease of use and visual design that our demographic is looking for, without taking away any functionality that the current site offers.

Here’s a link to view the finished prototype on InVision. Enjoy!

https://projects.invisionapp.com/share/S8DEYSYRB#/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.