Redesigning the Weis Center Website for a Target Demographic
Our Objectives
The goal of this project was to redesign the Bucknell Weis Center website with two objectives in mind: 1) to make the website mobile compatible and 2) to specifically target a certain demographic, in this case, parents of young children (ages 3–8). After researching other websites with similar target audiences, we created paper sketches, followed by an interactive prototype using proto.io and InVision. To target our demographic, we highlighted key features of the Weis Center program such as the Family Discovery Series, which is not prominent on the current Weis Center website. We also added filters to the upcoming events list so users could choose to show only events that are geared towards children, or only events during a specific time of day. Additionally, we added buttons throughout the website to buy tickets and gain information about events more expediently. Also, we removed unnecessary text and pictures that were not relevant to our demographic, to minimize scrolling on mobile devices.
Initial Sketches and Brainstorming
Brainstorming — To begin the process of redesigning this website, we created a list of items/information that our target demographic might potentially need from the website. By looking at similar websites and the existing Weis Center web pages, we were able to come up with several ideas for our website, including event filters and ratings, seating maps, and noise/light warnings for events. We also found items on the existing website that already targeted our demographic, such as the Family Discovery Series, that we decided should be more prominent in our redesign. We then created multiple paper sketches that used these different ideas.
Mood board — To help us with the initial sketches and brainstorming, we created a mood board. The creation of the mood board allowed us to find common themes among other websites used by our demographic, such as color schemes, button and menu design, and similarities in the visual hierarchy. Our mood board also included images from Bucknell’s new branding; since the Weis Center is a Bucknell website, we decided to use the official colors and fonts for the website.
Refining ideas — Once we had our sketches and ideas on paper, we needed some form of validation on them, especially from our target audience (in this case, parents of children between the ages of 3–8).
We decided to interview a person named Ariana Stuhl who was a graduate student with two kids, one 2-year old and another 5- year old. Ariana tries to buy her tickets as soon as the season brochure is out. She generally buys the tickets through mail or through CAP center. While she does look for some events suited for children, she also looks out for events that she and her husband can enjoy.
One of the few reasons she visits the Weis Center website on her laptop is to check pictures and any video links out for the shows that are listed in the brochure. This way she gets to validate whether she wants to go to the event or not. This was an important piece of information as we hadn’t given much thought into having video links for some performances on the website. On the contrary, we were thinking of possibly removing them from the current design.
Ariana also said she prefers having smaller sized images and more text description as she likes to know more about the event before she makes a call. Since she has been at Bucknell for a year now and knows where to buy tickets, Box Office was one of her least priorities.
We had her navigate through the current Weis center webpage on mobile platform, something she had never done before. Here’s what she had to say:
· Doesn’t read the text on the main page
· Wants to either get to the events upcoming or buy tickets straight
· When checking events out, wants a filter option for date, time, genre, etc.
· Likes the video link to an event
When we asked her how she feels about having a feedback option for events, she felt indifferent about it. All this feedback further helped our team in validating some of our ideas, tweaking some, and getting rid of a few.
Interviewing — To test our design, we were able to interview 3 people and have them try out our paper prototypes:
1. Interviewee: Miriah Royal; Bucknell Employee, works in the Intercultural Equity and Advocacy department, is aware of our target demographic, mother of two children ages 5 and 8
- Understood the location and functionality of the hamburger button throughout the run through.
- On the HomePage, really liked the no words on the home screen idea, along with a direct link to family discovery series, and upcoming events.
- On the calendar screen, liked the part of having filters. Took a while to realize that the events piece was clickable.
- On the single event page, liked the idea of having a buy tickets links upfront. Wished there were more pictures to go through and less text. Wanted to see the video part without scrolling much.
- Wished there was information such as length of the show, intermission or not, and use of any strobe lights on the single event page.
2. Interviewee: Bethany Bechtel; Bucknell Early Education Major, currently student teaching and interacting with children and parents on a daily basis, is aware of our target demographic
- When asked about where to go to buy tickets from the home page, was drawn toward the “upcoming events” button
- When asked where to go for the history of the Weis center from the home page, used hamburger menu and went to appropriate list element
- When asked where to click to see events for a family from the home page, was instantly drawn towards the “Family Discovery Series” block because of the word family.
- On the calendar, likes the idea of the filters, but wishes it was more uniform between the two. Suggested putting a checkbox next to the time filter and graying out the time entry boxes unless checked
- Proposed an option at the bottom of the calendar page to show past events
- Recommended that we need day of the week for each event and that we should drop the “th”, “nd”, “rd”, etc.
- Saw the benefit of having the child friendly icon on the calendar page on the left of the card as well as the right
- Enjoyed the buy tickets button right at the top of the single event page
- Complained that the size of the elements on the single event page were all the same size. Wanted the event name larger.
- Complained that the sections in the Box Office aren’t obviously expandable
- Wanted an online option in the “How to purchase section” on the Box Office page
- Wasn’t sure what “Subscription” meant on the Box Office page
3. Interviewee: Jacob Mendelowitz: Bucknell student, in HCI class, designed mobile interfaces for internship and part of research, unaware of the target demographic
- “Disc.” shouldn’t be abbreviated on home page
- If had an event in mind, then go to calendar and would scroll through calendar and search linearly
- Recommended a search bar on home page or the calendar page, but preferred on the home page to search entire site
- Wanted pricing closer to the buy tickets button on events page
- Suggested making expansion in box office page more obvious
Our new mobile website: Home Page
Through the design process up to this point, we knew there were certain items that we wanted to highlight on the Home page. These included a button to buy tickets without having to navigate to the event page, a prominent link to the Family Discovery Series information, and a slideshow of 3–4 upcoming events. We had various ideas for how to display these options, which we narrowed down through the interview and sketching processes. We made the Buy Tickets Now button at the top of the page so it would immediately catch the attention of users. By including this button, we were able to minimize scrolling on the home page, and users would not have to navigate to the events page to buy tickets. We felt this was important because, especially within our target demographic, users may not want or have the time to scroll through all the events; instead, they might come to the website with an event already in mind, in which case they are able to immediately purchase those tickets.
The second item on our home page is a link to the Family Discovery Series. The current Weis Center website does not prominently display this information anywhere, even though it would be very beneficial to our target audience. As such, we decided to place this link in the middle of the home page so parents looking for kid-friendly events will immediately be able to learn about this series.
The last section of the home page is a slideshow that moves through 3 upcoming events, with a button to see the full events calendar. From the feedback we received and our paper sketches, we knew that while some users valued efficiency, others prefer being able to see pictures and scroll through upcoming events. To meet these two distinct needs while also targeting our demographic, we including the Upcoming Events slideshow as the last element of our home page. Those who want to quickly purchase tickets or get information are able to use the Buy Tickets Now button or Family Discovery Series link, while those who prefer to see pictures of upcoming events can focus on the slideshow. All of these items fit on a standard phone screen without scrolling, which decreases confusion among our audience, since they will all immediately see the full page and the parts that are more useful to them.
Calendar
We wanted a quick way for parents to view all of the events that they could either attend with their children or as a date night without their children. We thought that the event content that couldn’t be inferred from the title is less important than planning which events to attend. For this reason, we focused heavily on a clear calendar of upcoming events that would be easy to skim through to find events for a parent of younger children. A parent with young children doesn’t have much time to decipher the site or scroll through a bunch of events scanning for the date and time. Thus we took inspiration from a well-established scheduling platform. Google Calendar abstracts all the unnecessary details behind a click of one of the event cards. This allows very compact calendar that is easy to compare to other calendars to find conflicts or availability. We were shooting for an Android styled page, so following Material Design, we put the event information in cards, much like how Google Calendar is designed.
We originally didn’t have the day of the week next to each event card like Google Calendar has, but we decided to include that because that would be handy for parents when trying to plan out which events they can attend. We also had the “th”, “nd”, “rd” next to the day of the month, but after some user feedback, it was deemed unnecessary.
We decided to put the filtering capabilities front and center on the top of the page because if a parent wants to narrow down the events because they either have a time in mind or whether they only want to go to an event focused on children, then they can do that before wasting any time looking through events. This also makes it very obvious where the filtering is. We chose the “Children friendly” toggle
The addition of the children friendly icon was to give a way for parents to easily scan through which events are designed for children. The layout of the event card was debated over in our initial phase. We thought about putting the icon on the left of the card because of how English speakers read. When skimming through the events with the children friendly icon, if the icon was on the left, you could continue reading left to right to read the title. The problem with this layout is that the cards without the icon would either not look similar because the text would be further left, or a space would be left where the icon would have been and this leaves an awkward spacing.
Events page
A user can navigate to a single event page by clicking on that event in the calendar. While designing the event page, the idea was to give the relevant information to the user in the most succinct possible way.
We decided to leverage the design concept of visual hierarchy while organization the information content within the page. We felt the top half of the page was very important since that’s the first glance a user gets on the screen. Thus we decided to go with the following hierarchy:
- Event Name, in large font to draw the attention of the user to the name
- Child icon, right next to the Event name indicating whether the event is for children or not
- Date/Time, below the event name indicating the start time of the event
- Buy Tickets, a button right below Date/Time to give the option to buy ticket online
- Social Media (facebook and Twitter) icons, on the right of the Buy Tickets button to share the event on those sites
The second half of the screen consisted of picture and description of the event. We decided to separate the description from the above information by a thin grey line to separate the two types of information, visually heavy and light. Since the description of the event was long and not everyone was inclined on reading description (according to our prototype testing), we decided to provide the first few lines and have the user select the option “read more”, if they wanted to read the full description. This way, we saved space and had the user get a glance of the video link.
Lastly, the least important information from our prototype testing and user interview was found to be the ticket prices for these events. Thus, it was placed at the bottom of the screen. We also decided to link some of the terms and conditions for the tickets to the Box Office page to remove the clutter surrounding the ticket prices region.
The colors for header, footer, and the buttons were chosen to be the same as the ones already appearing on the other screens to facilitate consistency. We ended up choosing a white background with black text since it’s easier to read textual information given in the page.
Box Office
This screen was meant to be a relatively simple one that would serve to convey information that, on the original website, was shown in the form of large blocks of text. We thought that since our demographic would likely not have a lot of time on their hands, we would want to make it as easy as possible for them to find what they needed. To address this, we created a simple nest of expandable topic lists that would withhold more detailed information until they have specifically signaled that they want to read it, creating a hierarchy of topics from very general to very specific.
In developing an aesthetic for this page, we knew we wanted something that was clean, easy to read, and would be consistent with the visual aspects of the rest of our mobile site. We chose large, easy to read fonts that contrasted well with the background colors. Both the colors and the fonts were chosen deliberately from Bucknell’s branding guide, so that they would be consistent with the rest of Bucknell’s website as well.
Menu
We wanted a consistent way across all of our pages to access the popular pages of the Weis center site. We opted for the hamburger menu in a bar at the top of all of the pages. This gave a familiar look and functionality to each page that the user would learn and is consistent to what is seen on Android. In almost every Google app/web page and many non-Google apps/pages, the hamburger menu that causes a slide out list of jump points in an app/site is the standard. On the current Weis Center website, this functionality is implemented, but has too many options to choose from, which further confuses the user. We wanted to replicate the idea of a hamburger button with very few but important options to choose from so that the user feels comfortable and doesn’t have to learn a new navigation system. We received some feedback from classmates that they liked how our slide out menu wasn’t too overwhelming with choices, while others said they felt like they were depending on the hamburger menu too much.
We wanted to keep the actual slide out piece simple so we just put the names of the pages being linked with a single line separating them. The Bucknell logo in white is placed on the bottom to make the slide out less empty without making the list elements obnoxiously tall. The Bucknell logo is also absent from all subsequent pages since it occupied more space and didn’t provide much information. We also made the menu option have a dark blue color, one of the two primary colors of Bucknell, since it has a nice contrast with the orange header.
Problems During the Design Process
We all wanted to get practice designing the pages in some design software, so we split up the work evenly since there are four group members and four pages that we needed to design.
The problem with this is that the pages should have a unified style. When we created our first prototypes on the computer, they all had wildly different styles since we hadn’t planned out pixel heights or colors of common elements. Communicating this over text would have been extremely time consuming and error prone. Meeting to do it in person could have worked, but we didn’t have much time to meet and finish the pages up. We decided to give the work to two of the members that would sit down and crank out a unification of style between the four pages.
The style that we chose was a very Bucknell influenced color scheme based on the Bucknell branding guides. We wanted a style that assured the user that they were looking at the Weis center at Bucknell University and so that the page fits in with the rest of the Bucknell pages. We chose to use the main Bucknell orange for the top bar of each page since that seems to be the direction of the Bucknell web pages recently. We chose to use the Bucknell dark blue for the pull out menu and the footer of the pages so that there wasn’t too much orange. Lastly, we used white or gray in most places but accented with the vibrant light blue which gives it a bit of a childish feel. We attempted to make all of the buttons that same light blue to give some consistency and familiarity between pages.
Getting Feedback on Our Design
After finishing our prototype of the website, we received feedback from several of our classmates using the “I like, I wish, what if” set up. Our peers complimented the professional look of our website, event filters, lack of scrolling, and the focus on relevant information for our demographic, such as the Family Discovery Series. We also received some useful criticism and ideas for future iterations of the prototype:
- The addition of a quick Home button on all pages would make navigation easier
- Adding a “Kid zone” section to the website
- Include a review feature for parents to rate events
- Redesigning the home page to be less cluttered, perhaps by moving the Family Discovery Series or creating a bigger focus on buying tickets/current events
Conclusion
After thoroughly examining the problem space, brainstorming different improvements to the existing solutions, seeking out our own solutions, and gaining valuable feedback from potential users, we were able to develop a prototype of something that has potential as a fully fleshed-out idea. In the end, we came up with a website design that was, to the degree it was possible, aesthetically pleasing, efficient, and applicable to the target demographic. We combined elements from the official Bucknell design guidelines to create coherence between pages of our app, and took into consideration the specific needs of our intended user group. These strengths of the project really shine through in the demo, in which a user can interact with a mock-up of the mobile site. Despite these strengths, our peers had some constructive criticism for our work. One thing that many people mentioned was the inefficient nature of the hamburger menu, and even though the individual members of our team liked this option, we would have to do more research in the future if we were to continue this project. We also received feedback that we should have payed more attention to our core demographic, and provided them with more features catered to them. In a hypothetical future, we would try to do some interviews with a variety of people in our demographic and use that feedback to tailor our design more effectively. Overall, this project allowed us to explore the wide variety of different points of view that must be taken into consideration when designing anything.
