PURE: Customer Stories

A walkthrough of the process of rethinking the Customer Stories Template for purestorage.com.

previous template (left) vs new template (right)

1. Introduction

Pure Storage

Pure ($PSTG) is a multi-billion dollar, 4,000-person data storage company.

Enterprise-level data storage is a massive responsibility for those responsible for ensuring uptime, performance, etc; these people can’t accept anything less than perfection and take their job very seriously.
Pure has some phenomenal quotes and success stories from their customers but they’re not showcased on the site in the most effective way.

The challenge: Re-think how this customer content is presented on Pure’s site, and how it’s used in Pure’s marketing strategy.

This Case Study is broken out into 8 sections:

1. Introduction (you are here)
2. Analysis & Research
3. Objectives
4. Execution: Wireframes
5. Execution: Design
6. Execution: Development
7. Execution: Publishing & Documentation
8. Results

2. Analysis & Research

Passionate Customers

Pure’s customer-satisfaction is mind-boggling; their customers absolutely love them. Not merely just satisfied customers, these customers are enthusiastically pro-Pure.

Screenshot of lines 1,050–1,088 of our amazing quotes spreadsheet — plenty more where this came from!

The Problem

Pure’s Customer Stories were presented in PDF format. Along the way the team realized they needed a utility html page in their user flow for analytics and tracking.

Pure had ~250 unique Customer pages, and they all looked like this:

Examples of the old template, used across ~240 pages

The big problems with this:

• These ‘utility’ HTML container pages weren’t very helpful and required an extra click from the user just to track users.
• Users had to then download a PDF to get actual story details, taking them away from the site. PDFs can be a poor experience, especially for mobile users.
• Perhaps the worst of all: These are actually amazing stories about how Pure has helped solve real problems; these stories are buried and not as prominent as they deserve to be.

Qualitative research and interview results did not align with how we were presenting these stories on the site.

3. Objectives

The objectives then became clear:

1. Create an easier way for users to browse and consume these stories.
2. Clearly communicate the technical & business problems being solved.
3. Instead of being Pure-focused (or even just customer-focused), reposition these stories to be partnership-focused.
4. Demonstrate how happy our customers are; humanize the stories of the companies and people involved.
5. Elevate the design experience for the brand and the user.
6. Streamline and organize the production process.

4. Execution: Wireframes

I began with the hero component. The two main things to improve here:

1. Headline Length: Make it more concise and readable.
2. Partnership: Emphasis on the partnership instead of just the customer or Pure.

The Hero Component. Old version on the left, New version on the right.

If users simply wanted the PDF, a link right in the hero would be present.
For a more in-depth experience I proposed adding:

1. Summary: A concise paragraph summarizing the benefits of the partnership.

2. Use-Cases: Specific implementations or subjects relevant to this experience (e.g. healthcare, or SAP or something akin to a category label).

3. Rename: The term ‘Use Cases’ was used in a different manner (see previous point). After some competitive research I proposed using the term ‘Customer Stories’ for these pages to be more customer-focused.

4. Customer Description: A brief overview of who this customer was and what they were trying to achieve.

5. Challenge: A description of the challenge(s) preventing them from achieving their objective.

6. Results: Showcase business and technology results, emphasizing that a better IT solution ultimately was a better Business solution.

7. Video: A video component that felt tightly-integrated into the site; Not including it shouldn’t affect the layout or story.

Thumbnails of wireframes (in-progress), Desktop & Mobile

5. Execution: Design

I referenced some best-in-class sites and try to borrow some interactions and layout; Uber’s design case studies are great — namely:

1. the pinned ‘chapter heading’ indicator
2. use of svg patterns
3. the parallaxing box movement.

Screenshots of inspiration: Uber’s Design team pages. 1. pinned nav/timeline 2. svg textures 3. staggered overlapping parallax divs

I had some hours with an amazing designer at one of our agencies.
She’s an excellent designer, she knew Pure’s brand well and did a fantastic job on execution.
She and I worked closely through many rounds of feedback, updating and iterating the wireframes as well as the design.
It was a great process and we both felt that it produced successful results.

Typography

• Font Consolidation: We consolidated the web fonts down to 14 styles. I worked with the Dev Team to map all semantic html tags to the corresponding sizes and created a Desktop/Mobile size conversion ruleset.

Our resulting site-wide consolidated 14 flavors of Proxima Nova.

• Character Limits: Character counts were established for legibility.
  We opted not to limit this in code and just enforce by policy; this allowed for overrides for German and other longer languages.
• Camel-Case: We reduced the <h1> font size and moved to text-transform: capitalize; We also had an override for this just to be safe(i.e. capitalized letters are used differently in German).

The (mostly) final design comp. We modified a bunch during the dev sprint but this was the general direction.

6. Execution: Development

I worked with the Dev Leads, Scrum team and Business Analysts to define requirements and clarify questions during Sprint Planning & Estimation.

I built interactive prototypes in Javascript/CSS/HTML and used After Effects for motion comps.

SVG Patterns:

• I defined the repeating pattern as an svg <pattern id=”patternA”> element and then filled an svg <rect> with #patternA.
• Styling was done in CSS, limited to max 2 colors (our logos were all going to be 1-color svg files, the second color was for alpha — this covered almost all of our use-cases)

Codepen screenshot of one SVG pattern showing 1)the inline SVG, 2)the two optional CSS styles and 3)the resulting pattern below.

I worked closely with devs to nail motion and timing, and to resolve edge-case scenarios.

7. Execution: Publishing & Documentation

Logos

We opted to use 1-color svgs of all of our client logos for consistency.

I worked with our production designer to show best-practices for .svg files covering minimizing <path> elements, thinking in ratios instead of pixels etc.

Finder view of our collection of svg logos! Coming up on 300.

Images

Bitmap images were used on the Hero and the Quote components.
I set up source templates for production.
I set our Production Designer up with ImageOptim for image compression.

8. Results

The results on this were positive all-around.

Quantitative:
Time on site increased overall on these pages. PDF downloads decreased slightly but we can assume that by hoisting more content from the PDF into the page the need to download was lessened.

Qualitative:
We’ve only had positive feedback from our users and stakeholders.

Long-term, this brand-led effort helps us elevate our most important differentiator: our happy customers’ experience.

We saw a marked increase in the Design Maturity of the marketing team, and the larger Pure brand benefitted from these efforts as well.

screenshots of three pages from production using the new template.

Interaction and motion details from the live site.

Larger screenshots of two additional pages on prod.

I can’t believe you read this whole thing! Thanks! It’s now time to close the laptop and go for a walk.