Boyd Gaming Casino Website Redesign

About the Project

In late 2016, my team at Boyd Gaming was kicking around the idea of a redesign of our websites. The current design was outdated. It didn't look good on mobile, the font was too small for our target audience (individuals age 65+) to read, and the websites weren't as ADA compliant as we wanted them to be. We pitched the idea to leadership for Q1, and we got the green light! We set the following goals:

1. Make a template that could easily scale across the wide variety of products and services offered at each property
2. Update to a well-known framework and make the website fully responsive
3. Build in ADA compliance from the start
4. Increase the font size and switch to a white background instead of black
5. Place more emphasis on hotel bookings and player loyalty program

At the time this project started, I was only holding the role of front end web developer. After two months and enough unapproved designs even the developers were trying their hand at some, I came up with the "winning submission". From that moment on, I was assigned the roles of UX designer and UX writer, along with retaining my front end web development role. Below I've shown what we started with, one of the redesign attempts that was rejected by leadership, and my "winning" redesign idea.



While the design process did jump around a bit, with me providing designs to leadership daily for whatever they wanted to see, the rest of this case study will be presented in a logical order for better understanding. The above design is for a top level page, which were designed first due to being the most problematic and content-heavy, but will not be discussed in-depth until a little later on.

Header

What would and wouldn't be visible above the fold was definitely a big deal as we were designing these websites, and with so many different pages our users could get to, leadership wanted to see if we could simply put everything of importance into the header. The big asks from both leadership and our properties (our "clients", for this project) were:

1. Hotel Booking Widget
2. Player Loyalty Club Login
3. Weather
4. Email Signups
5. Search Function

Knowing that we also had to fit a main navigation up on the top, which for some of our properties was ten items, it was a struggle to keep our header fitting within a reasonable height. We were asked for a sticky header, that would always be present on the websites, which meant we had to keep it as thin as possible. We also needed to ensure we could present hover styles with two different changing elements, and have elements listed in a logical order for a screen reader to keep in check with ADA compliance. With this in mind, we presented the following options for the header:



While some of these were close, there were still issues, especially in the small desktop and tablet size, where we didn't feel quite comfortable switching to a mobile view yet.

The first issue we really ran into was how many sections of their website each property wanted to highlight, and how many more they would be requesting. In an effort to keep our main navigation simple, it was decided that sections like entertain, golf, shop, relax, meet, and weddings might be able to be consolidated. We already had the following items on our navigation, that we knew were there to stay:

1. EXPLORE our promotions at {property name}
2. STAY in our hotel rooms at {property name}
3. PLAY in our casino at {property name}
4. DINE at our restaurants at {property name}

While the word entertain had been part of our brand for a while, it didn't fit in with the above items. People were not able to "entertain" at a property, they could be entertained. That difference is why we decided to group it in with some of our other things to do. It took us a long time to come up with a word that appropriately grouped concerts, golf, shopping, spa services, movie theaters, arcades, and bowling into one area of the website. We all agreed that these were things to do, but already concerned with how much was in our navigation, we didn't want to use a phrase. Our winner for the longest time was enjoy, but leadership didn't feel the choice was an accurate representation of our brand.

We also had difficulty picking a new word to replace meet. While the word was accurate in a way entertain had not been, with the inclusion of weddings and special events aside from just business conferences, we wanted to highlight the change in content by using a different word. Because of how invested leadership was in the brand words for the navigation, we did not get to do true usability testing for these, instead presenting a list of words to leadership and having them pick what they liked best. In the end, it was decided we would use:

1. EXPERIENCE things to do at {property name}
2. GATHER in our meeting spaces at {property name}

The most important thing in our navigation was the hotel booking widget. We had decided to place a button for it at the end of the navigation, leaving an opportunity for that to be pulled out from the main navigation and left over to the right side on a mobile view. This button was colored differently than the rest of the navigation in order to draw users eyes to it.



This did leave us with a bit of a conundrum when it came to properties without a hotel, as the unusual color did more for balance of the page than we originally thought, but for properties without a hotel we chose whatever would drive the most visits to the property, which was our slot search feature for many of them.

Since making this booking widget, the company has switched to a different booking engine that provides their own widget interface. This interface slides out from the side, rather than from the top, meaning that in any future iterations we would probably want to align our navigation with the right edge of the browser, rather than providing padding for it.

After some testing, we discovered that the navigation was not as clear as it could be. Despite the words stay, play, and dine having been part of our company's brand for quite a while, our users still were clicking blindly to find what they wanted. It was our opinion that if a mega menu could drop down when hovering over each navigation item, a lot of this confusion might disappear - even if the user tried to go to the wrong area, they would be able to tell that before clicking on it.





