customer stories redesign
TRANSCRIPT
Salesforce 2016 Customer Stories Redesign
Fanya Young UX Researcher Digital Experience [email protected]
February 2016
Investigate the initial, early user experience (UX) of three Customer Stories webpage designs (Sean, Bruce, David)
Evaluate several interactive features used to highlight additional information is available
Encourage comments and high-quality feedback from panelists regarding the webpages
Provide interpretation of results and recommendations to optimize UX and overall webpage performance
Objectives
Research ScopeCustomer/Prospects Sales Team
Study
Participants
Test
Scope
12/29/2015 – 01/06/2016
10 Customers & 13 Prospects
Eye Tracking
Interpretations & Recommendations
12/04/2015 – 12/10/2015
23 AE’s & 2 BDR’s
Survey Questions
Interpretations & Recommendations
Study
Participants
Test
Scope
Landing Page
What They Saw
Prospects & CustomersEye Tracking
Findings
• Hero and circular graphics tested well
• Filter Tool was resoundingly popular
• Hover State (Room & Board card) received mixed reviews
Landing_All_60s-
Recommendations• Implement the Hero Module and use the Circular
Graphics Module
• Increase content for Hover State to create nurture engagement in an organic fashion
Hover&state&off&
Hover&state&on&
Prospect/Customer Feedback
“There’s a lot of white space on the hover state and it
doesn’t seemed to be aligned. ”
“Seems like you could add a few more details in the hover state. A
lot of white space.”
“. . . I like seeing that the name of the company . . . It made me
want to hover over other articles”
“I’d like the 3 dots to be consistent and have a hover or click for more
information”
“Very clean, I like how the text was short and to
the point.”
“ . . . I wish it was just right away see the story. I kind of thought that the text would
be clickable . . . “
Landing_All_60s-
Sales Team Feedback“I love that actual ROI numbers are
provided immediately . . . This is the #1 thing I spend time trying to quantify for
customers.”
“There’s a lot of white space on the hover state . . .”
“A lot going on, applies to the mass audience with different topics . . .”
“The hover is effective because it instantly provides the customer with a compelling statistic of how the customer increased their order size by 60%.”
Details Page
What They Saw
Prospects & CustomersEye Tracking
Findings
• Hero and title resonated with naïve visitors
• “Read More” confirms our placement of the blue banner
Sean_All_110s+
Recommendations• Implement the Hero and title
• The narrative is disrupted by “Keep Exploring,” an unrelated segment
• Consider repositioning Room & Board’s most compelling artifact, its metrics and results, with the rest of the copy
Prospect/Customer Feedback
“ Nothing really stands out. I see a little detail about the company. It might be good for a personal
connection. I don’t like the big picture at the top.”
“Yes, absolutely. It has the company’s background, a video
with the client, and describes how they used Salesforce.”
“. . . Gives me more details and explains what Salesforce has done for them. The 2900% sticks out. The 40% keeps
drawing me in. I like the layout; it is easy to read . . .”
“Simple enough, it gave me enough information. I would have clicked on Read More. So yeah, I think it is good.”
Sean_All_110s+
Sales Team Feedback
“It is beautiful and robust but also a bit distracting, there are a lot of elements that draw your eye away from whatever you’re
trying to focus on.”
“I didn’t know it was there. So… maybe make that more
apparent. I definitely like it because it hides some of the
text on the page”
“I don’t like it. It’s bad. I really don’t care for it. I wish it was just right away see the
story. I kind of thought that the text would be clickable”
“I like the average metrics at the bottom to get them excited about
what that would mean for their business.”
“I like the average metrics at the bottom to get them excited about
what that would mean for their business.”
Module 1
What They Saw
Prospects & Customers
Findings
• Module tested well with 7/9 panelists noticing the interaction
• Interactive icon (e.g. a bouncing “+” sign) received mixed reviews
Recommendations• Implement the design
• Bouncing icon design polarizes visitors, distracts them from the content
• Consider using an interaction that provides a subtle visual cue (e.g. an animated color change) rather than a bouncing effect
Prospect/Customer Feedback
“Really good detailed description. Everything is step by step with pictures. I like how there isn’t a lot of text.
Makes it easy.”
“I thought it was good. Flowed through the process like Salesforce wanted you to. It was good.”
“I like that it makes me ask questions. I would probably click on the demo.”
“I don’t like the dancing button— it made no sense.”
“The little bouncy part is annoying.”
Sales Team Feedback“I feel like the ’show me’ area needs to be more prominent to customers click to expand it.”
“Is there a way to maybe not go down such a rabbit hole? Customers feel like they can get lost on our website…"
“A lot more interactive and easy to follow Breaks down the use case, products and stats . . .”
“Customers like to know those highlighted pieces of how other companies are ACTUALLY using [salesforce.com] . . . "
“Great way to gage engagement and easy for a user to click on that to see more of the story.”
Module 2
What They Saw
Prospects & Customers
Findings
• The image captured interest, but likely drew attention away from the interactive icon
• 4/7 panelists didn’t notice the design
• Copy is overwhelmed by images • Consider scaling images in
proportion to copy, balancing visual appeal with substantive content
Recommendations
• Implement the design with suggested modifications
• Increase copy to provide customers with the ways in which Salesforce better positions customers to be successful
• Encourage interaction of module, using icons with visual cues
Prospect/Customer Feedback
“I would like more detail in the graphics and it seems too big.
This one was confusing.”
“I would like more detail in the graphics and it seems too big.
This one was confusing”
“I enjoyed the pictures but I don’t think it told the story as well as the other one [Sean]. I couldn’t tell how they linked together. I really just didn’t
get the story.”
“I like this a lot. I love the big pictures. I like what they are saying. It isn’t confusing. It really is visually appealing.”
Sales Team Feedback
“Good.Very image rich.”
“Again + was a little hidden, but more clear that if you click on it more will show . . .”
“Very easy, attractive to the eye, I like the fonts and layouts.”
“I fee like it’s easy to miss the + sign.”
“ it seems to get a little busy/hectic when you have the
multiple "more" options . . . "
Module 3
What They Saw
Prospects & Customers
Findings
• Visitors did not intuitively understand that the hotspots were a clickable, interactive object
• Interaction was widely ignored
• When they did interact, they liked the ability to “drill” down into the product
Recommendations• Implement the design with
recommended changes
• Provide obvious clues to interactive, clickable feature
• Increase visibility of hotspots using contrasting color palette or other visual cues
Prospect/Customer Feedback
“I like it because it takes it a step forward but it didn’t really bring much. It just had a little paragraph.”
“Really cool, but I would have never
known to click on the blue plus signs . . . “
“I kind of like that they pop out/magnify parts of the screen . . . The links are very hard to see . . .”
“It’s not obvious you can click . . . but the function itself is cool . . .”
“I wouldn’t have known to click– there were no signs they were clickable.”
Sales Team Feedback“It’s neat to be able to see
how it works. I would’ve went past without clicking. They
should make it more evident— the blue matches the
design too much.”
“It was cool. I think they need to make it known that you can click on them. The
graphs were really small in one of them so I couldn’t really read it”
“It is cool but I don’t know if I would use them. I couldn’t see them, maybe putting
that bouncy or pulsing button so you know to click on them.”
“Everything looks good, but the (+) on the mobile device is too small and I think many people would miss it on the page.”
“I wouldn’t have noticed the + sign if it wasn’t looking for it. It is slick but hard to catch.”
Appendix
S"muli Dura"on • Tasks 1 – 10: View un1l exhaus1on or task comple1on
Heatmap • Metric Type: Fixa1on Count • Radius: 59 px • Opacity: 70%
Gazeplot • Metric Type: Fixa1on Dura1on • Scale: 125% • Opacity: 70%
Technical Specifications
1. Eye-tracking calibration 2. Eye-tracking session:
• Task 1: First exploration of the Customer Stories landing page • Task 2: RTA and impressions of the Customer Stories landing page • Task 3: First exploration of customer story detail page (randomized between panelists) • Task 4: Impressions of customer story detail page (randomized between panelists) • Task 5: First exploration of bouncing “Show Me” interaction (Sean) • Task 6: Impressions of bouncing “Show Me” interaction (Sean) • Task 7: First exploration of static “Show Me” interaction (Bruce) • Task 8: Impressions of static “Show Me” interaction (Bruce) • Task 9: First exploration of hotspot interactions (David) • Task 10: Impressions of hotspot interactions (David)
Testing ProtocolCustomer/Prospects
1. Pre-Test Questions: • Which of the following best describes your position? • Which segment(s) do you work with? (choose all that apply)
2. Test Questions: • Task 1: Please provide any thoughts you might have on this landing page and/or the hover state. • Task 2: Please provide any thoughts you might have on this detail page and/or the feature at the bottom. • Task 3: Please provide any thoughts you might have on this detail page and/or the feature at the bottom. • Task 4: Please provide any thoughts you might have on this detail page and/or the feature at the bottom. • Task 5: Now that you have seen all the detail pages, do you have any additional thoughts? (optional)
Testing ProtocolSales Team
Thank you
38