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.  

spreadsheet_ex2.png

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.

style_tile2

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

Loading screen

Welcome screen

Basic calculation screen

advanced_screen_mockup.png

Advanced calculation screen

Results screen