Old Theatre. New Look.
As part of our “Design for Others” sprint, our team undertook the task of redesigning a mobile website with the intent to heavily appeal to a specific user group. The Campus Theatre website (www.campustheatre.org) seemed the most fun to recreate, while also providing a suitable content base for our target audience. We designed our mobile website to appeal strongly to people in their early-twenties, think hipster, whom we shall refer to as ‘users’ throughout the rest of this document. If, by chance, you’ve been living under a rock, here’s a quick definition of hipster.
Hipster:
“a person who follows the latest trends and fashions, especially those regarded as being outside the cultural mainstream.”
This sprint spanned three major design stages:
- Information Design
- Visual Design
- Prototyping
This design document will follow suit with these three design stages. We will elaborate on the ideas generated during each stage, how those ideas were influenced by our target audience and how each stage led to our final product.
— Information Design
The first step to our website redesign involved determining the most important information to present immediately to the user. This information is not only textual data or visual data, but it can be information that quickly answers questions such as “what other pages are accessible?” or “what’s the simplest way to navigate the site?” etc. This all unfolded during the information design stage.
We decided navigation should be easy and always accessible, so we created a persistent (persistent in this case means never changing/moving) navigation bar through which any necessary page could be accessed. Incredibly popular apps such as Facebook and Twitter use a footer navigation bar, which would make the website feel more familiar to the demographic we were designing for. From this, we decided on the four major buttons to be included in the navigation bar, which subsequently would become our four primary varieties of information accessible by the users.
- Home
- Tickets
- Calendar
- Us
Our initial information sketches attempted to be incredibly simple. The idea was to limit the information up front, while allowing for more details to be presented as the user made it further into the information hierarchy. We wanted our users to not have too much to focus on, as they could possibly have shortened attention spans to begin with. However, this was probably too simple, as it felt redundant to include a page dedicated to the exact same links as our navigation bar. This led to us choosing the Home page as the landing page for the users — the first page they’ll see when visiting the website. With the homepage, our goal was to efficiently get the information to the user without large barrages of text. We choose to highlight the next four movies that would be playing that week. This was implemented with a swiping slideshow, where a swipe in either direction would present the user with a different movie.
This sort of homepage design allowed us to bring one movie into focus. We wanted to draw the user’s eye to a movie playing soon, while also providing incentive to go see the movie. Including the movie’s rating from a reputable and hipster-verified movie review site such as Rotten Tomatoes became a priority, as we felt this information would be sought out by our users. Along the same lines, the inclusion of social media buttons immediately beneath the featured movie pane will again make the users feel more in tune with the website, and more likely to access these social media accounts. This is information our users are looking for.
Another key ideation technique during the information design process was paper prototyping. Paper prototyping is a staple in HCI, and is a quick and effective way to get ideas that are ‘functioning’ in a very small amount of time.
With these paper prototypes, we were able to get a better spatial sense of our website. For instance, the prototypes enabled us to better approximate the optimal number of days to display at any one time on the Calendar page. Early paper prototypes showed us fitting even a single week on the screen could be difficult. From this, we could determine how much information could realistically be displayed on the Calendar at any given time. This is key in information design.
The desire for simplicity in information presentation is best highlighted on the Us page. Large images are contrasted with short text blurbs. In conjunction, these are used to convey the aesthetics and status of the theatre. This allows us to present the users, in a concise manner, exactly what makes the theatre so unique. This uniqueness was something we needed to emphasize because it is so highly valued by our users. Much of the current website’s ‘About Us’ page felt out of touch with our audience, so we opted to withhold this information from them. This withholding information so as to simplify the page is a key characteristic developed during information design.
— Visual Design
During the visual design phase, we spent a majority of our time deciding on color palettes and font choices. A moodboard allowed us to create a collage that would aid in doing just that. A moodboard is a tool that aims to provide a more tactile feel to the website. When you look at the moodboard, you gain a sense of the overall ‘mood’ that the website is trying to simulate. It’s a way to get a feel for the aesthetic environment that will be created by each page. These aesthetic choices felt crucial, since the users are more likely to gravitate towards a website that appeals to the eye. This put massive emphasis on the visual design phase of our project.
The original theatre homepage felt too jarring. It has a black background which immediately didn’t feel quite right. Initially, the color choices were a “millenial pink” and a color resembling wine. These felt too muted, and not dictating enough of where the user would choose to focus. After some experimentation we decided on two main colors to be present in our homepage.
This combination of rose and seafoam gave the homepage a very soft feel. It’s subdued in many ways, but still able to draw the user’s attention to wherever we command it. In the case of the homepage, we used the rose color to bring focus to one of the current movies.
The Calendar page utilizes the same green color, but compliments it with an even softer beige. This allows the text to stand out extremely well, while providing as little distraction as possible.
With these soft but attention grabbing colors, we are able to make the user feel at home, just like they would on Warby Parker’s website.
Our fonts were decided on a bit more quickly. For headers, and image overlays, we would use a serif font. For all other data, we would use a modern sans-serif font. These font choices provide maximum readability, while also keeping a modern and slim profile to all of our pages. Bold text is rarely used, and the lightweight fonts are easily seen with heavy contrast between the font’s color and the soft backgrounds.
A logo was also created for display on the Home page. We wanted to modernize the feel of Campus Theatre ‘brand’ and a logo seemed like a simple way to start. We felt that the logo spruced up the home page just enough to catch the eye, but never be a distraction.
— Prototyping
Prototyping was done with the Invision App. Invision allows us to build a prototype of the website that appears functional in many ways. Clicks register and execute, scrolling scrolls, and swipes swipe. In reality, there are just various image files cued to be presented whenever these actions are taken, but it gives the idea and impressions of website will be handled by real users. The prototypes shown below are all ‘final’ versions. We exchanged/edited/critiqued many prior versions that we felt could be improved in small ways, even if we weren’t sure what exactly those ways were. This is the power of prototyping and iterative design.
Here is our final Home page prototype. You can see the eye is drawn immediately to the most current movie due to the strong color behind it. It is clear that there is a swiping mechanic, indicated by the one filled and three empty circles within the current movies frame. After swiping and reading the showtimes for the movies, the eye progresses to the social media links. These are very familiar icons to our userbase, so we made sure to include them. The image housed in the top half of the page is of the theatre itself, and the text serves as a reminder of the theatre’s history. There is a page indicator on the navigation bar, which highlights the current page in a sandy color. This provides the user with very quick feedback as to what page they’re on, but also what pages they could navigate to. The logo gives the finishing touches to the visuals for the homepage, which we thought necessary because the visual assets of every page felt like they would matter the most
Our final Calendar page prototype contains 5 dates and the movies (with ratings) playing on each date. This page could contain many more dates and movie times, but our users will feel very comfortable scrolling through a calendar that we were not concerned with there being a lack of information. The text is easy on the eye and remains very readable.
Here is our Tickets page final prototype. Again, there is a swiping frame, with three frames to choose from. Within this top portion, the various promotions that the theatre runs are shown to the user. We felt the free Tuesday BU screenings were the most important, as there is a high chance some 20 year olds in the area attend Bucknell! Ticket prices and concession prices are provided, although we feel this text was probably too small. Again, only the most pertinent information is provided, such as the footnote. Any extra would have begun to cramp the visual appeal of the site.
Our visual design philosophy shines through in the Us page. There is very little text, but it still makes bold statements. The images have a low contrast feel to them, something very commonly seen in today’s modern websites. The faded effect is desirable amongst our users. We included only the most important tidbits of information, but the most important is listed at the top. This exclusivity factor makes hipsters’ mouths water. That’s why we chose to display it at the very top.
— Conclusions
Overall, we are very happy with our redesigned website. The visual design phase payed off, as we feel we have a very polished looking product. Our color schemes pop, but are subdued enough to not be distracting. The consistent navigation bar makes the flow of moving through the site feel effortless. If we had more time, more scrolling and swiping functionalities would have been built in to the prototype, and we would also love to include some multimedia as well. This could include short movie trailers, or even a video tour of the theatre room.
This design sprint taught us a lot about the importance of iterating through prototypes, and carefully considering our visual designs. It also taught us why these are called ‘sprints’. Spending too much time on any one page or drawing is not the most effective way to get something put together. Fast ideation and clever use of tools will yield far better results. We look forward to the next sprint!
Website Prototype: http://invis.io/UPDDQYUQG
