UI/UX: Redesign Dodgers Ticketing

For CS 0130 User Interfaces User Experiences, I chose to redesign the season ticketing website for the Los Angeles Dodgers. Below is the process and result.

Redesign

In response to considerable usability issues, I saught to redesign the Dodgers 2020 Season Ticket website, accessable at this link: http:// dodgers.brochure-mlb.com/2020tickets/

page1image2564146384
page1image2564147248

Fig. A: The landing page for the 2020 Dodgers Season Ticket Website, viewable at http:// dodgers.brochure-mlb.com/2020tickets/

This site is made for purchasing season tickets to the 2020 Los Angeles Dodgers. It’s a scolling style website, with links in the top menu bar linking to different sections of the website. Different plans and their benefits, along with seating and pricing information, are presented in different sections of the site.

Problems

Several usability problems are clear when using the existing site. First, the scrolling-style of the side makes it difficult to see all relevant information on one screen, or see the features different plans in comparison.

For example, in the Plans & Benefits Section, the full list of benefits is not able to fit on most laptop screens, so a user needs to scroll down between switching plans in order to see all of the changes. Frequent decorative page breaks separate information that a user would likely want to see at the same time.

Since Dodgers Season Ticket Memberships are purchased directly through an agent, this website functions as a sort of catalogue, hoping to get a user to fill out the Membership Interest Form. However, this form is rather long, containing 20 fields a user must fill out before submitting. Much of this information would need to be gathered by a Sales Agent during an appointment anyway, rendering this step redundant.

There were several openings for improvement to this site, and I created wireframe prototypes of some of my ideas.

Wizard of Oz

I tested my redesigned interface by printing out the various elements and inviting test subjects to use the interface.

Daniel used the top bar to navigate through each page before clicking “Join Now” at the bottom of the benefits page and filling out the form. While using the interface he commented on several visual design features, including the uneven size of the labels on the table in “Key Features”. He also complained about the lorem ipsum text, but as that’s

simply a characteristic of the wireframe it wouldn’t prompt any changes. He commented that he found it readable, but was bothered by a lack of alignment between elements of some pages. He also disliked the typeface used for smaller text, saying it wasn’t as readable as he would have liked.

Stacey started by clicking on the “Plans” button, navigating to that page. Once there, she assumed that the white boxes labeling each of the plans were buttons, and tried to click on them. She noted that this was confusing, and used the “Contact Us” form to get to the membership form. She noted that there wasn’t any feedback when selecting the number of tickets to purchase, and like Daniel, complained about readability on the smaller text. Stacey praised the short length of the contact form, noting that she likely wouldn’t havefilled out a longer form.

Design Reevaluation

After the Wizard of Oz testing trials, I tried to take that feedback and incorporate it into the next iteration of my redesign.

The flow between pages will remain the same as in the previous version shown above (Fig 4). However the individual pages will have readjustments.

Design Reevaluation

After the Wizard of Oz testing trials, I tried to take that feedback and incorporate it into the next iteration of my redesign.

The flow between pages will remain the same as in the previous version shown above (Fig 4). However the individual pages will have readjustments

Visual Redesign

Fig. 8: The homepage of my redesign, fully rendered. Logo is from the original website http://dodgers.brochure-mlb.com/2020tickets/. Stadium background image is my own.

I made a mockup of my redesign as it would appear in a desktop browser. I added some subtle contrast outline on clickable buttons to give them greater visual contrast, but otherwise maintained the design from earlier mockups, with a one-column vertical grid and scrolling navigation. I chose a background image that would allow me to put the top menu bar and other elements with text in areas of negative space, and the lines in the

field lead the eye to the “Join Now” button.

Responsive Redesign

Because of the scrolling-style design, this page will scale fairly easily to different device sizes. The padding on the left and right will reduce proportionally when the window is smaller, keeping the elements in the middle centered.

On a portrait mode tablet, a user would have minimal padding and the website would appear the same as on the desktop, just without the padding on the left and right.
On a portrait mode smartphone, the layout would also be largely maintained, with font sizes scaling appropriately, but the top menu bar would become a sidebar instead, accessible from a button in the top left corner.