The mega menu did not receive the buy-in we needed from leadership, despite presenting statistics, so we reverted back to a simple drop-down menu until a year later when we were able to dust off our design and implement it.

Footer

Surprisingly, the footer was accepted right from the first wireframe - and because that was early on in the project, that means I didn't have a hand in designing it. I did, however, have a say in the content. After much debate, it was decided that important links we didn't include in the main navigation - such as Contact Us, Directions, Photo Gallery, and Careers - would go in the footer. We also wanted to include a special callout for the reservation hotline, social media, and a newsletter signup. To promote cross-branding between our properties, we included a logo bay, and we also included a copyright and responsible gaming statement per state gaming board mandates.

Homepage

The homepage is the first page anyone sees when they go to your website, and unfortunately, everyone on the team had a very different idea of what they wanted to see on it. I wanted to see a highlight of our main website sections, an overview of the property, our promotions, and a map. Other people wanted to see drone footage videos of the property and room offers, or progressive jackpot amounts.



Though we did have some versions where the copy and the promotions were flipped around, in general the structure was approved from the first comp. The major change we had was in the sizes of the promotions and progressive jackpot display. Because we wanted as many items as possible to be visible above the fold, we shrunk down the size of each promotion tile, changed the default to five across instead of three across, and tightened up the padding on the progressive jackpot display. We also removed a button that would allow for full-page browsing of the promotions directly from the homepage, fearing that if we pushed down the content too far no one would read it.

Top Level Page

A top level page is any page that can be reached via the main navigation, without using the drop-down or mega menu. It is called that because it is the first level that can be reached via an XML sitemap. As it happens, the top level pages were the most heavily debated design, and was the wireframe I scored the UX designer and UX writer roles with. Below is a gallery of some of our top level wireframes:



Unlike previous designs that had been showcased before, my proposed template worked off the idea of modules that could be selected and moved around the page. As I begin making more wireframes, our team settled into a naming pattern for these modules that is as follows:

Ad Module: Any rectangular module appearing with both an image and a brand texture. While we originally had named our uploaded images after this as well, it made them disappear for some people using ad blocker, so that name is being used internally only.
Menu Splash: Any module that contained links to multiple pages within it, or that contained a single page but retained the icon, text, and hover styles from a multi-page view.
Parallax: These are the full-width rectangles named after the functionality we had envisioned for them. Due to a snag in development, these modules no longer function as a parallax area.
Icon (Side-By-Side): While icons could be used alone and centered, most often they are found side-by-side with another icon and some text.

Though everyone loved my top level design for the way it brightened up the page while bringing everything up and making more visible above the fold, there were definitely a few concerns on the development side when it came to this layout, specifically with the menu splash modules. These modules were designed to accommodate a variable number of subpages, meaning we would need to have certain logic in place for a range of how many pages could be supported, and the different ways the module could appear with these in mind.

We decided on a minimum of one and maximum of nine pages per module, which with the left and right displays supported ended up being 42 different options. After reviewing this with our back end developer, we decided to cut out our smaller displays due to such a drastic difference in height, as well as most of the single-row displays. This still left us with 32 different modules. All of the original modules provided are displayed to the side (or above), and be clicked on to be viewed in a larger size.

While we did end up cutting out some other things in the development process as well, such as the buttons on the subpage tiles of the menu splash module - since the smaller tiles needed a hover state and worked that way, all the tiles had to - and the built-in data entry functionality seen with several of the icons, these pages were approved relatively quickly, and after around 30 wireframes of just top level pages we were allowed to proceed with the development for them, showing the rest of the options in our dev environment rather than making wireframes for all of them. Since between all the websites we were redesigning, there are approximately 150 top level pages, we were very grateful for the permission to proceed.

With the creation of such a busy page, one of the ways we really made it stand out was with engaging headers and calls to action to label the various sections. Because I love writing, and have a difficult time filling in things with "Lorem Ipsum" unless I have to, I took it upon myself to do all this writing while I was working on the wireframes. I had expected the copy to get changed by someone in leadership, but as it turns out they really liked the voice I brought to their brand, something they hadn't had before, and I was asked to provide additional copy in this manner. Before this, all of our CTAs simply stated Learn More, and we didn't have any additional headers on our pages.

Headlines     Calls To Action

Second Level Page

A second level page is any page that can be reached from a top level page and hosts additional pages on it. It is called that because it is typically the second level that can be reached via an XML sitemap. Though with the way our website was set up, it was less common for people to end up on the second level pages than any of the other ones, we still tried out a couple different styles to begin with:



The one with the full-width images was rejected because it wouldn't scale down very well on mobile, and also didn't provide enough of a preview of the room. The one with the buttons at the bottom was rejected because not everything that could be found on this page template would have a long list of features like hotel rooms do. This left us with the two other versions, which were identical save for the number of buttons, and we decided to proceed with the single button version due to development concerns.



