Zahra Langford

July 2021

Portfolio Sample

ABOUT ME

ZAHRA LANGFORD

I am a User Experience Design Leader with over 20 years of experience

in healthcare, e-commerce, business services and education. I have a

master’s degree in Human-Computer Interaction.

I get excited about leading collaborative, multi-disciplinary teams

through the design process in an agile, diverse and inclusive

environment.

I am an empathetic and organized designer. I love synthesizing

research from multiple sources to create elegant designs, then clearly

documenting and communicating those designs to stakeholders and

developers.

In my next role I want to work remotely for a large, socially responsible

company solving complex problems with real world impact.

I’m currently located in Southern Oregon and

can work remotely with frequent travel.

MY AREAS OF FOCUS

DESIGN

LEADERSHIP

I lead cross-functional teams

through the design process, from

requirements definition through

final documentation, with a

balance of innovative vision and

attention to detail.

EXPERIENCE

DESIGN

I have 20 years of experience and

a proven ability to increase sales

by up to 36% through the design

of web applications and product

features.

USER RESEARCH

I integrate research into all my

projects. My favorite methods

are competitive analysis,

customer satisfaction surveys

and user testing.

ZAHRA LANGFORD 4

TOOLS I KNOW:

Axure RP

Adobe Photoshop

Adobe Illustrator

Microsoft PowerPoint

Microsoft Word

What makes her work special is the ‘extra’ stuff she brings to the table. It’s hard to explain

this, but once you’ve had a couple of wide-ranging conversations with her about everything

from theater and cyberpunk literature to her chocolate business and Burning Man, you realize

where she gets the sensibilities that allow her to put the ‘experience’ into ‘user experience.’

Venkatesh Rao – Ribbonfarm Consulting and breakingsmart.com (worked with Zahra at Xerox)

Her work, to which she brings incredible

intensity, was always first rate in my experience.

George Gibson – Managing Partner at G2 Tech Acceleration

(worked with Zahra at Xerox)

She’s got that mix of geek and artist that makes

her incredibly versatile and valuable in this field.

Frank deSanto – Science and Technology Writer

(managed Zahra at University of Michigan)

MY WORK

7

PROJECT SUMMARY

Led redesign of gourmet gift

retailer’s desktop e-commerce

checkout process that increased

holiday sales by $10.5 million.

MY RESPONSIBILITIES

• Design Team Leadership

• Research Integration

• Requirements Definition

• Iterative Wireframing

• Mentor Junior Designer through Prototyping and User Testing

• Manage Front End Development

• Customer Satisfaction Surveys

• Roadmap Documentation

E-COMMERCE

CHECKOUT REDESIGN

COMPANY: Harry & David

“Fix the checkout process

because it's costing you

business. I have never

worked so hard to spend

money somewhere in my

life.”

Customer Sat isfact ion Survey

THE COMPANY

Harry & David is a gourmet gift company started in 1934 known

for their gift baskets and Royal Riviera® Pears. The company

generates over $500 million in yearly revenue.

THE PROBLEM

The company had inherited a floral-focused desktop checkout

process when they were acquired by 1-800-Flowers in 2015 that

presented multiple points of friction for their customers.

The company needed to reduce friction in their checkout

process while minimizing project cost.

My team’s goals were to present a research-based redesign

solution that senior executives could use to get the project

approved and then work closely with the development team to

implement by the crucial holiday deadline.

ZAHRA LANGFORD 9

The target users were new and existing Harry & David customers making purchases on

the company’s desktop e-commerce site. Most of these customers are women over 40

who are familiar with the brand; they purchase holiday gifts for multiple recipients.

Two key personas:

KAREN

“The site was very difficult to navigate. I

couldn't see entire window and it would

jump to things when I wasn't finished. Took

way too long to place my order.”

• Age 65

• Lives in the West

• Married

• College or High School Education

• Owns a single-family home

• Median Household Income $113k

AMY

“Website needs a UX/UI overhaul and

reduction of word count, font colors, and

navigational complexity.”

• Age 45

• Lives in the Northeast

• Married

• College Education

• Owns a single-family home

• Earns more than $75k

I started this 11-month project (at 25% of my time) by reviewing all the existing

