Introduction
Our design team, consisting of Gia Hayes, Casey Friend, Yash Mittal, and Zilin Ma, were assigned the task of redesigning the Campus Theatre’s website for mobile phones, specifically catering to the needs and preferences of visitors to the local area of Lewisburg. Instead of redesigning the entire website, we focused our efforts on only four pages, of which included the homepage, with the goal of emphasizing the most important information to our specific user group. Creating a mood board helped us articulate the visual design that would best complement the environment of the Campus Theatre as well as suit our demographic, and sketching our initial designs led us to collaborating on a final prototype using Adobe XD.
Design Process
This whole design was facilitated through a project that went through three different phases. The phases were Information Design, Visual Design and Prototyping. The Information Design phase was started at the beginning of the sprint and its results were carried throughout the entire sprint. This first phase was spent planning out ideas, getting to know our target clientele and understanding previous problems from Campus Theatre website users. The second phase of the design process was Visual Design. During this phase, we spent time as a group working on sketches of what each of us thought would be a conducive website for visitors of Lewisburg and the Campus Theatre. We then brought our sketches together to settle on one general design that incorporated pieces of each of our sketches. It was also during this phase that we created a mood board to find working color schemes and vibes for the new website. The third phase of the sprint was the high-fidelity prototyping. This was where we brought the outcomes of the previous two phases together. This phase was used to build an interactive application on Adobe XD, bring our sketches to life and incorporate the schemes created on the mood board. As you read along, further details of each of these phases, as well as design decisions, will be explained.
Phase 1: Information Design
The first task of our designing journey was to understand the goals and needs of those who our redesign targets, visitors to the area surrounding the Campus Theatre. Initially, we brainstormed ideas for the type of information we believed users would want to plan for their visit to Lewisburg and the Campus Theatre. Many of our initial thoughts were included in our final prototype, such as information on parking near the theatre, upcoming events and attractions in the local area, and a brief history of the theatre. Next, we all researched to find out and learn more about the types of visitors to Lewisburg and the Campus Theatre, visitors’ impressions, and things to do locally that might interest visitors. We concluded most visitors to the Lewisburg Area are families and friends visiting students at Bucknell, and many of the area’s attractions and events appealing to visitors occur downtown, mainly on Market Street. Most of the reviews we read online from those who have experienced the Campus Theatre were impressed with the theatre’s paradoxical combination of nostalgic ambiance (and decor) and twenty-first century technology as well as its regular mix of showings including modern films and old classics. These preliminary findings paved the way for us to start sketching potential designs.
Phase 2: Visual Design
Once we narrowed down the features that visitors might need on the Campus Theatre website, it was time to start sketching out our ideas. First, each group member created simple sketches of how he or she wanted our pages to appear. Each person chose different functionalities that they liked and did their best to sketch it so the rest of the group could get a feeling for their idea. We then sat down as a group and talked through each of our designs. We pulled attributes from everyone’s designs to incorporate while also making sure we maintained a thoroughly cohesive design. In general, our sketches were used more as a guideline of how we wanted to set up the pages rather than an exact blueprint. However, the sketches remained one of the most important pieces of our design process, because they represent the start of us choosing how we wanted our users to visually interact with the application.
While the sketches provided a concrete path for the layout of the page, we still had to create a vibe that we wanted users to receive while using our website, so we created a mood board on InVision. Originally, we wanted to use lighter colors. We played around with different shades of yellows, blues, and pinks. While these colors worked well together, they did not bring the energy and vibe that we wanted. We decided to try out darker colors and ultimately settled on a black with wine red and gold accents. This allowed for the website to not only be warm and inviting but consistent with the vintage art deco look we desired. Overall, we were happy with the colors and the vibe we presume they give to the visitors of Lewisburg and the Campus Theatre.
Phase 3: Prototyping
As mentioned previously, it was our first time prototyping an application. We looked at different toolkits, such as Figma and InVision Prototyping, but settled on Adobe XD because of its sizable community. Although we are biased since we did not spend equitable time on its alternatives, Adobe XD is a powerful desktop application, and it even has inbuilt animation support.
We started off by quickly prototyping our home screen to get a feel for the software. Its design is similar to our selected sketch but we chose to overlay the movie poster on top of the Campus Theatre background image. It created a card-like feel which is commonplace in applications we use today. We did not want to overwhelm our users with information, so we restricted our home screen to an auto-animated carousel of posters of the upcoming screenings. A user can then learn more about the screening by tapping on the respective poster.
There’s a few details worth mentioning here. In our low-fidelity designs, we did not have a play button in the bottom right of the posters. Later, after testing our initial prototypes on our friends, we realized that having a visual cue to signal “additional information” is pertinent for a good user experience. Returning to the original screen from this detailed view of a movie was also unintuitive. To get around this, we added a top arrow button in the usual upper left corner.
To help the visitors navigate the area, we designed two more pages which users could navigate to using the hamburger menu. A fullscreen gold-colored menu felt uneasy on our eyes, so we applied a slightly transparent gradient to its background. We created a small back button underneath the menu items so as to help users with large phone screens navigate out of the menu overlay.
The first of the two additional screens was Things To Do which, as the name suggests, enlists things a visitor might find interesting. With the limited time we had, we only managed to design the bottom half of our final sketch, thus discarding the Week’s Specials section. This page consisted of a filter for the type of activities to display. To make the content on each of the tiles pop, we halved the opacity of the background. Similar to the movie posters on the home screen, a user can access the details of an event by tapping its tile.
The other screen we designed was Visitors Info which mentioned the standard modes of communication along with a map of directions to the theatre. As we experimented with the content inside the map, we considered animating the highlighted path and the current location pointer, much like Google Maps, but could not produce a satisfactory animation due to scrolling issues on the page. Our team agreed on the value of including a blurb about the history of the theatre, and we thought this page was the best fit for a bit of vintage words.
In addition to our main screens, we designed a splash screen using the theatre logo. The idea was to underline the significance of the theatre and add to the user experience through a simple animation on the logo.
Final Thoughts and Conclusions
While we were very proud of our final design at the conclusion of the design process, we were eager to hear from others. During our class’s Demo Day, we received feedback from students who were also tasked with the Design for Others assignment. Many students who engaged with our design raved about the cleanness of our prototype, its “modern and cool” animations, the splash screen, cleverness of the information layout, and the usefulness of the Things To Do page, highlighting the wonderful events occurring near the Campus Theatre in the town of Lewisburg. We appreciated the fact that many of the features of our prototype others liked were the results of decisive and deliberate design choices we made during the design process.
Like any other design / prototype, there were some aspects people disliked or wished were incorporated. There was a pretty strong consensus from the students who engaged with our design that our prototype would have better usability if buttons and text were a bit larger and if there was a way for users to see the movies playing for an extended period of time (for example, a month) rather than just a couple days ahead. As the designers, we completely agree with these changes as they are crucial to users’ usability and preferences and would definitely implement them if we were given more time or could go back in time.
Overall, our design team worked very well together and had a productive experience redesigning the Campus Theatre’s website for visitors. This assignment allowed us to apply many of the human-computer interaction concepts and topics we have learned so far this semester, such as needfinding, becoming our users, sketching, prototyping, and developing visual / interface design while keeping in mind human abilities.
