Homepage Redesign
Project Goal
-
To provide the most useful information to customers in a scannable manner on SmartSource homepage
-
To match the mental model of customers to create an intuitive homepage experience
What is SmartSource?
-
SmartSource is one of the products in the brand portfolio of a pharmaceutical wholesaler named AmerisourceBergen.
-
SmartSource is a B2B platform that pharmacies use to buy medicines for the best price point.
Current SmartSource Homepage
​
-
Quick links to various product categories
-
New product announcements
-
Promotional banners and offers
-
Messaging center
-
Access to global functions such as search, cart, my account, sign out
Elements​
Target Users
User group
Gen X and Baby Boomers
User roles and key needs
-
Key roles are owners, pharmacists, and technicians. Owners value and manage rebate compliance, while pharmacists and technicians look for the lowest pricing and add products to the cart throughout the day. The owner or managing pharmacist reviews the cart prior to submitting it at the end of the day.
-
Key needs include the lowest price, stock availability, and ease of searching for the desired product
Purchasing behaviour
-
Know exactly what products they are searching for that is bought by customers or missing from their shelves
-
Most interested in usage history, product alternatives, inventory level, and cheapest acquisition cost when searching the PLP
-
Will price compare products frequently with their primary and multiple secondary sources for the cheapest price
1. Research
Primary Quantitative Research
Page
Homepage
Users
8,179
Duration
1 Month
Tools
Most Clicked elements
Engagement Heatmap Analysis
An engagement heatmap depicts the usage of various components on a page.
In the image below, we can see highlighted areas in blue or pink that Fullstory has marked as most clicked components.
1
2
3
* Percentage calculated out of top 10 most used features
Least Clicked elements
1
2
3
4
* Percentage captured by the Google Analytics
Engagement Heatmap Conclusion
-
The top 3 most clicked features (Search, Cart selector & Account selector) are all in the header of the page, making header the most active area of the page.
-
Search with 60% clicks is the most clicked feature on the homepage, followed by Cart dropdown (15%) and Account selector (8%)
-
-
The least clicked features, sorted on basis of utilizing screen real estate consists of:
-
Announcements (0.00% clicks) – Consumes approx. 70% of vertical screen real estate
-
Message Center (0.01% clicks) – Consumes approx. 20% of vertical screen real estate
-
Promo Banner (0.05% clicks) – Consumes approx. 15% of vertical screen real estate
-
Quick Links (0.08% clicks) – Consumes approx. 25% of vertical screen real estate
-
Opportunities
-
Make search more prominent and customer friendly.
-
Understand why customers aren’t clicking on the announcements and message center.
-
Validate the content being shown on the page to make sure that the customers are getting an intended value out of it.
-
Understand the hierarchy of content and show the relevant content to meet customer expectations
Dead-clicks Analysis
Dead Clicks are clicks that have no effect on the page.
The page below depicts the components that users clicked on, but nothing happened upon the click.
1
2
3
4
Dead-click map Conclusion
-
Space between Support Services and Search in the Header is the most Dead clicked item garnering 58% of total dead click. More research required to understand the Why?
-
Username is the second most dead clicked item. 16% users clicked on the username in the utility bar. It might be that as per their mental model username should reveal more options or navigate them to their profile page (widely used in ecommerce websites)
-
Big blue banner occupies (20% of real estate) and is the third most dead clicked item. This banner displays coupons/offer and is not clickable. However, users clicked prompting us to think that they expect to see more information around the coupons / offers
Opportunities
-
Understanding why the users are clicking on these elements
-
Avoid dead clicks by:
-
Making the static elements interactive in order to match with user’s mental model and Removing the affordance of a click on the dead click items, where applicable
-
Utilizing UX best practices in the new designs
-
A/B testing for new homepage prototype to understand customer preference
-
Making cart and account selector in the header feel more click intuitive
-
Scroll map Analysis
* Top 5 most used screen resolutions
Scroll maps depict the area of page visible to the user above and below the page fold. The scroll map varies based upon the screen resolution.
The purpose of the scroll map is to assess whether any important information is less accessible to the user, by being lost under the page fold.
Resolution 1600 X 900 (2nd most common)
Total page views: 7,140
87% of the users viewed at least the first fold of the page
27% of the users scrolled all the way through the end of the page
Resolution 1440 X 900 (4th most common)
Total page views: 3,270
73% of the users viewed at least the first fold of the page
9% of the users scrolled all the way through the end of the page
Scroll map Conclusion
-
A lot of the users did not scroll past the first fold. Some possible explanations:
-
lack of interest for looking at information present in the second/third fold of the page
-
Locating the intended information in the first fold itself
-
-
Out of the 5 most used screen resolutions, 2 resolution sizes (1600 x 900 and 1440 x 900) - which account for 10,410 of the total views, do not present all the important components such as quick links and message center to the users above the fold.
Opportunities
-
There is an opportunity to better organize the content of the page utilizing the horizontal page space, instead of taking up the vertical page space that puts important content below the fold.

