Shopify - Domains connect
Took 3 months on the whole project who took 16 months.
I worked as the lead designer but closely with 2 front end dev, 3 back end devs, 1 content strategist and 1 pm.
Empathize
When you open a shop on Shopify, this means you’re getting ready to start your entrepreneur journey. A lot of merchants though about their brand a long time before opening a store hence a majority of them already bought their domain from a third party such as GoDaddy, Namecheap or else. There is a lot of things to think about from the product itself to the marketing post you’re going to write on TikTok and connecting a domain should be the least of your worries and connecting a domain should be absolutely seamless.
But, it wasn’t the case at all. We noticed a huge spike in support. As we all know, these conversations cost money and even more important, customers were losing time and confidence into the platform and themselves. A lot of them we’re saying during our research; ”It must be me, I’m not too good with technology”.
No it’s not your fault, we failed, not you.....
Define
During this phase, I deep dived into logs, researching and analyzing merchants frustrations. Did a ux competitive analysis. Bought a few domains to test it myself first hand. Had a few chats with different stakeholders and learned a bunch of thing about DNS. In fact did you know that the root name server is looking for an invisible dot at the end of the tld that you never see and never type. Amazing isn’t it?
After analysis it became obvious that the problem came from the complexity of the Domain world and we had to hide that inevitable complexity and do our best to do as much work as possible for them. Due to the nature of domain DNS some work had to be performed by the merchants and we decided to guide them and give them the necessary feedback to perform this task.
Basically, when you purchase a domain, you need to point it somewhere, to your shop for this instance. To do so, you need to go in the admin panel (DNS settings) of your domain provider and modify the A record and CName to alloy the resolving name server to find the right authoratative name server. Fun stuff hey?
We came up with a problem statement:
Merchants are having a hard time connecting existing domain to their shop even if they follow instructions. They’re not sure they have done it correctly and are contacting support which tell them that it could take a few minutes to hour before they could see it in their browser. Everyone is loosing time and money.
Ideate
I organized a Design Sprint and we came up with a few HMW’s to help us stay on track during this phase.
Some ideas were really interesting but couldn’t all be implemented. We came up with some solid ones.
It became certain that we would try an automatic connection with some partners, we started with GoDaddy because it was the most used one by far then Google domains.
For the rest, we would guide them as much as possible and give them real time feed back in the Shopify Admin by interogating the DNS registrar service.
While connecting a Domain from GoDaddy, the experience stays in Shopify.
When connecting a Domain from a different third-provider, a new window will be open to allow the merchant to to navigate to the the DNS settings of their chosen provider. Shopify will instantly verify if the information entered is correct and will highlight what needs to be corrected.
Prototype
This project was challenging on a ux perspective, I mean it is like connecting two wires in a black box not knowing if you’re doing it correctly. But it was also challenging on the engineering part and our ux desired path was depending on the fast response of the DNS calls.
We then quickly build a service to verify and confirm our assuptions. We had to tweak it a bit to avoid flooding the system with requests and DOS it. We finally got the right balance to be able to visually illustrate to merchants the data they entered in the setting of their domain provider.
Connect manually
Type the domain you want to connect:
See in real time what you've entered in the DNS settings of your domain provider
Connect a GoDaddy domain with auto connect
Type the domain you want to connect:
The system detects that this domain was purchased from GoDaddy.
After logging in you can just click connect to automatically apply the correct settings.
Once the domain is added, it is displayed on the Domain Index.
Test phase
We’ve tested the experience on a group of 9 merchants, measure the results, tweaked the way we were presenting the CNAME and ARECORD and some content in different success and error messages before we rolled it out.
End results
The new experience was really well received by everyone at Shopify but most importantly by our merchants.
Really proud of my team. ⚡️
