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