MacSales.com
MacSales.com (OWC) is the leader in innovative upgrades for Apple/Mac fans. The parent company, OWC manufactures products and upgrades and MacSales.com is the eCommerce end of the business. This project was a huge overtaking involving branding, designing for a new eCommerce platform and working around legacy backend systems. My goal was to elevate the brand and give them a more typical shopping experience. Additionally, much of the site redesign was focused on a mobile-first approach. Previously, the website was not mobile-friendly and was taking radical hits by Google. The project totaled over 300 screens..
Homepage
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.
Mobile
Homepage, Used Mac Configurator and Category pages 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 these interactions should work on both desktop and mobile.
Used Macs
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.
Product Page
(PDP)
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. When appropriate, the configurator would appear, allowing the user to select specific product options.
Product Page
(PDP) - Mobile
It was imperative to have the same PDP experience on mobile – we couldn’t remove any content for the smaller display sizes. Screens show how the user could access product configuration from a “peeking” panel and deeper product information from expand/collapse panels farther down the page.
My Upgrades
Nearing the end of the project, I helped introduce this new way to find products. Rather than the user searching for products they’re considering, My Upgrades allows the user to identify their specific Mac model and are shown all available upgrades specific to their machine.