This application serves as an educational tool for sales representatives to use with clients in the Learn/Try phase of the buyer's journey. The app illustrates the productivity savings by purchasing a new COBOL Suite.
Sales reps will walk their customers (IT Managers) through the application. These customers are current users of COBOL.
Prior to the app, Sales Reps were using a complex spreadsheet to calculate savings for customers.
Created while at Centerline Digital. Developer: Zach Stowell; Project Manager: Jennifer McMinn
Before: Spreadsheet calculator
The ask was to turn this spreadsheet into an easy-to-use iPad app. It was challenging, considering the complexity of the spreadsheet and number of questions. Based on this information, I split the app into three main sections, Basic calculations, Advanced calculations, and Results.
User flow diagram
Based on the client spreadsheet, the developer and I worked through the user flow and wireframe sketches.
Keynote wireframe prototype
I created a quick prototype of the wireframes in Keynote to give the internal and client teams an idea of the user flow and interactions. By prototyping interactions before moving to design, the internal and client teams were able to provide feedback early on that I could implement in the design phase. For example, aligning the calculator box with the selected question wasn't feasible from a development standpoint.
Style tiles / Component library
As part of the visual design phase, I designed two style tiles to give the internal team an idea of how components may look in the application. I first implemented version one, however having the entire application be on a dark background was challenging for contrast and readability. I then created version two to address those issues. Having a light background made contrast issues easier to address by allowing me to use more colors from the branding palette.
Since these were for the internal team, I kept version two up to date as I worked through designing the app. It served as a great asset to hand off to the developer, showing colors, text styles, and components.
After: Application design
During the design phase, I worked closely with the developer to design screens and assets as he needed them.
App icon in context
Basic calculation screen
Advanced calculation screen