1

I have checked online as well as on the forum here that touches on my specific scenario and have not had any luck.

Context: User downloads a third party app from our platform but they are missing relative data needed by that third party for the app to run correctly.

My solution: When they open the app for the first time, we make it easy for them to connect their data sources with a modal overlayed ontop.

Problem: There are many third party apps out there, in this case scenario it's a health app that requires data from 2 sources: Oura and Fitbit. So, I've created a progress indicator which I read is good for a minimum of three steps. So, connection oura and fit bit would be only 2 steps. I'm not sure if this is inevitable. Say a user is downloading a movie recommendation app and they require data from Amazon, Netflix and Hulu, that's 3 steps and would justify a progress indicator.

What if a user just has to connect only one data source too? I'm not sure what progress indicator to go with here. Would love some insights

Thanks, Dave

enter image description here

6
  • If it's only one step I'd hide the sidebar. – Martyn Jan 26 at 21:28
  • Can the application partially run with some limited features without being connected to both sources? Or is connection to both mandatory for any functionality? – Izquierdo Jan 26 at 21:40
  • @Izquierdo , so the connection for both is mandatory for any functionality. – DavidPicarazzi Jan 26 at 21:44
  • +1 I really like the way that you structured the question to provide context, your attempt/solution and then the issues you have come across - we could adopt something like this for a lot of our typical UX design questions! – Michael Lai Jan 27 at 23:34
  • 1
    @MichaelLai Hey Michael. I used to be on Stack overflow, and I know they are very strict on posting questions. So I just used the same method over here. Showed the problem, my solution, and what I think is the issue with my solution - and get some fresh eyes! Cheers. – DavidPicarazzi Jan 28 at 0:12
1

Edit: If a user has to only connect one data source, make your connection modal just about that data source, no steppers needed. The title could be "Connect to [App]" and the call to action would start the authentication process.

If the user isn't ready/able to connect at that moment, you can let them cancel out and find a way to get back in to finish later, perhaps with a "Connections" tab under a "Settings" area in your platform.

Previous answer, which addressed the design problem on the side of the app where the user logs in with incomplete information:

Consider designing a complete empty state with a checklist at the top, which the user will see until all setup tasks are complete. Show what is possible when the sources are connected (this could also work partially, if some functionality is available with one source connected). You can perhaps provide access to utility menus if the user needs to change their email or other information. Freshbooks has a good example of this state:

Freshbooks empty state

6
  • This is a good approach however the data connection would happen on our platform side, so I would somehow need to fit that all in a modal. The user would not be able to use the third party app at all until they connect their sources. Odd, but that’s what my stakeholder said. – DavidPicarazzi Jan 26 at 22:11
  • Could they start using the app in the "empty state" and make the connections in-app when they're ready and able? Then you would at least have the app installed on their device and could start nudging them toward finishing setup. Would your stakeholder be open to that? – Izquierdo Jan 26 at 23:12
  • So I asked my stakeholder and it was said that the connection would have to be done on our side. So the third party app would create, say an alert “you are missing the following connections” (they would be responsible for that UI. Then when they proceed, our modal would launch prompting them to connect the required data sources. Does that make sense? – DavidPicarazzi Jan 27 at 0:04
  • Got it, thanks. I'm going to modify my answer because I was trying to solve the problem on their side. I see now that you want a specific pattern for a one-item connection. – Izquierdo Jan 27 at 15:13
  • 1
    Hey! Thank you for the response, so the product lead took a peak and it turns out that the solution can be what you propose here. That UI screen shot you added is a good reference. Thank you. – DavidPicarazzi Jan 27 at 20:32
1

Just ask if the user has the 3rd party apps.

Then, create a stepper just as you have, only that dynamically created based on the selection from the user. So, if he chose 1 app you won't even need a stepper, if you have 2 you will have 2 steps and so on.

Something as simple as this will work (of course you can do whatever you want, just explaining the idea)

enter image description here

One thing to note: unless these steps are correlatives (so App 3 needs App 2 and App 2 needs App 1), you'll probably be better with no steps since they're exactly the same task, therefore you should group them together.

1
  • regarding the context, Oura and FitBit are required to get the relative third party app up and running. So, I am thinking it’s more “This is what you need to get started” rather than choose which app you want to connect. They need to connect both. Does that make sense? – DavidPicarazzi Jan 26 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.