Luminostics - Private Self Diagnostic

Luminostics is a molecular-level disease testing application that allows patients to test themselves with privacy in the comforts of their home using their smartphone. More specifically, Luminostics is a low-cost smartphone-based platform for highly sensitive point-of-care testing with persistent luminescent phosphors.

I was tasked with the end to end design of a mobile application suite of three applications, front end development, user journey, branding, and creating 3D model animations to provide absolute clarity of the process to the end user.

Client

Luminostics

Type

Product design

My Role

Product Designer / FE Dev

Year

2015

Process

Challenge

All three applications shared the same data model and needed to be able to communicate between each other. The main challenge was creating a seamless way to select and set which test each application would run with minimal interaction.

Outcome

UI Design

Due to the significance of this platform and being that the majority of work done is for an internal application, I can only show very limited pieces of the applications that would not provide competitors any information on how the platform works internally.

  • Sketch
  • Xcode

Command Center

The Test app's home screen acts as the command center for the entire application suite. From here you can create tests, edit tests, run tests, and set which configuration the Demo and Preview apps run. You can also run multiple tests in sequence with Continuous Imaging, analyze already captured images, and perform tests on multiple different samples with Robot Capture.

Setting the Configuration

Setting which test the Demo and Preview apps will run is just a tap away. By using the same space as the navigation bar, the user is not taken to a separate screen and can simply select the target app and choose the configuration to run.

Unlocked Camera Control

Along with the various settings defined by the test's configuration, setting the camera's format is something that must be compared visually to understand. This meant creating a interface layout for the camera that provided this control with a minimum footprint. The bottom left button toggles the camera format information and selection to slide onto the screen while still giving the majority of the interface to the camera's preview.

Running a Sequence

A very unique and powerful feature of the Test app is the ability to run a sequence of tests in the same session. Global settings such as naming helps distinguish the tests while providing the context they were performed in. To run multiple tests, select the tests from the list in the order to run and press record in the top right to begin.

Particle System to Mimic the Underlying Technology

Gaining the trust from the end user is critical with an application of this caliber. I wanted to the user to feel confident in the technology as soon as they launched the app. To do this, I created a particle system to mimic the phosphorescent particles used by Luminostics.

3D Demonstration

In order for the test to be performed properly, the user must go through a series of steps to prepare their sample and phone for testing. The strongest possible way of communicating exactly what to do was to show a video demonstration. I created a series of 3D models and animations to clearly demonstrate each step.

Understanding Progress

Testing can take awhile and the progress indicator may appear to be "stuck" while the test is underway which could lead the user to believe that the app froze. In order to prevent this misinterpretation, the particle system is used to provide visual feedback that the app is still running.

Providing Feedback & Helpful Actions

Once the test has been completed, the user is presented with the test results (details not shown), along with a map to connect them with doctors or clinic, and actions for them to transmit the result or contact the team for support

Other work

Want to create something awesome? Drop me an email.

→ milesdavidlee@icloud.com