In addition to being used on second level pages, this also became our standard template for any top level page with six or less subpages, and we updated our booking engine to display the list of rooms using a similar template as well, though we had a bit less control over the stylesheets because we were using a third party system.

Third Level Page / Regular Page

A third level page is any page that can be reached from a second level page. It is called that because it is typically the third level that can be reached via an XML sitemap. The template for our third level page was also used for any generic created page without a specific template assigned to it. When I first got a chance to design these, I had a lot of ideas in mind after looking through what our competitors had, and came up with the following wireframe:



While everyone agreed this layout showcased things that were important for a hotel room, it ultimately was rejected because it was too complex for any of the other venues we would need this page layout for, and because there were no good fallbacks for what would happen if there was no photo gallery, virtual tour, or floor plan. It was also decided that no additional booking widget was needed because we would have the one at the top of the page, and that there was no need to push group bookings when looking at a single hotel room. Based on feedback, I revised and ended up with something closer to the following pages:



As far as hotel rooms go, I did push to keep the arrangement of numbers that included the square footage of the room, the number of guests, number of layouts, and rates, but when the idea was run past our revenue managers they asked to not have that much attention drawn to those numbers. These days, I would replace one of those numbers with a note about accessibility, and the number of accessible rooms available in that style.

Additional Pages & Elements

While most of our pages could be covered by some variation of the third level page templates, we knew we would have to accommodate for other pages such as directions, forms, our 404 page, sitemap, etc. We also needed to go more in-depth into some of our modules to see if other versions needed to be made, such as calling for reservations.

One of the things we were most concerned about was events, because aside from our hotel bookings these were the other major revenue-generating pages on the website. Also, unlike our other pages, our users were more likely to view these from a mobile device, making the design even more important.



While these were generally well-received, when a concern was brought up about SEO by having the content below the dates and times, I made several alternative views that covered not only events, but promotions and room offers as well, which was the version that ended up getting approved.



Additionally, it should be mentioned that the "square" containing the promotion image and information also went through a couple rounds of feedback before finally being approved with left-aligned content, and center-aligned calls to action.

       

One of the other things we wanted to be extra careful with was our calls to action specifically when it came to booking a hotel room. Though we had a booking widget that followed users around the website, there were still plenty of people who preferred to call in reservations rather than book online, and we wanted to make sure they had an option visible to them when they were looking at rooms.

           

Though there was a time we had all four styles available to pick from, we ended up removing the one that was entirely black for being too intimidating, and the one with the rates because we would need to many fallbacks in place if our rate scraper went down. We ended up using the one with the phone number for rooms people preferred to call in for, such as suites, and the version without for our generic hotel rooms.

As a developer and a designer, I have some very strong opinions about forms. Beautiful forms are often not functional. Functional forms for most people end up not being ADA compliant. They're quite possibly one of the most challenging things to design in such a way that everyone is happy, and if you're working in a program without any kind of repeat grid functionality, they can also be a bit painful to create.

As my company's expert on ADA compliance, my guidelines were that each section was appropriately labeled, every field label would be located above the input itself, and every piece of information was in logical order. As a designer, my guidelines were that each label remain visible to the user even after inputting their information, and that when possible we put multiple inputs in each row so as not to discourage users with a long form. As a developer, I was just grateful we based our idea off Materialize, and I didn't have to code it from scratch.



We do not have many images of our forms because after these comps, it was determined it would be easier to set them up in development and show them via an HTML & CSS prototype that could be adjusted during each meeting in a few seconds, rather than having to wait an entire day to have a new comp created and approved.

Usability Testing

Once we were fairly sure on a direction to go with our design, and before we had gotten very far into development, we did a final check to ensure the choices we made would make sense to our users before we got executive buy-in on the websites. Based on what we wanted our users to focus on when they went to our websites, we devised a usability test that asked participants to locate information on golfing, find out what hours a dining venue is open, and locate a promotion happening on a certain day.

Read Usability Test Questions

Since we weren't allowed to show the design to people outside the company at the time, we gathered a group of volunteers from other teams that were interested in learning more about our websites. We decided our main method was informal usability testing, and set each person up in a conference room with a small testing environment for the websites. Similar to a cognitive walkthrough we asked them a series of questions while recording our audio and their mouse movements. Every test conductor was given the above handout, and would write down the answers to each question along with notes, and there were two test conductors sitting with every participant.

