Apple.com Add-a-Feature

UX DESIGN

Apple.com

Apple’s mission statement is “to bring the best user experience to its customers through its innovative hardware, software, and service.” To that end, I feel that there is a marked opportunity on the Apple store to help guide customers toward the particular products that will be most useful for their particular situations and needs. In this project, I developed a series of features and wizard pages that guide users to choose Apple products based on their needs, as well as to help them integrate their Apple products with other computer hardware and common online services.

Design Goals

  1. Design a series of responsive “product recommendation” website pages to help users choose the Apple products that are right for their specific needs.
  2. The website pages should be aesthetically pleasing, intuitive to use, and fully compatible with Apple’s design aesthetic.

I also resolved to answer the following questions: 

  • What types of question sets are needed to accurately lead the user toward an accurate representation of their needs?
  • How many types of “situations” should I allow for user to choose from when deciding upon particular user needs?
Year
2020
DURATION
4 weeks, 20 hours per week
Tools Used
Figma

Process Overview

      Research Goals
      Landscape Analysis
      Interviews
2. Information       
    Architecture
      Site Map
3. Interaction
    Design
      Wireframes
      UI Design
      High-Fidelity Prototype

1. Research

Research Goals

Before designing the features of this add-on to the Apple website, I knew it would be necessary to learn more about how Apple users make decisions about the Apple products they plan to buy. I also wanted to find out if other online product recommendation engines existed, in hopes that I could gain some useful insights from them.

To this end I set these research goals:

  • Identify best practices for organizing information in the wizard.
  • Identify user interaction strategies for the wizard to best sort through user needs to lead to particular relevant products.
  • Understand customer pain points that could make using the wizard difficult.
  • Determine where on the Apple website the wizard should be placed for maximum impact.

Landscape Analysis

I made a feature comparison survey of five companies that offer product recommendation engines on their websites. None of these engines offered the full range of options I wanted for my Apple.com features, but they all afforded me insights into how I might approach organizing and presenting my features in a user interface.

I particularly liked the visual style of the Sonos engine, as well as the way the Google Store offered suggestions for activities that could be accomplished with different combinations of Google products.

Some of these recommendation engines offered a conversational style of quizzing the user on their needs, which I hoped to include in some aspect of my interface.

My landscape analysis of these five recommendation engines led me to identify some key insights and opportunities for how to approach my features:

Insights & Opportunities

Care/Of, Lemonade, and Beardbrand's recommendations all offer a quiz that directs users toward particular products based on multiple choice answers. Lemonade's is the most conversational and personable of these, creating the illusion that the user is having a conversation with a representative from the company. Care/Of's quiz is in my opinion the most visually stunning of these three.

I feel that there is an opportunity for the Sonos recommendation engine to offer much more functionality than it currently does, but it is very visually engaging.

The Google Store offered an option that I decided to integrate into my feature addition; namely the list of activities that a user could do with a particular combination of Google products. I decided, however, that I would instead prefer to try to implement this functionality in the form of a quiz. This quiz would filter products, and would thereby help keep the user from being overwhelmed by the sheer number of choices.

Most of these recommendation engines and quizzes could benefit from the option to chat with a sales representative from the company, which might turn more of the recommendation user flows into sales.

Interviews

I put out a request on social media for users of Apple products who would be open to me interviewing them to better understand how people prefer to research and buy their Apples products.

My test consisted of 4 male participants between the ages of 30 and 65, who are users of Apple products. I talked with each person separately on the phone, asking them a series of questions about their digital hardware research and purchase experiences.

Overall Patterns Between Participants

All my interview participants told me that they utilize online review aggregators to research products. While they generally don’t trust information from manufacturers, these people indicated that they do trust information from Apple. They likewise find Apple’s comparison feature effective, and would like to see more features like that from Apple. All of my participants told me that they had never used a product recommendation engine before, but would be open to using one.

Most of these participants value talking with a live representative from Apple over other means of gathering information. Two of the participants use music software applications on their Apple computers, which require particular hardware compatibility. These users therefore have a more difficult time than the average user ensuring product compatibility before buying.

These findings indicated to me that there was an excellent opportunity for Apple to turn more internet browsing into sales by create a product recommendation engine on the Apple website, as many users trust Apple, but many feel the need to do specific product research before buying.

In particular, the users who had specific computer requirements led me to alter my recommendation engine to include a component that would help users figure out what particular hardware they required for the activities they were planning to use the products for.

2. Information Architecture

Site Map

This following site map show my proposed feature, as it fits in with the current Apple website's hierarchy and organization, with the new features highlighted in blue.

I concluded through my research that I would divide my product recommendation engine into three distinct services; a filterable list of Apple products, product comparison charts, and a product recommendation quiz, all of which would lead users to the store section of the Apple website.

