The Iteration Situation (Spoiler: It Works)

How Moving Our Way Through the Several Versions of Megaplex’s Website Usability Transformation Helped Build The Best Possible Final Product

When we first began down the road of re-imagining what a better, simpler version of the Megaplex website could do for its customer base, we had no idea what fully lay ahead. What we did know that the website was difficult to navigate for us, and that meant it was likely even trickier for a customer base who might not necessarily be as tech-savvy.

From building personas, tracking customer journey’s, re-envisioning navigation, building wireframes, and continually coming up with potentially radical new design ideas, we have learned the importance of reiterating to get the greatest results.

Final Revised Screenshot From the Megaplex Re-Imagining

Re-Imagining What Was Possible

The process of moving from one design to another seemed simple on the surface. As we began to dive deeper into things, it quickly became painfully apparent that details matter, and that small things needed to continually be updated and changed for the final experience to come together.

Personas Paint a Picture

An important part of re-evaluating the Megaplex experience was to really try and envision who might be using the site. As discussed earlier, our group tested a wide gamut of individuals. We came up with the following personas to help put a face to the people behind the testing:

Megaplex Personas developed based on user test subjects

Scenario Maps Help Tell The Story

Our team then completed the process of building out customer scenarios maps based on those personas to give us and the client a better idea of who was using the site and how they were doing it. Below is an example of what this looked like:

Scenario map for the “Christy” persona

Navigation Craziness

One of the biggest complaints we heard during testing was that navigating the menus of the site was tedious and cumbersome. To help alleviate some of the pain points, we worked out a new site map.

Original Megaplex site map is on the top-left, with our new proposed version on the top-right. Final site map is on the bottom-center.

The final version of the site’s layout and structure is much more simple, but does not do away with anything. Our hope was that this updated navigation system would give customers a much easier experience, and allow them to find what they needed more quickly.

Wireframing: The Skeleton Is Constructed

Based on the final site map, our team took to wireframing several of the pages that we felt would definitely benefit from a facelift. This basic structure would eventually go on to help us come up with the first of what would be several iterations of the final, high-fidelity surface comps.

Proposed Megaplex wireframes.

Putting a Beautiful Skin On It

After wireframing, it was time to give our designs the high-fidelity treatment, including full-color imagery and accurate type. Each member of the team took time to develop fully finished surface comps that would later be used in the final testing process. What you see below is just one of many iterations and “cleanups” during the final design phase:

Proposed high-fidelity Megaplex surface comps.

Bringing It All Together: Prototyping the Finished Product

Once the team finally settle on a completed design, we set out to build a fully functioning prototype based on the work we had done. To experience the proposed site changes for yourself, click below!

In The End

After all is said and done, we were able to gain some extremely valuable feedback based on the results of re-testing the new designs. Compared to the old data, our subjects were able to complete some tasks up to 5 times faster! Much of the data collected during these new test needs to remain internal, but at the end of the day, know that Megaplex was extremely pleased with the outcome.

The Megaplex/UVU Team

Our team was challenged with taking on a full redesign of several critical pages on the Megaplex website. From major researching processes like content auditing and competitive analysis, through continued development using things like personas, journey experiences, and site maps, to the final phase of designing and testing a brand new experience, our team was able to come together and potentially bring a brand new feel to the Megaplex customer experience!

--

--

--

A Design Journey by Brandon Leavitt

Recommended from Medium

Case study: Designing a real-time local trip experience

Design Newsletter #5

Weekly Design Newsletter for designers

PUF Panels in Prefab Construction — Energy Efficient and Durable

Why Product Designers Must Write

Creating User Centered Metrics

UX bootcamps, degree or self study: what should you choose?

Bootcamps, degree or self-study?

This company is building prefab cabins built to last 100 years

wood and metal cabin on stilts

Free-lance vs Office

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brandon Leavitt

Brandon Leavitt

Lover of art, music, ocean, and technology. Canadian. Beatles-zealot. Believer in the value of seeing the world through somebody else's point-of-view.

More from Medium

Fixing the UX of Covid-19

Ethics in UX

Video Game Design

Are you afraid of change?