Raea Modrell | UI/UX Designer

Inform Diagnostics

Project Specs

Role: UI/UX Designer

Timeline: Four Weeks 

Platform: iOS/Android Mobile & Tablets

Supporting Team: Business Analyst, Project Manager

Constraints: React Native, external APIs


Context

The client, Inform Diagnostics (InformDX for short) specializes in anatomic pathology services, collaborating with medical practices nationwide to analyze medical samples and deliver rapid diagnoses. We were brought in to streamline some of their processes in daily operations and address common challenges by developing a mobile app that met their specific needs. 

Challenge

 Design an MVP (minimum viable product) that would service users across both the health care administrative side (client's customer staff), and InformDX admins, lab staff, and in-house customer service reps.

The agreed upon requirements were as follows: 

  • Case Status Tracking
  • Discrepancy Resolution
  • Schedule Specimen Pick-Up (Scheduling via third party API)
  • Order Supplies
  • Direct Messaging (Synchronous Chat via third party API)
  • User Management

My involvement began during the initial phase known as "Sprint 0," where I participated in workshops alongside client stakeholders and our business administrator. In this stage, our primary objective was to collect additional requirements and to refine any already agreed-upon requirements for the MVP. This was also the stage where I requested brand/style guides from the client to ensure that the application’s visual identity was on point.


Process & Solution

After requirements were set and user stories were created,  I visited the app store to download a few medical apps, conducting a light process analysis to glimpse their user flow and overall information hierarchy. While the feature sets between the apps I examined varied, this process was helpful in getting my mind around the task at hand. 

Next, I began the process of sketching out some rough ideas to think through the overall hierarchy and navigation. Knowing that the application would be developed in React, and that the client leaned more towards the look and feel of iOS apps, I made the decision to aim for that sort of native experience. I kept this in mind as I explored ideas.

From here I designed wireframes to define a layout and piece together each part of the app. Wireframes are always valuable in communicating ideas and solutions in order to gain feedback without focus being weighted down by the extra details that come with fully styled screens. I stitched these wireframes together into an InVision prototype and presented to the client to gain feedback and drive iteration. This process helped iron out any pain points in the flow early before incorporating styles. 

Upon receiving sign-off on the wireframes, I proceeded to create high-fidelity mockups. I delved into Inform Diagnostics branding materials, style guide, print samples, and website. This exploration led to the creation of a color palette and type scale for the app. For icons I aimed for ubiquity rather than anything custom. Given the short window I had to design this was serviceable for the MVP.

Reflections

Reflecting on this project today, I believe it demonstrates my strengths as a designer to synthesize business requirements into an intuitive design that provides value to the end-user. In my time working as a consultant, I don't always anticipate further cycles to iterate and enhance beyond a base MVP release. There are budgetary constraints when it comes to B2B engagements and this project was no different. Inform Diagnostics was pleased with the app we shipped and I am confident it provided value in streamlining some of their internal processes.

Next Steps

We discussed additional enhancement to allow users to view more more detailed Case information within the app. This would have included the ability for the user to view notes and photos. This seemed like a logical place to go next with the product and I would have liked to explore this had I been given the opportunity.

Using Format