One of the things we learned early on during our usability testing was that nobody could read the text on the website. Though our zoom level was 100%, and our font size was approximately 12pt or 16px, everyone was squinting. Due to company resources, we were forced to conduct these tests off a small laptop being projected to a large screen in the room, so we invited the participants with the most issues seeing to come back and look at the site on desktop instead. While this proved to be much better, overall we were able to pinpoint the problem was not the size, but the font itself, and so we switched to Open Sans for a more readable choice.

When trying to test the word we had picked for our "things to do" section of the website, experience, we learned very quickly that all our main navigation sections could be taken to mean multiple things. People familiar with our brand and industry understood what they meant, but people who were a bit newer to it struggled on selecting the proper section. Though we could not change most of our navigation - everything except the word we were testing was approved by leadership, which for us meant we couldn't change it - we did decide that a mega menu would not only be helpful, but would be necessary for the success of our product.

Coming from an ADA accessibility standpoint, we were fairly careful with our images, trying not to use any to convery essential information and having them be for decorative purposes only. With the number of people who had access to upload images, it was determined early on that alt text should be left blank, rather than expecting people to type it in every time or trying to pull from something that would result in redundant text for a screen reader. However, people were really drawn to the images, especially when we used logos. They wanted to see them larger, and in more places, so we ended up setting up more of the website to accomodate for additional imagery to encourage clicks on our dining and entertainment venues.

This usability test was focused more on making sure people could understand and navigate our website properly. If I could go back and do it again, I would place more emphasis on having participants take a revenue-generating action, and see if the user stories we created matched up to their actions.

Branding

Each of our properties already had an established brand for direct marketing and other print materials, but this brand had never been translated to a digital platform before. As anyone who has worked in design knows, being able to work with exact measurements, as well as designing with CMYK colors, can lead to a very different style than is needed for digital. This wasn't a problem only when it came to the branding elements used, which often consisted of diagonal lines and colors that were hard to match to text for ADA compliance, but with the choice of font itself.



For colors, we chose the closest equivalent to the pantone value provided on the brand sheet. While the example shown above is mostly blue, our properties had a wide range of main colors, including reds, purples, greens, yellows, and oranges, as well as other shades of blue. We also had some properties that had a full rainbow of brand colors, in which case we tried to match the one used in their logo. Because of the wide range of colors, our brand sheets ended up with any property colors, a set of black, grey, and white to be used across all websites, and one complimentary color, usually a shade of gold to match the parent company branding, to be used as an accent.

For the fonts, we made a decision to primarily use Google Fonts across the website. We didn't want to be using a lot of different ones, keeping in mind we would be using the same base stylesheet across all our properties, so after looking at all the brand sheets we selected two sans-serif fonts, two serif fonts, one "cowboy" style serif font, and a cursive style font to select from for the closest match for each property. These fonts would only be used across our H1 headers, since they were difficult to read at small font sizes, but this way we could make each property a little unique. For each font, we had a Google Fonts family picked, a web-safe font backup, and a generic font backup. We also used font-family: 'Open Sans', 'Arial', sans-serif as the main body copy on all websites.

Textures were more complicated, because the brand guides typically had one, but with the design of our website we could accommodate up to five different textures, and preferred to have a minimum of two for some variety. Since one of the textures would always be used in the footer, we wanted to make sure we had a separate one to use on our modules. Working with our brand team to select the most fitting group of textures, we ended up with a dark texture to use across the footer, two lighter textures to use in parallax website sections, a plainer texture for ad modules, and either a variation on the footer texture or a gradient (or both) to use on other sections of the website.

Copywriting

While UX writing was an important part of the process, and was covered in this overview during the applicable sections, the websites as a whole were in need of a copy refresh. Not only had we added more pages than we had originally, we had more "bite-sized content" on the websites, including little overviews of each hotel room type, dining venue, etc that would display on various pages, as well as additional copy that would appear when hovering over those items.

In order to update all the content on the website, we made "outline documents" for each website that showed the page structure and all the different sections we had labeled in our content management system. Then, we copy/pasted all of the existing copy into its proper place, showing which areas we needed to write brand new copy for, and which areas just needed a touch up. As the only person on the team who enjoys copywriting, I was personally responsible for reviewing these documents, and editing them where needed.

These content documents were the last thing we made for each website, and were assembled with the knowledge we would be handing them to various people on the team to upload into the websites for us, meaning we inserted HTML code in advance where we could.

Small Website Content Example     Large Website Content Example

When it was finally completed, this project made everyone on the team feel really good, because we put so much work into it and were satisfied with the end result. Within a few months, we found that competitors had begun copying the format of our websites, either building out their pages to match a similar format to ours, or in some cases changing their main navigation to use the same website sections we were. Though we never were able to roll out the new design to all the websites it was meant to belong to, and the company is in the middle of working with a vendor for a new design, we are still happy every time we see the pages, and hope that our design continues to exist in some form.
# # # # # # # #