iOS app for Fortune 1000 Medical 2017-12-07T02:40:38+00:00

Project Description

Fortune 1000 Medical Device Company

IOS APP TO HELP NURSES CAPTURE PATIENT & PROCEDURE DATA

Situation

The client is the USA leader in medical device technology advancement.  The iOS app our team was involved with sought to eliminate the archaic nurse’s clipboard and replace it with a digital method to store patient data so that doctors could analyze this info to help inform their practices. This was not a possibility because this critical information was being stored in paper.

  • User Interface Design

  • Pain Point Analysis of Existing Wireframes

  • User Experience / Workflow Development

Tasks

  • Analyze existing wireframes and identify areas for improvement.

  • Design UI system for the app using HIG elements for quick development.

  • Create clickable prototype for client review using Invision App.

  • Brainstorm UX workflows with a focus on Human Interface Guidelines.

Action

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.

(Above) Wireflow

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

Results

The client was ecstatic with phase 1 of the app. The interfaces were seamlessly executed by the client’s development team and the app is now live in the iOS app store.

Click to view live

Go to Prototype