The evolution of a product card
Problem statement
I'm looking to buy a new phone or SIM deal. When browsing deals I want to have a snap shot of the product or deal, to inform my decision, before clicking through for more details.
Why?
- Product cards are used in various areas across all digital platforms
- They allow users to quickly find and compare deals side by side before clicking through for more information
- Product cards have been adapted over time with new propositions and functionality leading to a confusing and disjointed layout
- We want to understand what information users find beneficial
- How can elements be brought together to create a dynamic and cohesive component?
How may we make product cards more visually appealing and adaptable depending on the different facets we wish to show for each product?
Adaptable - Product cards should be able to show as much or as little information as required whilst still being meaningful and visually cohesive
Information hierarchy - Elements should be ranked in level of importance. More emphasis needs to be placed on the most important information
Offloading tasks - Looking for alternative in the design to anything that requires the user read text, remember information, or make a decision whenever is possible.
Competitor analysis
Goal
Compare the product cards of competitors / alternative industries.
Key competitors
Google, Apple, Sky Mobile and Currys are direct competitors of Tesco Mobile, as they all offer mobile device products for sale, albeit some without the option for usage contracts. I also reviewed Tesco to ensure we were aligned to the main brand.
Insight from previous usability tests
- 10 users testing a Clubcard Prices experience
- 20 users testing a pre-order/back-order experience
- All users were exposed to the product cards and asked to give their thoughts.
- Clubcard Prices strip is clear and understandable by all users
- Delivery message is helpful and delayed delivery dates for pre-order and back-order are understandable
- Users questioned how long the contract would be for. Consider adding the contract term
- Several user questioned what they should do next / hesitated before clicking the entire product card. Consider adding a CTA button/s
- Users appreciated the colour swatches and understood that a strikethrough meant a certain colour was out of stock. User tried to click colour swatches to change colour of product.
Key opportunities
- Apply consistent alignment / spacing across elements
- Consider making colour swatch clickable
- Addition of simple CTA to product card could aid navigation
- More information on monthly payment / plan could be helpful
Building a product card
What information can we present to users?
Product name
Price
Image
Colour availability
Contract length
Labelling / highlights
Clubcard Price
Offers / promotions
Delivery information
Primary and secondary actions
Product name and price can be deemed the most important elements of the product card. Without these items the product card does not serve its purpose.
Evolving the product card
We now start to assemble our product card, beginning with the most essential information.
Adapting the product card for different products
Usability testing
Background
The goal of the usability test was to determine if the proposed product card design could be understood by users and to understand if any expectations had not been met.
10 participants age between 25 - 70 years old
Participants were asked to complete 2 tasks on a product listing page
All users were using a mobile device
Findings
- When asked to give initial thoughts on the page all users scrolled the page and read out each product name, price and Clubcard Price (if applicable). All other information was secondary to this.
- 'New' label identified
- Colour swatches understood
- Clubcard Price clear
- Promotion strip clear
- Delivery message received a positive reaction
- 2 participants were hesitant to click 'Buy' as they want to see what the other options were
- 1 participant suggested making the AirPods promotion message more prominent
- 2 participants suggested showing the data allowance included with the from price
- 2 participants expected to be able to click each colour swatch option to change the product visual
Key insights
- All users were able to identify and understand the elements of each product card
- Product name and prices were identified first by all users as they scrolled the page
- 'Buy' CTA could be too strong at this point in the journey - consider alternative copy
- Clarity around what is included for the price still needed. Consider creating a variant - showing the EPP data allowance on the product card
- Investigate presentation of promotions
