new: store finder - Githubissues

jackreeves commented 6 years ago

Problem Statement

As a customer sometimes i want to purchase in store so that i can talk to a person face to face

as a designer i would like a consistent component so that I can add store locator to my designs easily

Recommendation

Come up with a full width and or store locator module so that customers can find the nearest store to them.

Ideas:

Geolocation Postcode lookup Try to keep online - explain why its better - offer help? tracking data?

Designs

screen shot 2018-06-15 at 1 44 21 pm

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url) https://www.telus.com/en/bc/resources/stores/?linktype=footer
Which teams/applications do you think would use this improvement? B2B MOB HS
High impact: No

ahmadnassri commented 6 years ago

not sure this fits the TDS community category? this is a full end-to-end application and should be owned by a dedicated product team

theetrain commented 6 years ago

Due to this requiring business logic or proprietary information, it does not qualify as a component. See community component criteria.

donnavitan commented 5 years ago

Could we explore improving the user experience for both mobile and desktop?

TELUS.com

varunj90 commented 5 years ago

Map component revisited - Doug

The customer experience can be better
Can this be a component with the business logic removed?
If not a component, how do we improve experiences like this throughout TELUS.com?

TELUS.com Find a store (mega footer): https://www.telus.com/en/bc/resources/stores/ Find a store (button/expand/collapse): https://www.telus.com/en/bc/mobility/accessories/product/apple-watch-series-4-stainless-steel#storeLocator

Discussion

Enrico - fairly complex component, like redux contentful (api connected component)
Should be done, can be taken to tech forum
Can be a DSM pattern, api agnostic

Next steps:

Take dpa developer weekly, maybe tech forum
Notes from DPA developer weekly June 6
need more information on the use case
Potentially too complex for TDS Community, even if decoupled with an API key. For a single use case, like returning locations on a map, with responsive design, this may be viable.

June 10

Is store locator the only use case for maps
Coverage maps - where the fibre internet is
Mobile and desktop functionality is great
Bring to tech forum and decide on an API key for a single vendor (google vs bing)
Action item: Varun to reopen issue | Enrico to take it to tech forum

theetrain commented 5 years ago

Some notes from today's developer DPA session:

We have usages of the Google Maps (cc @stepmr) and Canada Post (cc @brendanpowershifter) APIs on production today. Whether we should use one over the other isn't known to me. Canada Post API is preferred when looking up valid mailing addresses
Both APIs have their own visual design when autocompleting addresses; they don't seem to be overridable
There may be an opportunity to share this logic as a utility outside of TDS

Franimal604 commented 5 years ago

Would this component be for just store locator. We have a couple cases that need something like this for "finding services" for HS. I noticed that one of the Vendors has been asked to build something like by one of the other TELUS teams.

Use case oh HS 1) Fibre internet search 2) smarthub qual 3)whyTELUS services search

https://telusmaps.koremuat.com/smarthub/test/wrapper/telus.jsp?language=en ( don't worry i'm doing a design review for this page )

More of a TELUS branded map

https://www.telus.com/en/internet/fibre/new/areas?linktype=ge-meganav

Screen Shot 2019-07-26 at 2 06 04 PM

@AnishaRawat @sketchidea

Franimal604 commented 5 years ago

Could we do a next step on ux/visual consistency of the maps?

varunj90 commented 5 years ago

@Franimal604 here are the next steps:

I’ve asked DPA to consolidate examples for maps (messaged on #dpa-private)
a designer from Brand Experience team (i've asked @AnishaRawat ) can take a stab at the research and design
once completed TDS team can assist with the development, as this is a complex component with API calls and potential helpers modules required

Stu-Brown commented 5 years ago

Here's an example of Find A Store on the warranty look-up page. The user must enter an IMEI or manually select their device brand before the store finder is rendered.

WarrantyLookup_FindAStore

Franimal604 commented 5 years ago

Just gathered some requirements for Brand Experience team and I'm not sure if this is feasible with google maps i've outline some requirements given to me below. I'll get some more clarity on some of these items.

Tech features

Turn off/on layers (i.e. show only TDOG events, or show Internet for Good data points)
POI should display
Heading
Description text
Image
Link
Date/time (optional)
Address (specific or general - i.e. street number or city)
Ability to set default focus location for map (i.e. a X metre radius from a location)
Based on visitor’s IP
Globally
Ability to personalize default layers displayed upon initial view based on
Referring ad URL
Globally (i.e. set within Sitebuilder block)
Ability to upload new POI information via Google Sheets
Custom POI icon images
TDS compliant

One of the stake holders has been testing https://mapline.com/ but might have to let them know we won't be able to use this.

Talked to the other teams on HS and they are in need of a map but with different requirements as well.

varunj90 commented 5 years ago

hey @Franimal604 any updates on this?

Franimal604 commented 5 years ago

Apparently there are a few different teams working on versions of store locator/map I know config and checkout have a build coming out soon. Mobility has something similar. There is an external team ( KOREM ) that is working on a map for smarthub finder and another external vendor ( sweetiq ) working on a store locator component as well. It looks like there are 4 teams working on something similar.

theetrain commented 5 years ago

Thanks @Franimal604. I've opened an issue in Tech Forum and we'll sort this out. 👍

Franimal604 commented 5 years ago

Awesome thanks Enrico!

danielcrough commented 5 years ago

Hey everyone! Just letting you all know that we are interested in a component like this for our local search pages in HS! Let us know if we can help in anyway and keep me in the loop!

catherinetelus commented 5 years ago

UPC is also working on a store locator with search, map, list view for the Checkout. We've based ours on current accessories inventory check but have made quite a few tweaks to update it in terms of accessibility and overall experience.

Reserve Checkout DSK change store 1d

xingbo828 commented 5 years ago

The find-store is more like an app instead of TDS component since it depends on the following:

BFF service and downstream services for query store, inventory check
Translation between multiple langs

Therefore, what should be contributed is not the find-store component, but the Map and AddressAutoComplete components as these can be app context agnostic.

kittybourne commented 5 years ago

After discussing with Bo and Brian Lam1, it seems that this might be better suited to be a sitebuilder block rather than a component. We can't really control the Google map itself and the search bar and list of results is are already elements of TDS forms. It's just how it's laid out on a page that can be standardized.

lynnepeacock commented 5 years ago

Hello @catherinetelus,

We had a few thoughts/questions about the above design during the DPA meeting.

1) When a customer checks/unchecks "Show stores with available inventory". What is the interaction?

Results automatically appear
User must press the enter button to load/reload results

Donna wondered if a toggle could be used here depending on how the results load.

2) We discussed that the "Search near me" option is a little hard to locate in its current position and perhaps looks related to other items around it.

We wondered if it appears before or after the available inventory checkbox in the hierarchy?
What does this option look like on a mobile? Is it more prominent in that scenario?
How does this item work on a desktop?

Thanks!

catherinetelus commented 5 years ago

Thanks for capturing the notes @lynnepeacock!

I need to explore this with @xingbo828 in terms of delay time before load. My assumption was that results would automatically appear, perhaps with loading indicator if it takes a while. @donnavitan we also explored a toggle, but felt like it cluttered the already interactive area by adding complexity. Let me know your thoughts, maybe we can explore further?
The "Search near me" appears before the available inventory checkbox currently in terms of hierarchy. On mobile, the order is more obvious than on desktop.

On desktop (and mobile), user would click on the "Search near me" as a quick way of using the browser/device detected user location if GPS/location is allowed, to search for stores nearby rather than having to input their address. On desktop view (since mobile view has no map), the map view will also reflect this input of user location. Screen Shot 2019-11-12 at 10 19 36 AM

You can see an example of this here on the Bestbuy website: https://stores.bestbuy.ca/en-ca/search Find the nearest Best Buy store location near you Best Buy Canada