We created this web app to allow contractors to quickly order supplies for roofing projects from their mobile devices. The idea behind it was that ordered the products would be so easy that the user could do it riding in the truck between job sites. For this project, I went from ideas, to sketches, to wireframes to a fully-functional prototype.
I started on this project under the direction of the client, who was clear that he wanted certain questions asked to the user to help them create their quote for roofing supplies. I sketched a user journey based on these questions, then quick screenflow drawings, and finally wireframes.
After the client was satisfied with the way the wireframes looked, I applied the style rules we had written for another project, Security Partitions. To make things easier for the developers to understand, I made sure to create all the links, animated transitions, and possible screen outcomes.
The crux of the questionnaire design was asking whether a user wanted to add supplies to their order, then asking them how much of the supplies. We calculated the suggested quantity based on the number of shingles they desired.
We put everything together, but the more the client added items he wanted to sell, the more repetitive and frustrating a questionnaire became. I had designed a progress counter into the original questionnaire, and when it became "question 10/22" it seemed like a taunt rather than an encouragement. I started trying to think of a more efficient way to meet the client's goals.
Then I realized what we were creating was just a shopping cart. And we didn't have to make it so extensive. I revised the design to ask the basic questions, and then allow the user to add what they liked through a quick scroll of all available products, saving over 10 screens!
They now only need to check whether they want to add the item, and if they do, suggested quantities would be added. They could edit the quantities if desired.
