MacSales.com

Over the last year, Other World Computing (OWC) has revisited it’s own brand. Until recently, MacSales.com has been the active domain for OWC – the leader in online Mac upgrades as well as the manufacturer of Mac-related products. Recent efforts have included separating the two identities: MacSales.com as the storefront and OWC as the product brand. My role has been working closely with marketing to rebrand the two.

The New Look

The “new” brand, MacSales.com reads loud and clear in the redesigned header, featuring a newly introduced color palette accompanied by flattened UI elements. The homepage body was put in a more traditional e-commerce grid with more clearly defined headlines, easily read promotions and straight forward product messaging.

Full-size images of original and approved designs:

The Challenge

OWC has proven to be a fast-growing company and their website showcases exactly that. The site is around 4000+ hand-coded pages and built without a CMS or a mobile experience. The site is locked at 990px wide and the introduction of anything responsive or involving new site architecture would involve a extensive work.

The Approach

Over the next year the site will be put on a proper e-commerce platform. My efforts to date have been introducing the new design and some more subtle UX updates until the entire overhaul takes place. Additionally, as improvements are being made, it allows us to do user testing to help influence the design of the new site as we move through the process.

Logo Design

Since we were “re-introducing” a company with a different name, it was important that we retained some of the elements long-time customers could still identify us by. The largest was the “OWC Globe”.

Header

For this version of the site update, nothing significant could change in terms of the navigation or site. I had to come up with a solution that would allow me to de-clutter the area as well as reinforce all existing nav items. By creating top-level categories and using dropdown menus, it allowed me to streamline the main navigation and increase the amount of real estate used for search.

Product Pages

With 3000+ sku’s on the site, it made sense to apply the new design to the product description pages as well. Again, no information could be discarded so presenting it in a better way was key. Because of the better use of space, there was room to add an additional row for other information such as Related Products.

Full-size images of original and approved designs:

Search

Search results pages were redesigned with more intuitive UI elements such as a more standard “Add to Cart” button, easily read pricing and savings as well as having the option for either grid or list view.

Full-size images of original and approved designs:

Mobile Design

Mobile wasn’t first but it wasn’t forgotten. Not being responsive and having to use our existing site structure, the best solution was to simply introduce a mobile header on smaller screen sizes. This allowed the pages to continue to display at 100% while serving up a mobile version of the main nav items.