Starting from the top, the header was completely revamped and given a hierarchy of information. It’s now more clear to users, where the get help and what their shopping options are. The body of the page features a mix of product tiles and lifestyle photography featuring new items. Sections with light gray backgrounds break up the content to highlight and take users to larger sections of the website. A deep footer mimics more of a site map for users to find their way to specific areas.
Homepage, Used Mac Configurator and a Product page are shown to display various UI types which had to be solved for. With many of the products having multiple options, there was a great deal of time spent defining how thes interactions should work on both desktop and mobile.
Screen 3 of a 3-page process. This page assumes the user has selected a specific computer and can then select available options and reconfigure accordingly.
The current product page on MacSales.com didn’t have well-defined areas for content or a uniform way to display all the different content types. After much trial and error, shown is an example of a product page that can house all their information and be used across all products.