3. Interaction Design

Wireframes

In organizing my features beyond my initial site map, I hit upon the idea for two distinct pages that would encapsulate the different product recommendation engines I hoped to design. I gave the pages the names "Apple Pick" and "Apple Configure", with the aim of match the branding style of Apple products.

The first page below is the wireframe of the homepage for both features. I tried to generally reflect the Apple aesthetic of minimal typography, copy, and large visual elements set off by generous amounts of white space.

The next two pages below represents the beginning of a user flow for the Apple Configure feature, which leads the user in a multiple-choice flow to identify what Apple product they would like to configure, then allowing the user to choose what product or service they would like to configure their product with.

The first of the three screens below allow the user to choose from a dropdown the particular MacBook Pro they own. From there, the multiple-choice flow on the second screen allows the user to choose whether they would like to configure this product with another Apple product, a Bluetooth product, the Internet, or a wireless internet hardware product.

The third screen presumes (for the sake of the prototype task flow) that this user wanted to configure their MacBook Pro with another Apple product.

The following three screens assume a flow in which the user configures the MacBook Pro with Apple AirPods Pro. The second screen represents a list of topics tailored to the interactions of the two specific products chosen in the flow. These emboldened headers can be clicked to expand the topics for detailed info, and the third screen shows this expanded view.

The next screens show different information tabs for the "Apple Pick" page, which can be accessed from the "Pick & Configure" home page (the first wireframe screen in the series).

While I initially planned this page to include tabs that would allow the user to jump between three different methods of choosing Apple products; "Filter", "Search and Compare", and "Quiz", I later moved away from this arrangement in my UI, as it was pointed out to me that Apple doesn't use tabs in their website UI.

The first screen's "Filter" function allows the user to select a combination of five different filter choices to choose the product that fits their needs.

The second screen's "Search and Compare" function is an extension of the comparison view that currently exists on the Apple website. It allows users to search for a particular product class and compare the features of two other products.

The third screen is the home page for the "Quiz" feature. The user flow for the quiz continues on the next set of screens.

The first two screens show an interactive list of choices to help narrow down what Apple product would best fit the user's needs. The second screen shows what the buttons look like when selected. The third screens in the flows notes to the user that specific hardware functionality may be required, and that the quiz will now shift to questions relating to these particular activities.

These three screens detail another round of choices for the user, in which Apple Pick provides a detailed list of options of popular audio recording software. The third screen asks the user to choose which current version of two programs they will use.

The next three screens clarify which music composition software the user plans on using.

The second of these screens below lists the quiz's Apple computer recommendation, based on the hardware requirements of the software chosen in the quiz. I feel that this feature, of all the others I proposed, would be of great value to the user. The quiz would likewise benefit Apple, as it would keep the buyer on the Apple website during product research, and could lead to more immediate sales.

4. UI Design

UI Design

In translating my wireframes into pages that seem to fit in seamlessly with the UI of Apple's website, I began by recreating the navigation bar and footers as closely as possible to the current Apple website. I took computer screenshots of these parts of the website, being sure that my browser fit the full viewport, then used Apple's SF fonts to carefully reconstruct the navigation bar and footer in Figma. I also added "Pick & Configure" to the footer navigation wherever it seemed applicable.

The most difficult task of the UI was finding usable product photos and Apple icons that matched the Apple website. Some icons were available as part of the SF fonts, but many that are used on Apple.com are not. I did a great deal of taking screenshots of product photos and icons from Apple.com, and then editing these photos carefully in Figma so that could be integrated into my UI. Otherwise, I recreated parts of Apple's website UI, such as buttons, dropdowns, and progress bars fully in Figma.

In general, I found that I had a good deal of typography hierarchy to rework from wireframes to prototype, as well as making room for large hero images that would feel more consistent with Apple's brand.

The second and third screens below reflect when an icon has been selected for the configure user flow.

Translating the "Apple Pick" wireframes to the prototype presented the same challenges as the previous screens, along with my insistence that I fully replicate Apple's comparison modules (see second screen below) in my own handmade UI, instead of simply using a screenshot from the Apple website.

5. Iteration

High-Fidelity Prototype

View Prototype

Next Steps

1. Usability Testing

While I ran out of time to do a usability test of the final prototype, I feel that this would be a crucial addition to the project in order to identify possible further possible adjustments and improvements.

2. Extra Features

I feel that there are unexplored opportunities to integrate chatting with company representatives into the Apple Pick and Configure features.

3. Improved Prototype

I will add the aforementioned company representative chat feature to my current high-fidelity prototype.

4. Testing

I will pursue more usability testing on the updated and enhanced features of the prototype.

...

Latest Work

Back to Top