INFORMATION ARCHITECTURE — WIREFRAMES — UXUI — RESPONSIVE DESIGN
Modern Theatre UX Refresh
Megaplex Theatres is a chain of movie theaters headquartered in Sandy, Utah and owned by the Larry H. Miller Group of Companies. Despite being Utah’s premiere entertainment source, their website was outdated and placed user experience on the backburner.
-
Bring the Megaplex website into the modern age, while prioritizing accessibility standards to benefit the diversity of theatres goers with data-driven decisions.
-
I was brought onto this project after the original designer left. This offered the challenge of parsing through the past communication, client expectations, and designs style without slowing down the upcoming phases.
-
Phase 1 Included the Feature Detail, created by another designer. The next proceeding phases were all completed by myself. Phase 2 included a slight facelift on the Checkout map, Phase 3 was the redesign of the Location page, and Phase 4 was the creation of their new home page and a deep refresh of the navigation and footer.
PHASE 2
Checkout Seat Map
The second phase was a smaller cosmetic facelift to the checkout experience. As we finalized the design on the Feature detail page, we wanted to bring the new seat map selection interactions into the checkout process.
To ensure complete efficacy, we created examples in theaters ranging from small to IMAX. We improved the design by adding clarity to the icons and their assigned color, as there were visibility difficulties in the previously selected palette.
PHASE 3
Location Pages
Megaplex, a major Utah theater chain with locations all across the Wasatch front, had users buying tickets for the wrong locations because there was no homepage, default users to one location. Additionally, the location selected was understated making it difficult for users to update their location from the default
To solve this problem:
Enabled geolocation to help push users to the right location.
Added home page to act as a default, if we couldn’t pull their location. This eliminated users purchasing from the default theater.
Minor UI improvements like using their brand yellow to links, improved location and movie filtering, and made the movie posters clickable (in additional to the already clickable titles and links).
Additionally, we added a seat-map previewer to the Feature Detail page for users who want to pick seats first and prioritizes direct checkout.
View the wireframes in Adobe XD 🡭
View the design in Adobe XD 🡭
PHASE 4.1
Home and Footer
Like mentioned previously, Megaplex never had a central home page and instead was sending users to a specific theater due to poor UI and inability to grab user geolocation, many were ending up purchasing tickets in the incorrect location. To rectify this, we created a home page landing point, so we force users to select their location if we can’t help them with that step.
Implementing a home page allowed us to showcase more new movies, events, and general Megaplex features. It’s a place for us to showcase all that Megaplex has to offer.
The home page was integrated to function as a hybrid WordPress landing using modules so their content manager could update it as needed.
View the design in Adobe XD 🡭
View the wireframe in Adobe XD 🡭
PHASE 4.2
Navigation and Menu
Issues:
Years of adding links without consideration
No consistent starting point for titles and links
No clear indication of where links direct to, plus opening in the same tab
Underwhelming hierarchy and confusing mix of lavender with buttons in hero
Solutions:
Identification of page importance in relation to the user journey, and careful reallocation
Using the new column grid to influence the mega menu design
Marking off-site links to clearly identify where they lead
Toning down the background color in order to add graphics for visual interest and marketing purposes