Heads up! This is a sketch defined from SYW online work in late 2016; documented for teams' benefit. Please add to it or make comments using the feedback form below, or email the Patterns Team. Note: The full SYW “brand guide” is in flux.

Shop Your Way Online Standards

Online only (sears/kmart) implementation standards - mostly focused around points messaging and Design Principles to support the program.
See also: Intro to SYW program

Copy/Content


Points in $$, not X,XXX

“$XX in points”
Users prefer (comprehension improved) when points are communicated in dollars
Legal has removed the requirement to show points AFTER dollars in points.

do:
“Earn $5.00 in points when you spend $xx”

don’t:
“Earn $5.00 in points (50,000 points) when you spend $xx”


Examples

Earned Points

above $1 : "Earn $2.65 in points to use later"

below $1 : "Earn $.45 in points to use later"

Redeem Points (earned only, not Surprise)

above $1 "You have $12 in points to redeem on this order"

below $1 "You have $.10 in points to redeem on this order"


Working with legal for online and mobile, these are there requirements as they have been laid out.




Preferred Terms

"Shop Your Way" is the program name
--Don't: "SYW", "SYWR". We should never abbreviate the program name.

"Shop Your Way member(s)" - vs - “Member(s)”
--Usage depends on context: In external promotions we say "Shop Your Way members" and we rarely have room to do that online/mobile.
--Sometimes it is shown with logo, sometimes not.
--MH: "Many offers entered by merchants just say "members get" or "members earn." (I am working with formats to at least get everyone aligned to "members earn.") "

"Sign in" and "Join for Free"
-Don't: "Sign up", "Login",
*Q- should always be some reference to "member" or "Shop Your Way" in the context, or in the CTA itself.
Inconsistencies: Cart, SYW.com
*Q- "Activate" - instore use case. Do: "register" or "create new account"?

"Today" vs "later" points
--Do: "...to redeem today" and "...to use later".
--Don't: "...to use on this order"
--Rationale: to clarify the difference between "earned" and "surprise" - which is tough to comprehend.
*Q--Is the core guideline "today and "later", and redeem/use is flexible? I.e. is "redeem later" allowed? (examples below)
*Q-- "redeem *on this order*" is in the examples above. Is "on this order" allowed? or do we disallow to prevent a 3rd term.

--Don't: "...get back in points"
--Rationale: "get" is a present tense word. get back has tremendous comprehension problems. UXR on this out there.
*Q: Don't: "Back in Points" (RELATE TO TODAY VS LATER)
*Q--Do: "earn in points" or "earn an extra 10% in points"
Inconsistency in BOF: https://sears.invisionapp.com/share/EUAPNQHVW
Base - "gets X% back in points"
Assoc: "earns X% back in points"

"Earned points"
--Used when referring to Base, Bonus, Associate Discount points (an umbrella term). Under any "details" click, it will outline what kinds of points are being earned/redeemed.
--Don't: "Reward Points", "Member points"
--Rationale: We need to stick with Earned vs Surprise. W necessarily distinguish between points that are earned through buying stuff (base and bonus) and points that are given (surprise). Our verbiage everywhere is “Earn 20% in points on...” (hence Earned points is a natural connection)
*Q: can just be called "points"? ("earned", "Shop your way", etc not required)?
*A: Proposed rule: "Points" (alone) is used as a roll-up, each individual point type requires a modifier i.e. "earned" - SEE "Points redeemed" section below. "XX Points - includes...." exists in BOF LINK

"Surprise Points"
--We reflect surprise point offers not as a dollar value, but as a quantity
--Do: Singular: "...a surprise points offer worth $10"
--Do: Multiple: "...5 surprise points offers available worth up to $60"
--Examples: "Score! You have a surprise points offer worth $10"; "Score! You have 5 surprise points offers available worth up to $65"
--Don't: "You have up to $65 in surprise points"
--Rationale: "Up to" is not ideal for comprehension. It is misleading since most SP offers don't stack - so really, you only get one of the offers.

"Associate Discount Points"
--Don't: "Associate Points", "Associate Discount"
--"Program" must be somewhere in every screen
--Note: These are returned in the "Bonus Points" field in the feed, and function similarly. "Also… There are 7 types of Associate Discount feeds. "
LINKs:
"program" is in the alert on desktop and mobile
desktop: https://sears.invisionapp.com/share/JYAPNRS9V
mobile: https://sears.invisionapp.com/share/AVAA49H43

