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.
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:
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:
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.
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.
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:
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.
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!