Book-It Repertory Theatre Rebrand
Branding - Storyboarding - Personas - Wireframes - User Testing - Prototyping - User Interface - Figma
Project Overview
I redesigned a local Seattle theater company’s branding and proposed a more streamlined user interface of their current ticket-purchasing mobile flow.
The project culminated in creating a brand book featuring the updated branding of the Book-It Theatre company.
Details
Role: Everything detailed in this project was completed by myself. I was responsible for all research, UX, and UI design.
Type: Class Project (HCDE 308, Visual Communication in HCDE)
Duration: 4 weeks, UW Winter quarter 2023
Research
Brand Audit
I conducted a brand audit on Book-It to understand their values, their audiences, what kind of relationship the organization has with its constituents, and how their mission is currently presented.
I performed secondary research to better understand them and gain expertise in their field. This knowledge was important for informing my design decisions for the client's visual language. Along with this, I compiled imagery that communicated ideas, moods, and feelings about the client's brand.
Brand Keywords: Community-oriented, inspiring, theatrical
Analysis
Customer Journey Map
Personas
Customer Journey Map
I examined a user’s ticket purchasing journey on Book-It’s current mobile website. I graphically recorded all the major steps of the process which helped me to identify its pain points and critical stages for a user. This task flow was created using Figma.
User Personas
After gathering research and brand information about Book-It, I created three user personas to gain a better sense of potential audience members of this company.
Design
Logo
Color Palette
Typography
Graphic Elements
Mobile Flow
Logo Ideation & Creation
In the initial phases of the logo design, I sketched some logo ideas based off a list of keywords generated from the research phase. Then, I iterated through some logo ideas using Figma before deciding on two potential logos.
The updated logo is a call-back to our original logo while modernizing it. The new typeface follows the variation of letter sizes in the original logo, conveying fun experimentation and playfulness.
The yellow and red are reminiscent of the red curtains of a theatre and the yellow stage lights.
The colorful faces also promote a kinship of sorts which calls back to our community- oriented focus. The half faces are not only the comedy and tragedy masks, they also follow the design of quotation marks in recognition of our repertoire of plays based solely on literary works.
Color Palette
All colors on the color spectrum are brought to life through the three primary colors: blue, red, and yellow. Book-It achieves something similar by creating inspiring, dynamic theatrical content from flat words on pages. It is for this reason that a palette of primary colors plus grey and black are implemented. Additionally, the red and yellow are the same colors used in the logo for consistent branding.
Typography
The Anisette STD type family is used for larger headers. It’s dynamic lettering conveys a fun, upbeat feeling. The Lato type family is used for subheadings, text, and other details. The uniformity of this sans serif type makes for easy readability while still following a feeling of friendliness by its rounded shapes.
Imagery
Most of the images on Book-It’s website are current and upcoming shows. However, I wanted to emphasize their value of community and also show to people behind the work for greater connection with their audience. So, I gathered various images from their social media platforms to include on their website along with those show posters.
Book-It also invest time and resources into outreach through their Arts Education program. Their regular program includes touring and presenting a diverse range of stories to schools, libraries, and community venues through Washington. I wanted to showcase this program Book-It hosts through images from those events to further show their community-oriented nature and their focus on education as well.
Graphical Elements
The rounded edges of the buttons and accordion menu give an approachable feel to the interface. The arrows are used to indicate motion. The hamburger menu is in the shape of a bookshelf to add a fun element to the user experiencing our website.
Mobile Flow: Purchasing Show Tickets
The original task flow for purchasing tickets on Book-It’s mobile site took 13 steps in total. To simplify and streamline this process, I created a high-fidelity mobile interface where users can purchase tickets in as few as 5 clicks.
Let’s Connect!