research so that I could connect every design choice to a real problem. This informed

every subsequent step from wireframing to development and ultimately ensured the

project’s success.

1. Research

Integrat ion and

Requirements

Def init ion

2. Wireframing

3. Mentor Junior

Designer:

Prototyping and

User Test ing

4. Work Closely

with Developers

to Implement

5. Monitor

Customer Surveys

to Improve Design

ZAHRA LANGFORD 11

JAN 2018 NOV 2018APR 2018 MAY - OCT 2018FEB - MAR 2018

ZAHRA LANGFORD 12

E-Commerce Checkout

Redesign Process

1. Research Integration and

Requirements Definition

I integrated research from eight sources to analyze existing checkout; defined and prioritized every problem, then documented requirements for use in project advocacy.

1. Customer Feedback

• ForeSee Survey Results

• BizRate Survey Results

2. Customer Service

3. User Testing

4. Baymard Institute

• Baymard Audit of Harry & David Desktop Checkout

• Baymard E-Commerce Checkout Usability Guidelines

4. Competitive Review

5. User Experience Expert Reviews

6. Executive Review

7. Sister Brand Checkout Usability Audit Review

ZAHRA LANGFORD 13

E-Commerce Checkout

Redesign Process I identified overlooked sign in fields, disconnected product information entry and an overwhelming final step as major sources of friction in the checkout flow.

A. Sign in fields are easily overlooked by registered users in shipping step of checkout, but signing in makes all subsequent steps easier

B. Customers are forced to enter product information for the same item over two separate steps (shipping addresses in one step, gift messages and arrival dates in the next), rather than entering them in a single step

C. Billing and payment page is overwhelming with too many fields to complete, causing many customers to abandon at this point

D. Missing true review step

Product PageAdded To

CartShopping Cart

Shipping Addresses

Delivery Date & Gift Message

Billing, Payment,

Review

Order Confirmation

CB D

A

1. Research Integration and

Requirements Definition

ZAHRA LANGFORD 14

E-Commerce Checkout

Redesign Process I identified missing total cost and promo code entry, along with distracting secondary buttons and error messages as major problems in the shopping cart.

A. No way to understand total cost of order; including discount w. promo code entry, shipping and tax

B. Express checkout options distract from primary checkout button

C. Ambiguous error messages cause confusion

D. No way to save items for later

E. New items are added at the bottom of the list and may be hidden

F. Unclear that shipping addresses for items without a recipient can be entered later in checkout

G. Changing quantity requires an extra click

C

B

D E

FG

A

1. Research Integration and

Requirements Definition

ZAHRA LANGFORD 15

E-Commerce Checkout

Redesign Process

Product PageAdded To

CartShopping Cart

Shipping Addresses,

Delivery Date & Gift Message

Billing & Payment

Review (optional)

Order Confirmation

Sign in or Checkout as

Guest (optional)

A. Add the option for a separate sign in page, but also made them more prominent if integrated into shipping step

B. Unified product information entry (shipping addresses, gift messages and arrival dates) on a single page

C. Encourage sign in and carry guest email address forward to reduce the information to complete on the billing /payment page

D. Add an optional review step before the order is complete

Brand Choice:

• Checkout goes to Shipping or

• Checkout goes through Cart

Brand Choice:

• Sign in at top of Shipping or

• Sign in on a separate page

Brand Choice:

• Review integrated into Billing or

• Review as a separate page

C

B

D

A

C

In my new wireframes, I made the sign in fields more prominent, unified product information entry and carried information forward to make the final step easier to complete.

2. Wireframing

ZAHRA LANGFORD 16

E-Commerce Checkout

Redesign Process

A. Present total cost of order with shipping and tax message; add promo code entry

B. Subdue express checkout options to focus attention on checkout button

C. Clear error messages

D. Add two ways to save items for later

E. New items are added at the top of the list

F. Explain that shipping addresses for items without a recipient can be entered later in checkout

G. Changing quantity takes a single click A

A

B

C

D

D

E

F

G

I added a clear total cost of order and promo code field, subdued the secondary buttons and wrote actionable error messages to improve the shopping cart.

2. Wireframing

KEVIN WILLIAMS WITH DIRECTION FROM ZAHRA LANGFORD 18

