Apple
Improving usability of Apple website Web Design
Project Overview:
-
This is an academic project executed under the guidance of professor Yves Rannou at Humber college.
-
Apple has a good idea of the content that should be on the website but could use some help to improve functionality and features that would make the experience more fluid for the user.
-
Currently, the website has many roadblocks that prevent the user from having a complete shopping experience.
-
This case study would like to address these issues to provide an improved experience for returning users while encouraging new customers to become Apple Users.
My Contributions:
-
An inspection conducted on the website using Jakob’s 10 Usability Heuristics to reveal where and how the product’s interface violates those heuristics.
-
Prepared a plan for the Usability testing that consisted of screeners to recruit participants, a moderator script, and a list of test scenarios.
-
Determined the participant’s satisfaction and their pain points by observing them while they were using the Apple website in a real life scenario.
-
Analysed all of the data to judge the most critical usability issues that needed to be repaired in the Apple website.
Timeline:
-
Sep - Dec, 2021
Tools & Methods:
-
Figma, Miro
-
Heuristic Evaluation
-
Card Sorting
-
IA Site Mapping
-
IA Site Navigation
-
Usability Testing
Credits:
-
Vijay Kumar
-
Arshdeep
-
Kevin
-
Yorlady
Heuristic Evaluation:
Evaluated user tasks using the Jakob’s 10 usability heuristics, noting any violations.
​Data Analysis:
Analysed all of the data from heuristic evaluation to judge the most critical usability issues that needed to be repaired throughout the Apple website, as well as to inform all future decisions.
Card Sorting:
8 volunteers sorted a list of cards reflecting site features, user and business needs, and goals.
​
IA Site Mapping & Navigation:
Mapped the IA and created categories for main navigation, level two and tertiary navigation.
Screener & Moderator Script:
Screener was used to select users and Script that would help guide the Usability testing process.
​
Usability Testing:
Uncovered usability problems that users have with using the Apple website.
Heuristic Evaluation:
Before conducting the Heuristic Evaluation,
-
Identified a list of potential Apple website visitors (Loyal customer, prospect customer, Never purchased).
-
Created a list of goals for each user.
-
Went through the tasks for each goal and evaluated each using the Jakob’s 10 usability heuristics, noting any violations throughout the experience.
-
Lastly, analysed all of the data to judge the most critical usability issues that needed to be repaired throughout the Apple website, as well as inform all future decisions.
Here are the high-level issues found regarding the Apple website through the Heuristic Evaluation:​
 |  |  |
|---|---|---|
 |  |
