PROJECT
Design a new business-to-business site for Apple that will integrate with the online store. The final solution needs to reflect Apple’s visual language, interaction patterns, and reflect layouts similar to other Apple Store pages.
The site needs to include the following pages: home, category, product list, product detail, shopping cart and order submit summary.
ROLE
As the design lead, I worked directly with engineers, interaction designers, visual designers and directors at Apple. I reviewed and applied Apple’s visual guide, and set up weekly design reviews to ensure the project met Apple’s high standard of quality. The project was delivered against a very aggressive timeframe.
To help expedite the design process, I did an audit of all page types, and then created a framework for each page archetype.
The home page showcased a range of products available within the businesses-to-business store. The products were displayed in a clever way from smallest to largest.
Shortcut links were prominently displayed for common actions, such as order by part number, templates, proposals and order status.
Category pages contained a hero products module, related products and services modules, and a Top Sellers module. These modules were all related to the main category and helped the user make better informed decisions.
Product list pages contained a comprehensive list of products per the category selected from the Category page. Each line item contains an image of the product, part number, description, quantity, and unit price. Clicking on the "Add to Cart" button places the item(s) in the customer's shopping cart.
Product detail pages contained a primary module at the top of the page which featured a hero image and product description. Attached to this module was a section that contained pricing, quantity field, a button to configure product and a button to add to shopping cart.
An accessories module was displayed below the primary module to highlight products related to the featured product.
The shopping cart page contains line items for all products added during the current and/or previous session. Line items provide the product ID, description, quantity, total quantity, unit price and total price.
A coupon redemption field appears at the lower left corner of the page.