Customer Stories Redesign

38
Salesforce 2016 Customer Stories Redesign Fanya Young UX Researcher Digital Experience [email protected] February 2016

Transcript of Customer Stories Redesign

Page 1: Customer Stories Redesign

Salesforce 2016 Customer Stories Redesign

Fanya Young UX Researcher Digital Experience [email protected]

February 2016

Page 2: Customer Stories Redesign

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

Page 3: Customer Stories Redesign

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

Page 4: Customer Stories Redesign

Landing Page

Page 5: Customer Stories Redesign

What They Saw

Page 6: Customer Stories Redesign

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-

Page 7: Customer Stories Redesign

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&

Page 8: Customer Stories Redesign

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-

Page 9: Customer Stories Redesign

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%.”

Page 10: Customer Stories Redesign

Details Page

Page 11: Customer Stories Redesign

What They Saw

Page 12: Customer Stories Redesign

Prospects & CustomersEye Tracking

Findings

• Hero and title resonated with naïve visitors

• “Read More” confirms our placement of the blue banner

Sean_All_110s+

Page 13: Customer Stories Redesign

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

Page 14: Customer Stories Redesign

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+

Page 15: Customer Stories Redesign

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.”

Page 16: Customer Stories Redesign

Module 1

Page 17: Customer Stories Redesign

What They Saw

Page 18: Customer Stories Redesign

Prospects & Customers

Findings

• Module tested well with 7/9 panelists noticing the interaction

• Interactive icon (e.g. a bouncing “+” sign) received mixed reviews

Page 19: Customer Stories Redesign

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

Page 20: Customer Stories Redesign

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.”

Page 21: Customer Stories Redesign

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.”

Page 22: Customer Stories Redesign

Module 2

Page 23: Customer Stories Redesign

What They Saw

Page 24: Customer Stories Redesign

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

Page 25: Customer Stories Redesign

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

Page 26: Customer Stories Redesign

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.”

Page 27: Customer Stories Redesign

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 . . . "

Page 28: Customer Stories Redesign

Module 3

Page 29: Customer Stories Redesign

What They Saw

Page 30: Customer Stories Redesign

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

Page 31: Customer Stories Redesign

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

Page 32: Customer Stories Redesign

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.”

Page 33: Customer Stories Redesign

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.”

Page 34: Customer Stories Redesign

Appendix

Page 35: Customer Stories Redesign

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

Page 36: Customer Stories Redesign

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

Page 37: Customer Stories Redesign

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

Page 38: Customer Stories Redesign

Thank you

38