Locale Selector Visual Design studies

[jeffchew]

Benjamin-Hansen1 created the following on May 03:

User story

As a user, I need a way to know when I am leaving my preferred language so that I can make the decision if I want to leave my language and/or select one of my choice.

Notes

There is a work that already started by the request from the Marketplace team (Mary O'Donnell).

• The priority is documented in the component Airtable
• Assigned priority: https://github.com/carbon-design-system/ibm-dotcom-library/issues/222

Acceptance criteria

• [x] Design directions have been created and explored
• [x] Socialize and review with key Design stakeholder (DDS, DGC, IDL)
• [x] Narrow down design direction to one for final design task in sprint 15
• [x] Showcase at end of sprint 14

Original issue: https://github.ibm.com/webstandards/digital-design/issues/787

[jeffchew]

On Jun 13, spbokma commented: Here are the updated wires for the two test. This reflects the reviewed copy form Jill Stuart and approved by Mary O'Donnell

https://zenhub.ibm.com/app/files/382085/3c3640eb-9b2c-4cb2-b69c-588cd8afd516/download

Sketch file: https://zenhub.ibm.com/app/files/382085/09296205-b2b2-4e2f-80bb-adc9634d80ea/download

[jeffchew]

On Jun 25, linda-carotenuto commented: Is this the completed design for one of the first components on our list?

[jeffchew]

On Jun 27, spbokma commented: Ben and I meet with Mary today and here are her notes from that check-in:

Here is a quick summary of our call - next steps:

1) Scott has gotten a visual design resource and they have kicked off the work in this sprint. Scott will confirm a target date for the completion of the visual design (hoping it will be by 7/12) and get back to Mary and Ben by Monday.

2)Mary will get Ben the names of internal resources who are interested in giving feedback on the design by Monday 7/1 at latest

3) Ben will add an internal user test that is separate from the external user test. The purpose of the internal test is to get their feedback, but even more importantly, to make them feel involved in the process.

4) Ben will also add some questions at the end of the test to cover: • where would the user expect to go on the page to change his region/country? • would the user prefer a drop down or a button that opens an overlay to change their region/country?

Thanks! I will schedule another checkpoint for early the week of 7/8,

[jeffchew]

On Jul 18, spbokma commented: Here are the updated wires across 1312px, 672px & 320px. LocalSelector-notificationFlow_V3.pdf

Here is the updated Sketch file: https://ibm.box.com/s/m1yt5ohh68j6r80qa1vb5tpgodnqelvf

[jeffchew]

On Jul 23, Wonil-Suh1 commented: IDL approved locale selector icon: earth-icon-for-locale-selector-button.zip

[jeffchew]

On Jul 25, larahanlon commented: Beginning of visual studies here: https://ibm.box.com/s/0htkb6i6x4zjzahbfomovrzv7xs20wf7

[jeffchew]

On Jul 26, Wonil-Suh1 commented: Love this card style:

Not sure where you are with the visual, a bit of vertical rhythm and visual anchoring might be an interesting area to explore:

---

As for the list, this is going to be tough. How about some more visual anchor like this?

[jeffchew]

On Jul 30, larahanlon commented: Update:

• [x] Received a bunch of great feedback from Elliott, Wonil and Olivia on Friday 26 July.
• [x] Added more studies to Sketch file.
• [x] Connected with James Dow (goal is to start design+dev prototyping together).
• [x] Uploaded 5 iterations to Wake (footer flow only).

[jeffchew]

On Jul 30, larahanlon commented: @Wonil-Suh1 I'm thinking it would be better to share the visual design work with Mary in the next sprint. I have a broad spectrum of iterations for this 'study' phase which I think needs deeper design critique (from DDS, DGC, IDL) before presenting to Mary. I'd rather have a clear(er) direction than share too many options at this stage. James may also have more to add/change.

What do you think?

My suggestion is to change the A.Criteria to:

• Design directions have been created and explored
• Socialize and review with key Design stakeholder (DDS, DGC, IDL)
• Narrow down design direction to one for final design task in sprint 15
• Showcase at end of sprint 14

[jeffchew]

On Aug 01, larahanlon commented: Feedback from DGC during reviews:

• Need to show country and language at all times
• Scrolling list is more successful than grid layout
• Search is a good addition
• Filtering is too much for this journey
• Consider iterations with 4-col left panel to align with MyIBM and URX layouts
• Full-screen modal is a good approach but consider more 'border' for overlay

[jeffchew]

On Aug 01, Wonil-Suh1 commented: An exploration around see-through modal and grid usage (3-10-3) and the extra margin for modals.

And the Sketch file here

[jeffchew]

On Aug 05, larahanlon commented: Feedback from IDL review on Friday, August 2:

• Narrowed down to one modal journey.
• Cards work well.
• Overall layout works well.
• Either gray-10 or combo dark+gray-10+white design could work. Need to test with others for feedback.
• Dark theme is too extreme.
• Need to add extra margin across modals.
• Full-screen exploration makes sense only if the user intentionally chooses locale from the footer. Otherwise it's hiding too much of the page.
• Wonil, Olivia and Lara in agreement that the first modal (when a user lands on a page outside of their location) should be smaller and aligned with the standard modal component. If the user chooses to change their language then the modal can enlarge for longer flow.

Iterations agreed to move forward with:

[jeffchew]

On Aug 05, larahanlon commented: Closing this issue as the studies are complete.