The Case of Initiating Product Changes
Every client in the system could be upgraded or downgraded by our in house sales representatives. The way this would work is that if a client has a specific product, sales can access their products page and request a product change and a new "order" would be sent to the client for their approval. Before this project, this request was made on a web page on the corporate website server which had an authentication but was never part of the web application. The main business value from this work was to automate much of these requests so that a client can be upgraded, or downgraded, by the product, and initiate the change for the client's account, and also sales commissions would be automated at the same time. I was in charge of the whole project, right from interaction design, visual and front-end, and then we also conducted successful user testing to get feedback on the minimal value product we had set to achieve in the first place.
The change order page was kept in the corporate site server. This page was very simple, but posed usability issues. The left links signified tabs as various upgrade or product options and the most important usability problem was that the user had to put in the client information each time a change was requested.
No upgrade path or documentation was available to us. It was important to meet with the users who made a change order possible. Sales and Client service representatives in the company who used these pages were the real users. With help of interaction designers, we created the process flows for the actual product types and to what they could be upgraded to. Also the path to an upgrade for every user in the company and what pages were needed to be built was designed. Lastly, the page flow was created for every operation on the page.
These are some of the low fidelity wireframes that were created by my team in order for us to do some initial user testing and also chalk out the interactions on the page. It was also necessary for the product management to sign off on the labeling for this page. Most interactions were created on the these wireframes.
Much of our style guides and UX standards are documented and are being prototyped on a daily basis by our front-end developers. The elements on this page needed wireframes for the initial interaction and the process that were involved, but we could dive straight to code on the basis of all elements that were available in the UI framework which was handled by me. I was very satisfied with the final product and we received good feedback from product management, sales and client services for this feature.