Product Rec

Done for


Art Director

Dustin Putnam


Product, Web, User Experience, User Interface

Allconnect lets users browse through multiple broadband internet providers available in their location all in one place. The product recommendation tool would allow a user to answer 4 quick questions to get a plan recommendation that best fits their needs. It gets rid of the hassle of finding the available providers in their area & looking through 3+ provider websites to try to find the best value plan with the most reliable provider.

Four Steps

What activities do you do online?

Heavy gaming: more speed; streaming: medium speed; browsing: less speed

How many devices do you connect at once?

More devices mean more speed needed

What’s most important to you?

Is the user speed or price centric?

Where would you like service?

Providers & availability depend on exact addresses

Recommended for you

The best fit for you + similar plans from other providers

1st step

The first step is the only multi-select step. The problem became figuring out how to treat these multi-select buttons when the next 3 questions auto-progress to the next page. I settled on making the icon reinforce the selection for every button pressed and treating the actual button more like a checkbox than a button. If someone deselects an option, the icon switches back to the icon correlating to the last chosen option.

2nd step

The second step begins the first of the auto-progressing questions. When a user clicks a button, the number of circles in the icons will correlate with their selection before progressing them to the next step.

View an interaction sample on YouTube

Or see all of the product iconography I created on the Allconnect Illustrations page.

Interaction sample

See all of the product iconography I created on the Allconnect Illustrations page.

3rd step

At the beginning of the design process, the third step asked for a users preference: speed or price. After debate, we added in best value because more people are concerned with price than speed. Best value is based on an equation evaluating the highest speed for the most economical price.

4th step

The last step requires the user to put in their address. Allconnect only needs street & zip for an accurate address—the less form fields, the more likely someone is to make it through to the end.

The load time can range anywhere from 10 to 60 seconds, depending on the API speed. To compensate for this intense wait time, I created a loader to reinforce the idea of personalization. It spews back all of the selections that were made, their address & the 30+ logos of providers that partner with Allconnect.


From the modal, you are landed onto an HTML recommendation page. The content reiterates the choices for a touch of personalization, followed by the recommendation.
Below the recommended plan, you can send your results to your email & view similar plans.
If you’re still unsure of which plan to get, you can call into the sales center.
If you’re more research oriented, you can view articles related to your recommendations.