I was the lead UX/UI person for this application along with my two other teammates who were assistant UX and Project Manager. We started with reviewing the information that was sent over by the client. These items included initial wireframes and a project brief. We leveraged user interviews that we had done for previous projects with this client to inform our UX. With this knowledge, we began identifying areas of improvement and mapped out the existing workflows.
(Above) User Personas
(Above) Pain Point Map
(Above) Mapping out existing workflows
We then began brainstorming. We started by taking a deeper look at the current workflow that existed in the preliminary wireframes. It was then that we broke down the app into workflows and started dissecting the app. We looked at the setup flow and then the main workflow. We then came up with ideas for simplifying these flows.
(Above) Brainstorm Illustrations – Sprint: Creating an Intervention
We created wireflows or maps of wireframes to present our ideas to the client. We wanted to show where each screen came in. This was a very handy deliverable to pass off to the developers who wanted to understand our prototype in more context.
Our first step in visuals was translating our low fidelity wireframes into an iOS framework. As part of our task, we needed to leverage iOS user patterns wherever possible. We started with a base iOS prototype. Our next step was defining our visual design style and then our last step was to optimize the UI for showing as much data as possible while maintaining large hit areas.
(Above) (1) Low fidelity wireframes (2) iOS framework set in wires (3) Round 1 visual design (4) Finished visual design