My Trade Programs Mobile: Ordering

product strategy, information architecture, product design, user experience design, visual design, usability testing

Currently, I am unable to show visuals for this project in public. However, I can show them in person or through a video call.

Client
Management Science Associates Inc. - Information Management Sciences Division
Team Members
Kimi Chesko, User Experience Researcher
John DeGore, User Experience Designer
Laura Nave, Prototyper
Matt Tamasy, Product Manager
Duration
February 2015 to October 2015
Who is Management Science Associates?
Management Science Associates (MSA) develops analytical software and information-based systems specializing in business analysis, data management, and IT services. The Information Management Solutions (IMS) Division focuses on services and products for the Consumer Packaged Goods industry. IMS helps Retailers, Distributors, and Manufacturers automate their workflows and make decisions by forecasting outcomes.
Project Background
IMS offers a web-based E-Order app that allows a Sales Representative, from a Manufacturer, to place restocking orders for their products digitally. Usually, orders placed by submitting a paper form. Using a paper form is prone to errors because it’s typically done by hand on site at a store and then sends a scan of it to a Distributor for fulfillment. The Distributor will look the scan and manually enter it into their system. Then the items needed will be added to the Distributor's delivery schedule. The E-Order app saves time because it is processes orders faster. An order placed through the E-Order app doesn’t have legibility issues and is entered directly into the Distributor’s system.

The E-Order app is efficient at placing orders, but it’s not as convent as using a paper form. A Sales Rep usually wants to get the specifics of the order taken care while they are at the store, and the E-Order app isn’t good for that. The interface is difficult to use on a mobile platform, and Sales Reps don’t like taking their laptop into the store with them. So if they use E-Order they write down the order while at the store and enter it into the app later. From a Sales Rep’s point of view, it’s easier to use the paper form. 

To alleviate the gap between the E-Order app and Paper forms. It was decided to add an ordering component to the My Trade Programs Mobile (MTP Mobile) app. Adding an Ordering component to MTP Mobile provides the conveniences of the paper form and efficiencies of the E-Order app.  The ordering feature will enable a Sales Rep to submit an order while in the store, and it will get directly entered into a Distributor’s system.
Process
Market Research
A couple of years before the start of this project the Product Manger had an iPhone ordering app prototype created to demo with clients to gauge interest. After demoing it he and realized it wouldn’t successfully meet the needs of the potential clients. The Product Manager shared the issues he identified. Then, I reviewed the app and potentials competitors in the space to determine the best features and pain points. I also looked at consumer shopping applications and websites.

It became apparent that the variation of quantities a product could be ordered in and the hierarchies of product categories were going to be the biggest challenges. So I worked with the Product Manger to reach out to a variety of IMS clients to learn more about product category hierarchies across markets and how each client varied in a market. This research provided me with enough information to start developing the ordering component for MTP Mobile.

Iterative Design
I started out by taking the requirements and creating a set of wireframes that provided the general flow and fit in well with the established interaction patterns in the MTP Mobile app. Then, I reviewed it with the Product Manager. He identified areas of the design that he thought were confusing, and then we would work together to sketch out potential solutions on a whiteboard. When we came to a consensus, I updated the wireframe to reflect the changes. We went through a few iterations of this cycle. Then, the Product Manager shared the wireframes with a client who wanted to pilot the app. That client became our resource for usability testing and eventually used a beta version of the application in the field with a sample group of their Sales Reps.

The pilot client’s Sales Reps had been using an internally built iPad app for order fulfillment. There was one feature from that app they deemed vital to their workflow. It showed a product’s shipment history for a store. The Product Manager and I agreed this was a great feature and I started designing it. The feature in their app was a little clunky. It used on-screen buttons to cycle through the information. My goal was to avoid this and provide a way to view a product's history that could quickly be accessed and then hidden. I went through a few iterations of the design. Once the product manager signed off on the design, I started to help develop the protocol for usability testing.

I worked with the UX Researcher to develop the protocol for the usability test. This usability test was also an A/B test. We wanted to try a couple of options for choosing the quantity of an item to add to the order and how to communicate an order's status. The Prototyper built two separate prototypes to include the different options. The UX Researcher facilitated the tests, making sure to evenly divide the use of each prototype between the test participants. After two rounds of usability testing, we identified that some labeling needed to be more explicit. We also learned which options between the A and B versions of the prototype were the most successful. I updated the wireframes to reflect the findings and shared them with the development team. I worked with the development team to implement the interface of the app by providing feedback as they built it out.
Conclusion
The pilot client was extremely pleased with the Ordering feature and rolled it out company wide right after the beta period was over. The ordering feature utilizes a lot of the interaction patterns that were already in the app. So, it doesn’t feel like a separate experience from the Enrollment feature. Another feature that I didn’t mention earlier is that the client can choose which features they want. So the pricing of licensing the application is flexible depending on their needs.
Back to Top