E-Commerce Checkout

Redesign Process I mentored a junior designer in creating a 5-screen interactive checkout prototype, based on my wireframes with a refined visual design.

View full prototype in Axure

3. Mentor Junior Designer:

Prototyping and User Testing

KEVIN WILLIAMS WITH DIRECTION FROM ZAHRA LANGFORD 19

E-Commerce Checkout

Redesign Process

Sample User Test Tasks

1. Looking at the Shopping Cart, what do you think you can do from this page? What do you expect to happen when you interact with each element?

a. Save for Later c. Add-Ons

b. Save Cart

2. Start the process of checking out as a guest. Use promo code SHARE20 to get 20% off your order. Address both gifts to your best friend (you can use a fake address) for delivery as soon as possible. Add an appropriate gift message. Stop when you getto the Payment step.

a. Did you complete the task successfully? (Yes/No) b. Overall, this task was: (1 Very Difficult - 5 Very Easy)

3. Continue the process of checking out. Enter your billing address and information (you can use a fake address); use credit card number 4147 2022 1111 1111, exp. 8/2020, security code 585 to pay. Enter a Gift Certificate (6035710422608337131, PIN: 1568). Then review your order.

a. Did you complete the task successfully? (Yes/No) b. Overall, this task was: (1 Very Difficult - 5 Very Easy)

The goal of the user testing was to identify any usability issues in the checkout flow and then use this information to finalize the design.

3. Mentor Junior Designer:

Prototyping and User Testing

• FEMALE TESTERS

• AGE 50-54

• INCOME $40k+

• WINDOWS 7 OR 10

• CHROME BROWSER

5EASILY COMPLETED

ALL THE TASKS

80%STRONGLY AGREED

THAT THE CHECKOUT

WAS EASY TO USE

80%WERE HIGHLY LIKELY

TO RECOMMEND THE

CHECKOUT

80%

E-Commerce Checkout

Redesign Process

KEVIN WILLIAMS WITH DIRECTION FROM ZAHRA LANGFORD 20

Sample User Test Video

5 unmoderated tests were conducted on the UserTesting.com platform. Results showed that target users were able to easily complete the new checkout process with multiple items.

3. Mentor Junior Designer:

Prototyping and User Testing

ZAHRA LANGFORD 19

E-Commerce Checkout

Redesign Process I worked closely with front-end developers to communicate the design; I led weekly review meetings to answer questions and give prioritized feedback during implementation.

• Identify and address roadblocks as they came up

• Adjust design as needed to meet deadlines

• Document compromises for future product road-mapping

DE25094 From Zahra: New Recipient Page Issues

2 out of 6 issues fixed

1. Missing auto-complete of City/State from ZIP (if we are not going to get this for season, I need to change the order of these fields)

2. Position of Save and Cancel buttons needs to be reversed

3. Save button should not be active until required information is complete

4. Delivery notes need to be moved up next to location, preferably into a “?” icon w. mouse over

5. Country selector should always be visible

6. “?” icon near telephone field does now has content but it is displaying underneath the window, it should be on top:

Sample Feedback Given to Developers

4. Work Closely with Developers

to Implement

ZAHRA LANGFORD 20

E-Commerce Checkout

Redesign Process During the phased rollout of the new checkout, I monitored customer satisfaction surveys and associated sessions, making agile adjustments to the design as needed and getting them integrated quickly.

Customer Satisfaction Surveys by Qualtrics

Customer Sessions with TeaLeaf5. Monitor Customer Surveys to

Improve Design

The checkout is still being used by Harry &

David and four other food brands: Cheryl’s,

The Popcorn Factory, Wolferman’s

and Stockyards

CHECKOUT

REDESIGN

OUTCOMES

$10.5 millionin increased holiday sales can be directly

attributed to checkout improvements

• Reduced Friction

• Increased Conversion

• Increased Customer Satisfaction

CONTACT ME

GET IN TOUCHI’d love to walk you through this portfolio sample and

answer any questions you may have. I have additional

examples of my work that are available upon request.

Here are the best ways to reach me:

SEND ME AN EMAIL

GIVE ME A CALL

541-951-8931

zahrala@gmail.com