Define...................................................................................................
​Data Analysis:
Analysed all of the data from heuristic evaluation to judge the most critical usability issues that needed to be repaired throughout the Apple website, as well as to inform all future decisions.
Heuristic Evaluation Analysis:
User Goal 1:
New user wants to subscribe to Apple’s streaming services in an all-in-one order from the website (tv, music, fitness, books, news, podcasts, arcade).
User Steps:
1. Click on “TV” tab.
2. Scroll down; click on Apple one “Try it free” or “learn more”.
3. Read details and click to purchase.
4. Get a help diagnostic that tells you where you can purchase the service.
List of Issues found:
Major-
-
Unable to buy services or products unless you are on the Apple hardware, should be able to buy the service on your account and use the service on the hardware when logging into that account. - User Control and Freedom.
-
Unable to subscribe using Windows laptop - User Control and Freedom.
-
No steps or buttons to inform prospective customers how to access streaming services. The specific products that would allow them to use the streaming services) - Help and Documentation.
Major Issue #2
Major Issue #3
Medium-
-
There is no subscribe icon/Apple “One” button at the top of the home page. It’s at the bottom - Consistency and Standards.
-
Apple “One” at the bottom of the website is unclear, hard to understand - Match between System and Real World.
-
The site does not detect users' pin code automatically. Users have to open a new tab to check for their pincode - Flexibility and Efficiency of Use.
-
Users cannot find the home button while they are navigating through the Apple TV page - User control and Freedom.
-
The naming of categories “Watch” and “TV” next to each other, it is hard to tell what the difference is, and “Watch” is the title for “Apple Watches” - Match between system and real world.
-
“One” streaming services package is displayed in the “Apple Tv” tab, hard to find, not accessible Error message saying the card is not accepted and does not inform customer while adding the card - Error prevention.
Medium Issue #4
Medium Issue #5
Low-
-
To subscribe, users need to verify both email and their mobile phone. They have to follow extra steps, which is inefficient. - Flexibility and Efficiency of Use.
-
There are two interfaces to the “create an account” process - one while subscribing to Apple “One” and the other while creating an account as a new user - Consistency and Standards
-
Apple streaming bundle product has a name that does not necessarily connect with the product Apple “One” - Match between System and Real World.
-
No return button on “Try it Free” or redirection, the user is stuck on this page - User Control and Freedom.
-
The “TV” label can be a bit deceiving in what it means; because it is a streaming service, but also it could mean a TV box. - Match between System and the Real World.
Define.....................................................................................
Affinity Mapping:
Analyzed the rich data obtained from user interviews and then synthesized it.
User Persona & Journey Map:
Developed User Persona and Journey Map to draw final task flows and wireframes.
User Goal 2:
Prospect user is looking to purchase the newest apple product and compare it with available older products.
User Steps:
1. Click watches (product) in navigation.
2. Select a product or “learn more”.
3. Read details and scroll down to “Compare (product) models”purchase.
4. Compare products diagnostic that tells you where you can purchase the service.
User Steps continued:
5. Select the model.
6. Customization: Select desired finishes, and capacity.
7. Review the “Bag”.
8. Check out.
User Steps continued:
9. Sign in or continue as a guest to view.
10. Provide shipping details or pick up location.
11. Proceed to payment and finalize.
List of Issues found:
Major-
-
Unable to see if a product is in stock. One must go to purchase and fill out the information fields before seeing status - Error Prevention.
-
Product comparison pages have bad purchase flow, cannot purchase a product while scrolling and looking at the functions - User Control and Freedom.
-
To check size, you need to print out the size band and physically check your wrist size to select the size of the watch. Cannot filter by size - Consistency and Standards.
Major Issue #1
Medium-
-
Although it has a way to compare different Apple watches, it does not give the option to compare it with the customer’s choice of product - Flexibility and Efficiency of Use.
-
When clicking on the newest product “Series 7 Apple Watch” it does not provide option to buy or pre-order it - Visibility of System Status.
-
The comparison feature is placed at the bottom of the page, the user has to scroll down to access this. The models shown are preset, but if the user would like to view another older model they would have to select “Compare all iPhone models” where they are redirected to another page. - User Control and Freedom, Flexibility and Efficiency of Use.
-
Wrong pin code detected while processing order.
-
Users do not have the freedom to choose a delivery date - Flexibility and Efficiency of Use.
-
Users cannot filter the products according to the price (ascending or descending order) - Flexibility and Efficiency of Use.
-
No “Compare other models” button at the top of the product page for easy access.
Medium Issue #4
Medium Issue #6
Low-
-
In the “Compare iPhone models”, the drop-down comparison feature only displays three models. This limits how many models users can compare that would otherwise help them with their purchasing decision - User Control and Freedom.
-
“Checking which case is right for me” should be before/within the “create my own style” step. There is a problem with the flow of steps here.
-
The colour filter and the products do not sync with each other. If you select a black watch, you see a multi-coloured watch - Match between System and Real World.
-
A button to select “Deliver/Pickup” is repeated twice, redundant - Aesthetic and Minimalist Design.
-
Hard to notice icons with little differences to tell apart (Example: the watch icons) - Aesthetic and Minimalist Design.
-
When comparing products, the functions and selling points are sized too large and consume a lot of space to effectively compare products - Aesthetic and Minimalist Design.
Low Issue #1
Low Issue #3
User Goal 3:
Existing and prospective users need to set up an account so that they can manage passwords and other important account details.
User Steps:
1. Clicking the “Shopping Bag” icon.
2. Selecting either “Account” or “Sign in”.
3. Create account and fill in registration fields.
4. Fill in Apple ID and password.
5. Browse through sections and edit fields as needed.
List of Issues found:
Major-
-
No sign-in or create an account button in level 1 or anywhere at the top of the website. The user has to search through the tabs to discover that the shopping bag button includes “Sign in” and “Account” - Match between System and the Real World.
Major Issue #1
Medium-
-
The “Manage your Apple ID” can be confusing for a first-time user who might not have an account yet.- Match the System and the Real World.
-
The “Account” button directs the customer to “Sign in to Apple Store”, which does not help the customer to distinguish between “Sign in” and “Account” as they both request Apple ID - Match between system and the real world.
-
Some pages are overfilled with information or pictures - Aesthetic and Minimalist Design.
Medium Issue #3
Low-​
-
​​The account button is at the footer navigation which makes it harder to find. - Flexibility and Efficiency of Use.
-
The dashboard/order of sections is not prioritized to provide the customer with the crucial information about their “Account Settings” at the top but at the very bottom of the page, which makes the website inefficient to use - Flexibility and Efficiency of Use.
-
The “Sign out” button is too small, not as visible - Aesthetic and Minimalist Design.
-
My email was rejected twice (One time it said the email already exists and the other time it said this email is not valid, technical issue).
Low Issue #4
Ideate...................................................................................................
Card Sorting:
8 volunteers sorted a list of cards reflecting site features, user and business needs, and goals.
IA Site Mapping & Navigation:
Mapped the IA and created categories for main navigation, level two and tertiary navigation.
Card Sorting:
-
Created a list of cards reflecting site features, user and business needs, and goals based on the heuristic evaluation.
-
Gathered 8 volunteers to sort the list of cards.
-
Lastly, analysed all of the data to judge how potential users view and group information.
Rationale of how 50 cards were picked up:
-
In order to pick the 50 cards needed for card sorting exercise, the knowledge gained from looking at the site through the heuristic examination was used to see what features Apple has and what they are trying to push onto the consumer; their business needs and goals and how they relate that to the features they currently have and would need to achieve those goals.
-
Then looked at the target audiences who would use the Apple website and decided on some generic user archetypes and the goals those users would have.
-
Next, related those goals to different features that the user would need to achieve those goals and to the business goals Apple has.
-
Started to see patterns of features needed from this and made those into cards. This gave the first set of cards.
-
The next set of cards came from looking at what Apple is currently pushing as their main business goals and made those into another set of goals since those have been identified as important needs from Apple as our client.
-
Looked at what Apple could improve on and feature they could add to their website for the last set of cards to make it a smoother experience for the User.
-
This was done by using the heuristic reports written as guidance for pain points and problem areas.
Brainstorming Cards:
Final 50 Cards Picked Up For Card Sorting:
Challenges Experienced While Performing The Card Sorting:
-
Running the card sorting with actual users truly helped to see their interpretations, method of organizing, and the need to create better titles that explain the concept of the card better since the user does not have the same context as us designers.
-
Some of the challenges experienced while performing the individual card sorting were not being able to clarify what a card meant.
-
As it is an open card sorting, the individuals have the freedom to organize as they see fit. It was realized that the labels of cards could be improved to make it easier for users to understand the purpose of those respective tabs.
-
Noticed that users had issues with cards that are more generic or that were seen as titles to features, for the user they saw many of these cards are vague concepts that they could not relate to Apple.
-
Another issue was some users had identified some cards as redundant and already in the list of cards just repeated over so those cards were relabeled to help distinguish those features from one another.
IA Site Mapping:
-
Analysed the card sorting and broken down sorting into categories reflecting consumer and business needs.
-
Mapped the sites architecture and page structure.
-
Lastly, the analysed all of the data to judge how users would expect the websites structure to be.
Brainstorming Common Placements:
Final Recommended Grouping:
IA Navigation:
-
Made some changes based on the Site Mapping, to improve and provide an optimal experience, which would help users achieve their goals on Apple’s website as well as Apple's business needs.
-
To start off, the “Store” section was decided to rename as “Products”, as it will help both prospective and existing customers easily recognize what the section offers using a clear and simple label.
-
Chose to display this as the first section located in the primary navigation as this is a prominent section that contains all of Apple’s products.
-
​Maintained the “Services” and “Support” sections within Level 1 of the primary navigation and have placed them on the far right so that customers can easily recognize, and access them.
-
“Shopping Cart” and “Account” sections were illustrated using icons and placed in the utility navigation on the top right. This will provide customers with a familiar interface as any other e-commerce website so that they can easily shop and view any particular information, and thus, help them achieve their goal and Apple achieve their business goal.
-
Furthermore, incorporated a search bar that is a part of the utility navigation. This will provide customers the freedom to explore any product, issue, or topic during any stage of their shopping experience.
-
Finally, for the tertiary navigation, some of the same sections were displayed from the primary navigation such as, “Products”, “Services”, and “Support”, but we have also included “Customer Service” and “About Us” from previous Site Mapping to emphasize and provide customers alternate ways to access content pertaining to their goals.
-
Moreover, added “Follow Us” to be a part of the tertiary navigation because this will allow customers to connect with Apple on popular social media platforms to be well-informed about the latest products, and hence, allow Apple to reach more customers, increase brand awareness, and increase their revenue.
1. The labels on the top navigation (the primary navigation) when clicked opens into a horizontal drop-down menu. For example - When users click on the “Products” label, It shows a drop-down menu of all the product categories that Apple offers to their customers.
​
2. Users can know where they are currently navigating on the website by following the bread crumbs.
3. When users click on any of these product categories, they can view different versions of that product. They also can select any one of the options from Product Features, Product Add-ons, and Product Comparisons.
4. As Users click on on “Product Features” it will display the different types of features that the specific Mac has with the option to add to the cart.
5. The “Product Add-Ons” displays three different options of add-ons that can be added to the product, by showcasing the drop-down menus from each category.
6. The “Product comparisons” takes users to a comparison page where they can compare similar products.
7. Once click on “Product Features” it will display the different types of features that the specific Mac has with the option to added to the cart.
8. Users are able to add the product to the cart.
9. For the comparison page it shows the product that has been selected with the option to compare it to similar products. The “Tick mark” represents the items selected.
10. The “Product Add-Ons” displays tree different options of add-ons that can be added to the product,by showcasing the drop down menus from each category.
11. Once clicked either of the categories, it has a dropdown menu that will display a more filtered options of what they can add-on to the product.
Usability Testing:
-
Usability testing for Apple’s website was conducted remotely from October 21st to October 28th, 2021.
-
Due to the pandemic conditions, usability testings were conducted remotely to observe and uncover the common behaviours, pain points, and arising issues that impacted users from successfully fulfilling the three tasks.
-
Developed a plan that consists of a screener to recruit suitable participants, a moderator script that helps to run the test in a logical sequence, and a list of test scenarios for users to perform during the test.
-
A total of seven participants were recruited in Canada for the qualitative style user testing, with some participants from Humber College and others from outside the institution.
-
Once participants have been recruited, consent forms were sent out to the individuals to obtain their permission for recording the test sessions using audio and/or video.
Screener:
-
Identified a list of target audiences we would like to see test the website. (Loyal customer, prospect customer, Never purchased an Apple product).
-
Created a list of questions to filter the audience for quality testing.
-
Sent a screener out to shortlist users that qualify for the testing.
Moderator Script:
-
Created a script that would help guide the Usability testing process as well as share all critical information and goals of the test with the users.
Test Scenarios:
-
Reviewed all information.
-
Identified task scenarios for the user to perform during the test and identity issues with the site.
Usability Test Tasks:
Purchase an iPhone.
Subscribe to an Apple streaming service.
Get a refund.
1 2 3
Key Insights from Usability Testing:
1 2 3
Success Rate- 90%
Failure Rate- 10%
Success Rate- 5%
Failure Rate- 95%
Success Rate- 20%
Failure Rate- 80%
-
Many of the users were confused on what is included with the product they have purchased and could not find this information on the page.
-
Products do not state if they are available for purchase till the last steps of check out.
-
The “Buy” button is too small compared with the overall website, making it hard to see. This takes the priority away from the “Buy” button. One user completely missed the buy option and bounced from the page.
-
Some features are available from some pages where you wouldn’t expect them to be, but from the pages you expect them to be they have needless roadblocks.
-
Many users had a difficult time to return to Apple’s homepage after trying to subscribe to Apple Music. User constantly had to use the browser’s return button or use the website address bar to go back.
-
Users are unsure how to find information on eligible devices in order to claim offers for Apple streaming services. An example being you can get free three month Apple TV with the purchase of eligible items.
-
Users cannot buy the services from the computer and are forced to purchase from the hardware. User was confused about what devices supported the service. Example what devices can you use Apple fitness on.
-
One of the users tried to get the Apple Fitness+ service, but when it came down to try it, it showed that there were some requirements like owning an older version of an iPhone or Apple Watch.
-
Some users found it difficult to understand Apple’s naming convention for products and were confused on what they are looking for. (Heuristic #2: Match between system and the real world).
-
Users could not find the refund section and bounced between many of the sites pages and navigation bars before eventually finding the option. Some users tried to input “Return” using the search bar located in the “Support” tab.
-
Many users would prefer calling customer service to get a refund because they couldn’t find “Refunds” or relevant information on the “Support” page. They thought calling customer service would be faster to get the information they needed.