-
A lot of the space is currently lost with the 2 informational banners (the pharmacy name and the promo banner) and the 4 bulky quick links. We can re-utilize that space in a more valuable way for the customers.
2. Competitor Analysis
Direct (B2B) Competitor Homepage
Anda
​USPs
-
Prominent search bar
-
Quick links that navigate the user to catalog and display filtered product catalog
-
Presence of Lists and Favorites
-
Prominent display of Timer for next day delivery
-
Eminent call to action for ordering
-
Open vertical (side) menu
-
A subtle way to access offers and deals of the day
-
Upload Order feature
Indirect (B2C) Competitor Homepage
CVS Pharmacy
​USPs
-
Intuitive organization of content
-
Promotional messages not taking the real-estate above the fold
Rite Aid Pharmacy
​USPs
-
Distinction in the size of elements to indicate hierarchy of information
-
Recommended product section
3. Benchmarking
eCommerce Experience Best Practices
Key Components of a Pre-purchase Experience
-
Search bar – Offers ease of finding the information needed
-
Call-to-action buttons – A clear call-to-action helps in displaying the users their viable options on a page
-
Product copy and images – A high resolution image and an appropriate copy influences the user’s decision of buying a product
-
Progress indicators – Informs the user of how close they are to achieving their goal
-
Breadcrumbs – Gives the users a way back or out of a page
-
Live chat – Expedites the process of getting help, when the users need assistance
-
Sales and specials section – A consistent section that the users can go to in order to get deals suitable to them
Amazon
Walmart
Key Components of a Post-purchase Experience
-
Shipment tracker – Provides transparency regarding the order status
-
Ordering history – Gives the users an ability to review their previous orders and quickly repeat them as needed.
-
Customer service – Both online and offline customer service is important in providing customers with the help they need. This in turn helps build user trust.
-
Return and refund service – Gives the users a way to return the products if they wish to and get a refund for the same.
-
Customer feedback – Helps improve the customer experience and gives the customers a sense of being valued.
Amazon
Walmart
4. Proposed Solution
Design​ an operational dashboard with a prominent search, which will enable the users to quickly place orders and view a snippet of their post-purchase information at a glance.
5. Wireframing
6. Scoping
-
User Info
-
My Accounts
-
Search
-
Notifications
-
Recent invoices
-
Order Status
-
Order Exceptions
-
New Promotions
-
Important Announcements/ notifications
-
Account info
-
Recent Orders
-
Help / Support
Customer Priorities
Business Priorities
Mutual Priorities
New ideas
-
Products back in stock
-
Frequently Ordered Products
-
Product Quick add
7. Visual Design
Advantages of the redesign
-
Ordering focused homepage experience
-
A Utility-based dashboard to get a quick overview of information
-
A quick and easy way to repeat orders
-
Upfront order tracking
-
Clean interface with transactional functionality
8. Impact
Increased customer engagement by 3.8% within 30 days.
Next steps: Continue to monitor customer engagement and highlight the widgets that customers use more more often