Case Study - 2020

After Market Sales Website

Overview

The Design Process

Before -- theater partners received a manually generated quote like this one. They would review the quote, print, sign and finally send a copy back to IMAX coordinators.
Our vision — a simple & enjoyable way to buy 3D glasses.

Exploration & Iteration

V1
V2
V3
V4
V1
  • Users wouldn’t understand the Part #.
  • We didn't love the square button shape.
  • Missing price.
    V2
    • Users needed to increase the quantity.
    • Missing the subscription text.
    • Product title too long.
      V3
      • Missing quantity of glasses.
      • Missing type of subscription.
        FINAL
        • The Annual Subscription label was very helpful.
        • Users appreciated seeing the total pairs of glasses.
        • Users were very happy with the add icon since they could see the total cost increase with this interaction.
        • The total cost was easy to understand.

          HOVER STATES ON DESKTOP

          V1
          • The white rectangle behind the Quick view link took up too much space.
            V2
            • The gray transparent rectangle obscured important information.
              V3
              • The Quick view link didn’t stand out enough.
              • The blue outline didn't complement our primary charcoal CTA color.
                FINAL
                • The Quick view link was easily identifiable and didn't take up too much space.
                • The drop shadow provided enough contrast to convey its hover state.
                  V1
                  • The horizontal scroll was a very modern design but I felt it fit better with traditional e-commerce websites.  
                  • The Most Popular header didn’t make sense as users only cared about glasses that accommodated their theater projectors.  
                    V2
                    • Shop all products wasn't the primary CTA.
                    • Although there was a section on annual subscriptions, the landing page still didn’t convey how the subscription process worked.
                      V3
                      • The main header was easy to understand but didn’t capture the why.
                      • The UI of the CTA didn't stand out.
                        FINAL
                        • The header "Never run out of 3D glasses again" was clear, sparking enough interest for users to proceed forward with next steps.
                        • The charcoal CTA button drew users attention as a primary button.
                          A New and Improved User Flow
                          FINAL HERO FLOW

                          Up Next