Redesigning the Campus Theatre mobile app For Lewisburg PA Visitors
For our Design for Others project, we created a prototype for the Bucknell Campus Theatre mobile application which specifically targeted Lewisburg, PA visitors. Our main hope was that through our app, we could convince visitors why they should see a screening of a movie at the Campus Theatre rather than at another chain movie theater in the area. While other theaters may be playing the most current movies our goal was that after visiting our mobile app they’d be convinced why they should come for the experience of the Campus Theatre instead. In order to do this, we focused on selling the Campus Theatre experience. For our final design, we wanted to emphasize exactly this: the experience and the unique history the theatre has, making it easy for the user to navigate to only the most important information, and really emphasize why they should want to come to the Campus Theatre. Through minimal clutter on the menu screens, quick access to the 360 tour to show off the theatre, and screens that were efficient and only gave the information necessary to visitors of the theatre, we hoped to show off how fantastic of an experience a visitor can have at the Campus Theatre.
Our Design Process
When our team first met, we began discussion of the Campus Theatre by thinking about what we, Lewisburg residents liked most about it. We felt that we could use what matters most to us as people who have regular access to the theatre, and help sell that to visitors. We unanimously agreed that the most unique part of the Campus Theatre was the experience you have from the moment you walk through the entrance doors, and all throughout viewing an entire movie. From walking downtown and seeing the neon glowing marquee, to the feeling when you first walk into the beautiful theatre area with lounge seating, the old red drapes blanketed over the screen, and art all throughout the ceiling was what we really wanted to showcase.
We began our design process by looking at what information about the Campus Theatre already existed online. We were happy to see that there was a lot of informative information on their website, but we also immediately began discussion of how we could make what they were doing better. One feature we found on their website that intrigued us was a 360 degree virtual tour that really showcased the interior of the theatre. Finding this virtual tour was a turning point for us, as it helped us be able to verbalize what we were trying to convey we loved about the Campus Theatre, which was the experience. The Campus Theatre is unique because of it’s vintage vibes, it takes viewers back to an older more home-y experience at the movies, which we knew was exactly how we wanted to sell this kind of movie-going experience.
About Our Target Audience
We began our design process mostly thinking about ourselves, and what we liked most about the Campus Theatre, but we then needed to transfer that into our target audience: people visiting Lewisburg. This sparked an interesting conversation between our team because we were trying to figure out the types of people that would be visiting Lewisburg, PA. As a students of Bucknell University in Lewisburg, we recognized that a major demographic would likely be families of current students, and alumni who are back in town. But, we, of course, knew that we aren’t the only people that live in Lewisburg, and wanted to ensure that we weren’t just assuming that the only people in Lewisburg were affiliated with Bucknell. We remembered though that aside from being a college town, Lewisburg is also a historical town. This helped us come up with our third, and final persona which was someone visiting because of the history that remains in this town.
Sketching Our Mobile App and Determining Our Main Focus
With a strong understanding of who we’d be designing for, and an idea of some of the key features we wanted to be created, we set out sketching our app. We had decided on 5 important screens: about, showtime’s, history, donate, and a home page. We decided that each of us would go home, create 3 options for each page — for a total of have 9 options for each page — and reconvene the next day and decide on the strongest ones for our actual prototype.
An interesting thing happened when we met to showcase our designs. Without actively discussing this we all had taken the major ideas from the current Campus Theatre website, and then focused on minimizing clutter. It was clear we all agreed that we needed to establish a visual hierarchy that showed how breathtaking the theatre was, without pulling people away from the information they were requesting. Some of our designs had overlapping ideas, like making the link to the virtual tour much more prominent than it had been earlier. While some of the others were a bit different and had different grid-like, or tile structures creating different visual hierarchies across the page.
For our showtimes page we wanted to focus on what information a visitor would want and how we thought they’d want to find the information, and we all agreed that the calendar design for this page was definitely the strongest. Since our target audience is visiting Lewisburg, we thought they’d first care about the date, considering they’d only be here for a limited period of time, and then they’d care about what movie(s) were playing that day. In this way we showcased visual hierarchy by having the calendar as the main focal point of the page, with the movie posters playing that day being displayed depending on the day someone clicks on. An important thing to note, we thought, was that this is actually the opposite of the way the current website navigates, which shows the movies at the top and then the monthly calendar on a separate page — and in PDF format, instead of actually embedded into the website.
After reviewing all of our rough sketches, we had come to the conclusion that in our final prototype we wanted the homepage to feel like a visitor, or tourist experience, and we believed that the 360 virtual tour would be perfect way to emphasize exactly this. Unfortunately, in later stages of our design process we ended up straying away from this idea considering the load time may be less than ideal, as well as we thought it may be overwhelming for users to immediately be brought to a virtual tour. Instead, we demonstrated visual hierarchy by centering the tour button in the middle of home screen, and in big capital letters to have the users easily navigate to it, or at least consider navigating to it immediately after opening our app. Below the virtual tour button are four grid like tiles that will take you the pages as described. It is very self explanatory and demonstrates Gestalt Principle of Common Fate since interaction with them is similar to many other clean sites, and therefore there wouldn’t be any sort of learning throughout curve for users who interact with our mobile app for the first time.
Some of the useful feedback we got on the testing was that we occasionally were trying to be too minimalistic, and we needed to help guide the user throughout the experience a bit more than we had originally planned. Additionally, one of our classmates remarked that we were making the assumption that all of our users had computer literacy, which we hadn’t thought about but definitely took us back for a moment to adjust and rethink whether people visiting Lewisburg did — in the end we decided they would have at least some basic knowledge of navigation.
Sketch Testing
After creating sketches and paper prototypes, we had some of our classmates test our proposed app in order to receive feedback before we moved our prototypes from paper to online.
One classmate told us that he liked the idea of the hamburger button — the side button that opens a full menu — because it resembled the idea of progressive disclosure so that the user isn’t bombarded with too many options all at once. The idea of the hamburger button hiding some shortcuts allowed him to focus on the main page itself, rather than where he would go from there. For example, the virtual tour immediately captured his attention on the home page due to information being hidden with the hamburger button. He was especially fond of the donate page, specifically the idea of what the money donated to the Campus Theatre will be used for.
We also discussed with other people, who gave us a variety of reviews on where they thought our product should go. Some of these ideas included:
- Some people liked having buttons on the home screen, while others like having no buttons and using the hamburger button.
- One person didn’t like the about page, and said the idea with buttons would be too much navigation for the information they wanted,
After looking over the feedback we received from classmates with varying backgrounds, we had a few decisions to make in terms of implementing our final version before the design demo in class. We added images as the background for our history page buttons, to make them more button like. We kept the homepage buttons, so that people who wanted to use the hamburger button could, and people who want to scroll down to the homepage buttons can as well. It’s the best of both worlds. One of the reason that we made both of these decisions is we wanted to keep the grid look that we had already created which adheres to, an idea ingrained in the Gestalt Principle of Similarity. This allowed us to have uniformity through different parts of the project and create a sense of similarity.
Turning Our Ideas Into Reality: What Worked, and What Didn’t
One of our more novel ideas was having tiles that showed the header to each paragraph, and when clicked, to flip and show the text itself. We thought this could fit nicely with a homepage that had tiles as well to continue the trend into other pages, if we decided to implement the tiles on the homepage. A rough sketch of this idea is shown below.
While we were all excited about the idea of having tiles flipping to give brief descriptions of the history, and then being to further elaborate on another page, this proved not as reasonable once we actually started designing our prototype. While the idea of having tiles flip back and forth would have been a fun, interactive feature, we decided that since designing for mobile is so small, that this design would not be nearly as practical considering there was barely any information that could be included in just one quarter of a page. We instead decided to get rid of the middle stage of flipping, and have each section be a button that would navigate to this part of the “History” page. We ran into further difficulty in this stage when using Invision, our initial hope was that we could have Invision navigate to certain parts of a screen automatically, but this didn’t seem to be possible, so all 4 of the buttons on the “History” page navigate to the same placement on the detailed history page.
The Final Result:
Our final result felt like it mostly completed the objectives we set forth for it, by focusing on the experience of the Campus Theatre and exemplifying it to the visitor.
Almost all of our webpages have a photo of the theatre as the 1st point in the visual hierarchy, which allows the visitor to see the beauty of the theatre throughout our website. An example is our home page, which starts by sucking the user into the neon lights of the front of the theatre, then pulling their view down to the “Take a Tour” button which leads to the virtual tour, and finally up to the top where they can get the address along with the hamburger button to navigate to other pages. You can also see this on our donate page where the picture of the outside of the campus theatre is what leads people down into the text regarding it being a 501c3. This came about after we looked into putting a grid pattern with buttons on the home screen, but decided that the image gave more impact than just giving the user the menu screen, even if it causes less functionality. We determined this was ok since we were focusing on visitors to Lewisburg, who would most likely be potential students and their parents.
It was interesting to see other people’s opinions regarding the photo heavy layout, where some people commented that “The home page could be more concise”, and wished that “[we] made everything fit on one screen instead of having to scroll down for some pages”. This was countered by other people saying that they liked, “how many pictures [we] use in [our] page” and, “the general sleek look of [our] site”. More information, especially from visitors to Lewisburg, would be needed to see if the focus on pictures was worth our time.
As we worked into the actual information pages we introduced more text but still had a focus on pictures to help us tell our story. We went through iterations where we had the text be much larger, however we realized we weren’t being efficient with our spacing and it required constant navigation to get through the pages. Instead we went for a smaller text to require less navigation. However, the small text can be a little hard to read, and if we were going to do further iterations of the project we would look to expand the text to a middle ground. We would also look to convert the grid pattern on the history page to have flipping tiles like described previously, so that people could get an idea of what they were about to read before committing to it.
One of the problems we had with our final product was a lack of connectedness between different pages, which most likely came from all three of the design team working on different pages. An example is the buttons on the donate page are different from the buttons on the home and about page. This was noted in our feedback when people commented that “Some buttons could have been smaller. Take tour button looked like an outlier” and people wished that “the buttons on the homepage were a bit more defined.”
Project Takeaways:
One of our biggest gripes coming out of this project is having a general understanding of design principles, but not having the technical skills to implement them in a professional way. From the buttons on the “Donate” page, to inconsistencies in the header placement, there are small things that, while functional, don’t feel like they belong. As we develop our skills as artists and fail-at-then-learn-from Gestalt principles and color coordination, we should be able to fix these issues. We also would want to get user data from actual visitors to Lewisburg, since everyone who has commented on our design so far has been students. We as a group see potential in our design and know that it is on the right track, and as we understand better how to determine what’s wrong with our current design, and then fix it, we can take it to the next level.
