Product rec

Done for

Allconnect

Art Director

Dustin Putnam

Categories

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 recommendation that best fits their selections. 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

1
What activities do you do online?

heavy gaming: more speed
streaming: medium speed
browsing: less speed

2
How many devices do you connect at once?

More devices mean more speed

3
What’s most important to you?

Is the user speed or price centric?

4
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.

Interaction sample

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

3rd step

At first, 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 calculated by based on the highest speed for the most economical price.

4th step

The last step is for the user to put in their address. We only need 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.

RECOMMENDATION PAGE

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.
SEE MORE WORK IN THE  Serious ui  SERIES