Competitor research, Card sort & IA, Persona, User Testing & Task Analysis, Wireframe, Prototype
I worked with a small team on a complete redesign of the Roundabout Theatre website. We followed a UX process to re-structure the navigation, create a persona, and develop a responsive website design which streamlines the ticket purchase process. We were able to streamline the ticket purchase process for on-the-go users by easily navigating a purchase through the calendar.
The Roundabout Theatre Company is a local nonprofit organization located in New York City offering production of classic plays and musicals. They were in need of a website redesign to make their site responsive and drive ticket sales. It was important to keep a modern aesthetic and keep existing brand elements. As a content driven site, consideration was given to the current content available.
We found that our users were busy and needed to be able to make plans with their phone. Although many users did not have a particularly substantial incomes, they were still willing to donate to a local organization.
Interviews were to be conducted in a place where you can be uninterrupted. Each interviewee was to be introduced and their role explained as an interviewer, as well as the nature of the interview (there are no wrong answers, etc.).
We wanted to gain insights on how users are accessing content and developed four specific user profiles. To collect data we conducted interviews, observed specific tasks, and developed a questionnaire. By analyzing our data we were able to view the ways in which we could guide our design decisions.
Persona 1 Maddie
Maddie is a persona I developed for the young single parent, she lives in Brooklyn with her daughter Anna. Maddie is mostly always with her daughter unless she can find a sitter. She barely opens up her computer, but is always on her phone checking social media and looking for local events. Maddie attends a show once every few months at a local venue.
Users are on the go
Users are on a tight budget, but willing to donate.
Visitors are not coming alone
In order to explore the design space we conducted a review of direct and indirect competitors. We decided on dimensions and collected data in a spreadsheet. We then analyzed trends and patterns and organized recommendations into a slide deck.
Six websites were chosen based on similar size and offerings to the Roundabout Theatre Company. We analyzed five different characteristics including Social Options, Accessibility Options, Learning Opportunities, Clarity of Images, and Support for Organization. Further review consisted of determining if site was responsive, tickets were available for purchase, and number of venues.
To increase donations, attendance, and membership, competitors of Roundabout Theatre employ a variety of practices on their websites. Each of these practices is underpinned by clarity. The user requires clear textual and visual definitions of how and why to donate, attend, or become a member.
Social media icons should stand out clearly and match design of site. Viewers are familiar with social media icons and should not be paired with additional text. A large newsletter sign-up box in the header or footer will encourage visitors to join the mailing list. Use of social media APIs proivde a quick view of up-to-date social content. Auto generate tweets, Facebook posts and events.
It is essential that the website be accessible in order to provide equal access and equal opportunity to people with disabilities. The website should provide tools for accessibility, such as text size and readable text. Also, ensuring sufficient contrast between text and its background, using color as a highlight to what is already visible, using alt tags to describe images accurately, describing links and having a well organized and structured content can provide an easy online experience to those with disabilities.
The content of the Education page should be well structured and organized, so users can scan and easily find the information they are looking for. Content should be divided and labeled properly so that it doesn’t cause confusion. The sections should have hierarchy between headings and copy text, also using color mindfully to bring the brand within the design of the website and create a good experience. Education should be a main item in the navigation with a drop down menu with the content of the page.
Roundabout Theatre would benefit from using their images to inform the user as much as they use their textual content to do so. Applying this would mean drawing clear relationships between images and their related content. “Group Tickets,” for instance, should be paired with an image of a group of theatre-goers. Higher quality images, consistency of scale in image dimensions, and the removal of images too small for visual clarity or informative value should be implemented.
It is recommended that different language is used in the donate/support section. Using a word like “Giving” creates more understanding for the visitor, and is feels slightly less demanding. All options for giving should be clearly stated and defined, with a well defined hierarchy. This goes for the clear separation of personal donations and business donations as well. Some form of recognition may further encourage visitors to donate. This could take the form of donors being named in programs, on a plaque or seat, or some other form of recognition.
To conduct a card sort test for the Roundabout Theatre, content labels from the theatre company’s website were selected. Most of these cards were modeled directly from what appeared on the website, but we had to create specified duplicates to clarify some categories (contact education/contact Roundabout, event calendar/show calendar). Some cards were created in an attempt to restructure the massive amount of information available on the site.
With the information we gathered from the participants of the card sort we were able to gain a better understanding of how people expected the information to be presented. From this data we conducted a tree study to understand further how people understood the navigation of the website. Out of 34 participants, 24 completed the study. We found that not all of our tasks were completed as we predicted. This left us to reimagine our planned structure of the website, and the re-naming of a few labels on the website for further clarification.
The results of our card sort revealed unexpected card groupings, and some cards were left ungrouped because of lack of context. Further, the results from our treejack study didn’t support the results of the card sort. Our results were not “typical” and were sometimes difficult to read in a quantitative fashion. What might make sense to some users might not to others. Either more context must be provided, or participant groups must be targeted for clearer results.
Study participants were unsure if they were completing tasks correctly. Although we had clear descriptions of that the study was only for research purposes, people still felt as if they may be doing something “wrong.” Participant anxiety was a contributing factor in mixed results and study abandonment. Moving forward we may address this not only in study introductions, but also with greater reassurance throughout studies.
Participants of our studies tended to experience greater degrees of excessive task times, failure, and study abandonment when sorting or seeking information beyond top-level and second-level categories. While the client wants to retain its textual content as is, much of the content could be reduced to a single page or few pages if presented in a tables or other visual formats.
Based on results of the card sort, we rearranged the main navigation of the website. Once we had a structure in place, we then choose 6 tasks for the user to complete in Optimal Sort. After rearranging the navigation elements based on feedback from tree test, we finalized our site map.
Task (Sample)You heard good comments about the Casino Night at Roundabout Theater. You would like to attend this year, but you want to get more information about it. Find information about Casino Night.
Path to take: Shows & Events > List Events > Casino night
Task (Sample)You have a company and would like to give your employees some sort of benefit to go the Roundabout Theater to see shows. Find out if Roundabout Theater offers any package benefits for companies.
Path to take: Support > Corporations > Corporate Club
Task (Sample)You are looking for a performance to bring your friend to, but your friend is hard of hearing. Find out more information about the best performance(s) to look into.
Path to Take: About > FAQs
Based on our research and findings we began sketching wireframes that incorporated our findings. Our wireframes and low fidelity prototypes began by following specific tasks we outlined, which mostly relate to how users actually interact with the website.
We were able to streamline the ticket purchase process for on-the-go users by easily navigating a purchase through the calendar. The process for renting a venue for an event was simplified by compacting all venues and options onto one page. Further testing revealed users were drawn towards the sticky donation button on mobile when they land on the home screen and took down on subsequent pages.
Our design will help The Roundabout Theatre Company reach their goals of increased ticket sales and donations by implementing this design into a fully functional responsive website for their target audience.
Google Analytics Tracking