Originally, I chose Apple.com because I knew that it was both beautiful and confusing. After studying it for a few days, I came to two conclusions and decided to “realign” four of its main pages: the home page, the Apple Online Store, Support, and its Community Discussion (the support forums).
First, Apple.com does not reflect its own products anymore. Since 2007, the company’s designs have become thinner and sleeker, adding more black and replacing rounded sides and backs with flat ones. The website, however, reflects neither of these developments. Furthermore, the navigation and other page elements float independently from each other. Apple products, however, are about unity, not disparity - all-in-one computing, unibody casings, and seamless design.
Second, the Store, Support, and Forums are overwhelming experiences. The Store and Support pages use a three-column layout, surrounding visitors with text. Also, it takes a while to figure out where to start looking. Apple.com presents all of the information on the same page and expects users to sift through it. A realignment would need to guide users to their area of concern and remove the initial “shock” and confusion.
A New Navigation Apple’s increasingly touch-based products feature fewer and fewer physical buttons. The new navigation does the same, also using more black instead of grey-on-grey (just like Apple’s products).
Solid Structure The navigation no longer floats above the content; it is instead integrated, unifying the page into a single element (again, just like Apple’s products). The previously disparate parts of the page have been fused together into a solid block.
Gradients Be Gone We remove the heavy gradients, including the one in the navigation, thus reducing the “kitsch” factor. There are still subtle grades to create depth, but we no longer abuse the 3D-metaphor. It’s a button... without looking like an actual button.
Hear Ye, Hear Ye There are so many exciting Apple announcements and products - why highlight just one? We now use a slider to show visitors new updates in an organized way. Plus, the slider echoes the sliding home screens in iOS.
Window Shopping
The Online Store now features a “shelf,” just like on the Mac product page. Formerly, this was a boring list of text links, and now its an easy-to-use way to navigate Apple’s products.
The sub-navigation lists the main categories, making it easier to find something specific without sacrificing real estate. When you select a category, the visual product shelf scrolls left or right to that section of the slider.
Three’s a Crowd The current three-column layout makes users feel like they are being surrounded by options - it can be shocking. A two-column layout focuses a visitor’s attention, leading to faster shopping and increased sales.
Accessorize The new product accessory list is more appealing and easy to navigate than the current wall of text links. This five-column approach makes finding that perfect case or keyboard much easier.
Buy Now, Know Later Now I know how many items are in my cart. The current design doesn’t tell me. Auto-updating carts are a UX standard, so we’re just playing catch-up here.
Best Foot Forward Apple’s customer service is world-famous and reason enough to buy a Mac or an iPod. Here, we bring that to the top and make it a real selling-point.
It's a Deal Apple doesn’t have many clearance sales or get-one-free offers compared to other electronics companies. The Store should highlight the ones that Apple does promote.
Let ’em Breath Everything doesn’t have to have it’s own little box... sometimes we should give the products some space and use open layouts.
Because there is. The current Apple Online Store is cluttered; often times, information and links are repeated. Most of the Store is text-based, overwhelming the user with information. We’ve also removed the three-column format because it “surrounded” the visitor with too many options.
By including less information, more visuals, and a much clearer structure, we can guide users to what they want to buy by removing distractions, thus making the online shopping a pleasant and intuitive process.
Move People Along Customers don’t come looking for help with all of their products at the same time. This new top section filters users right away, taking them right to the information that they need.
Contact Us Usually, support pages bury direct support (like contact information) deep in the site so that users don’t flood their phone lines. Apple has world-class service and should put that fact right up front.
iTunes Gets Some Love iTunes is the most widely used Apple product and unifies all other Apple devices together. It deserves it’s own category, which is doesn’t have now.
Call It What It Is The Forums get a clear call to action button (now its kind of hidden). We also renamed it “Discussion Forum” instead of “Community” - call it what it is.
If we map out each section of the Support page, there are four main sections: figuring out which product needs help, resources, how to contact Apple, and solutions/self-service. On the right, you can see an analysis of the page’s information architecture by section.
Currently, these sections are jumbled together into a confusing pool of boxes. This is subtly confusing to visitors; proper divisions help users know what to look at... and what is irrelevant. As the diagram on the right shows, the new Support page creates four distinct, horizontal levels of information. This clear hierarchy subtly guides visitors to exactly what they're looking for.
The new designs
Categories (red), Contact (yellow), Solutions (green), Resources (blue).
Break Down Walls We introduce a sleek navigation with product thumbnails. The current forum uses a text-link wall, reminiscent of 90s Trekkie forums.
Faster Skimming Threads update using Ajax. When you select a category or subcategory, the list of topics automatically filters without refreshing the page. Users can find exactly what they want more quickly.
A Caste System Categories and subcategories stack in clear horizontal hierarchies, leading users directly to the threads they want.
First, Apple’s products may have evolved their “look,” but the company’s core beliefs are still the same. Apple has always stood for simple, clean design - effortless, in fact. The core of the website should remain the same - a radical redesign of Apple.com would only be appropriate if it were to follow and equally radical divergence from their traditional ideals.
Second, the website’s content isn't changing - what Apple wants to say about iPods and how to buy them is unaltered. What Apple.com needs is better access to this information, which we can accomplish through improved layouts and navigation.
Through this realignment, we have protected Apple’s identity while also reflecting its newest products and improving the user experience.