“Points redeemed(redemption)” in Price Story
Order summary will list:
"Shop Your Way Points Redemption:
-Points redeemed XX
-Surprise points redeemed XX ..."
--Don't: "SYW..", “...redemption”)
--Rationale: Will be consistent across the buy flow, order confirmation email and eventually order center.
*Q: Line 2 "Points.." should be "(Earned?) Points redeemed"? (see above guideline)
LINKS
desktop: https://sears.invisionapp.com/share/ZBAPO8KCJ
mobile: https://sears.invisionapp.com/share/98APO9D2D

“Points expiration dates vary” is important legal language anytime we show points or offers.

Linking to Shopyourway.com
--Generally, we should not be linking to SYW.com from sears/kmart experiences.
--If linking to SYW.com is required (i.e. for legal terms), we are typing out the URL (not html link)



Conditions


Why does this matter?

System feedback is a key design principle that was identified. Consistently handling all conditions, across all touchpoints, is necessary to aid with member comprehension regarding points and overall program value.
Additionally, these conditions matter because membership is essentially tied to our login states end-to-end.

Conditions to account for

(including combinations):
  • Logged out/in/soft-login member
  • $0 available earned (base/bonus/associate)
  • Expiring points present/absent; expiring on single or multiple dates Tech Q: we show a single expiring total & date (later: multiple)
  • Pending points
  • Surprise points present/absent; single or multiple offers
  • $0 *eligible* for redemption (earned or surprise)
  • data feed failure - or - loading behavior
  • Non-member logged-in (online login does not always = member. Est. ~2%) - aka "CIS only" user
  • In store only member (haven't created a password for online) - aka DTS user. Logic exists to sniff email address and prompt them.
  • “Pending Verify” state (security step - After creating an online account, user has to click a link to verify) . Also used to Link SYW membership to online acct; a points theft security step.
  • Associate Discount Points Program (active) member
  • VIP status
  • MAX logged in (a shipping program, not points)

Personas/User types:
new user, active user, lapsed user,etc


Principles For Solutioning


The design goal is to support Shop Your Way with clear messaging about the program benefits and how to use SYW, while allowing for easy redemption of points and offers.

Messaging of SYW
  • Shoppers need to see and understand the value and benefits, or the value proposition, of the Shop Your Way program in a consistent and clear way.
  • Clarify how the SYW program relates to NON-SYW points and offers. Consider the total volume of different offers members receive.
  • What products do or do not qualify for any promotion or offer should be readily apparent (e.g. “valid only for Brand X refrigerators” or “excludes marketplace”).
  • Keep points and offers as simple as possible such as highlighting the exact $-off vs. the points-off or %-off. When possible, “Do the math for me.”
Using SYW Points
  • Shoppers want to know when and how to redeem their points.
  • Clear system feedback so members can understand points were applied and recover from errors.
  • Keep members within the website (i.e. sears.com, kmart.com).

Sources and Research


Link to any Wiki pages, Decks, Owners:
https://docs.google.com/presentation/d/1beRbmojC9orjFHCzEUeKD0JNaKV4XBV8eovRfdxMOto/edit#slide=id.p4
https://docs.google.com/presentation/d/1hRMZ3jpwEqrS3cqeyN2fnruyj7zefVGViV3O1txicnM/edit#slide=id.p4
https://wiki.intra.sears.com/confluence/display/CXInsights/e2e%3A+An+Overview+of+Shop+Your+Way+Experience%2C+Aug+2016 (links to a bunch of other previous work)
https://wiki.intra.sears.com/confluence/display/USREXP/Shop+Your+Way - includes decks, owners

*We should include a link to all UXR related to Points in our standards and an outline of what we learned, if possible.
---
Loose ends:
SYW BU alignment (status?)
Instore, email?



Design


This section is about styling, “how it looks” (on sears/kmart - eventually will just link to master BRAND GUIDE). Needs Brian consult.

Fundamentals of Art Direction

Colors:
Use Sears/Kmart brand colors (no SYW orange).

Logo:
Logged in: don’t push logo, just use “Shop Your Way” in text form, including titles
Logged out: use the logo

Frequent, bold use of solid brand-color backgrounds (ex in modal headers)

Lead with the $XX value of points that will be earned/redeemed (in the display order and/or hierarchy)

$XX styling - Large, medium blue price with superscripting is the standard.
Specs (desktop):
Superscript Dollar Sign
Size: 14px
Font Weight: 700

Dollar Amount:
Size: 25px
Font Weight: 600

Cents Amount
Size: 14px
Font Weight: 700

Modal Block Color, Price Color
Sears: #002859 = Kmart: #137ABF

Links
Sears: #005ccc = Kmart: #b10017

Body Copy
Sears: #001733 = Kmart: #333333

Semi Bold Titles:
Sears : #001733 = Kmart: #333333
----

"Active Offer" with green "success" checkmark is a solution to address stacking comprehension problems during redemption, and maps to the design principle of "system feedback"


Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.