back.png

Overview & My Role

UX Designer @ Thrive | Client, Mirion Technologies Inc. | 3 months | Nov. 2019 - Jan. 2020, Mar. 2020 - Apr. 2020

Mirion Technologies Inc. is a radiation detection companyThrive previously helped Mirion design ACCURAD PRD (a personal radiation detector) and its packaging. This time, Mirion came to us with the challenge of redesigning the companion mobile App for this PRD.
 
I worked closely with a UX director and a designer throughout this project. I was primarily responsible for: 
  • exploring different visual options for Home and Event screens
  • creating 1/3 of training videos so that they are ready to be animated
  • curating and co-facilitating the kick-off workshop with 8 clients onsite
  • co-presenting on weekly review session to clients
Animation by me , illustration by Maddie S.
 

Background

What is Personal Radiation Detector (PRD) and What does it do?

Mirion AccuRad below is a Personal Radiation Detector (PRD) that detects radioactive and nuclear sources. It alerts users when a threat is detected by triggering selectable audible, visual and vibration alarms. First responders use it for public events like sports competitions and political gatherings where numerous people attending a single venue, to emphasize the need for reliable solutions to protect against potential radiological threats. PRDs also empower emergency response teams to efficiently detect and assess radiological risks within and surrounding critical infrastructure like government buildings.
 
Below are the pictures of this PRD and some scenarios it appears in. 
Render images credit Thrive Industrial Design team
 
 

The Challenge

How might we redesign the app for the PRD so that it supports the PRD's functions instead of repeating it?

The PRD's screen always show the dose reading it detects and the direction of source in a graph. The previous app's home screen also shows the dose rating in the center in a circle, which is very similar to the PRD's presentation. Mirion team wants to re-build the companion app and makes it very clear that they don't want this app replace what the PRD does, it should only be a supporting device. Therefore, figuring out a new way to display the same information has become one of the challenges.


 

Main screen always show the dose rating in number
 
PRD image by Thrive Industrial Design team, old screen images from client
Radiation dose rating showing in number in the center, similar to the PRD
 
 

The Outcome

A seamless companion app, providing easy and

robust connection between the PRD and smartphones

AccuRad app is the companion mobile interface for the AccuRad™ PRD. It is the bridge between first responders on the ground and command center software, which provides real-time geospatial and radiological data relay so agencies can get access to the information when and where they need it.

AFTER

BEFORE

 

How to Start

One-day kick-off meeting to understand what this PRD app needs to do and get our questions answered

During the 1-day kick-off meeting, clients from Mirion and 2 UX designers and a Design director from Thrive participated and discussed how this App should function and what features it should include.
  • Relationship for first responder & App
  • Phone data is trigger to series number of PRD
  • Chain of ownership is a problem
  • Must be connected to PRD (data key) to access data on phone except training
  • Pin code on device
  • Mixed population of phones + PRDs (how do we manage this)
  • Nothing is stored until event
  • App controls
What We Know
What We Don't Know
  • Encryption protocols
  • Steaming REQ on opposite side – content?
  • User level security
  • Is it accurate to access shift data without the PRD?
  • Mix population phone & PRD – management
What We Think We Know
  • NFC Pairing needs to be a thing if possible (bring your own & government issue)
  • Pin security on APP
  • Multi-states of paired/limited connectivity/etc (define today)
  • Data retention – needs to encrypted on phone

Streaming Realtime Data with Easy Way to Report 

Home page shows most recent alarms, swipe to send events to people who needs to know

Histogram Shows Dose Read Over Time 

Histogram matches the recent alarms and shows how long alarms happened

Options to Add Notes or Photos in Report

The system allows users to create mini reports at the moment with options of adding notes, photos, and recipients 

Videos and Images Training Tutorials

First responders are able to learn how to use the PRD through the training session's video or step-by-step static-image style tutorials
 

The Approach

Discuss and creating user EPICs with clients to determine high-level goals 

During the kick-off meeting, we used the User Story tool to explore the app's functions. This helped facilitating collaboration and discussion between stakeholders, and the format is filling in "As a ..., I want to ... so that ...". We did this exercise with Mirion team and documented 12 high-level stories, which we concluded as epics in Jira.
Epics collaborated with clients onsite

Divide epics into several user stories focusing on how the app Help users to accomplish those goals

In order to better explore the experience from the user's point of view, we created listed and created more detailed scenarios under each epic. Every story is specific to an individual user, goal, and feature. 
User Stories in collaboration with Jeff M. and George R.
 

What Are the Key Screens

Information architecture based on previous discussion and former app key screens 

Since the app should only work when it's connected to the PRD, we built a very broad IA that divides the app's tasks into 2 statuses. When it's connected and when it's disconnected. Besides, we temporarily named the 5 main screen groups as Home, Events, PRD, Resources, and Setting.
Information Architecture Overview created by Jeff M.

Let's have the first round of flows

As we discussed and listed different user stories for each epic, we started building potential interaction flows under each scenario. Based on the information Mirion provided, the app should only work when it's connected to the PRD. When it's disconnected, only the training part in the app could still work.
User Flow created by UX team
 

Iteration, Iteration, Iteration

Challenge here, how much we show on home screen? Starting wireframes for the key screens

In order to explore the concepts for the key screens within the app, we listed related user stories combined with user flows as guidance to start the first path of wireframes. Here I demonstrate the Home and Event, these 2 screens as examples. 
Relate user stories:

1. As a first responder, I need to be notified of events from the PRD so I can respond accordingly.​

2. As a first responder, I need to send events to others so they are aware. ​

5. As a first responder, I want to know that my PRD is working so I can confidently complete my mission.​

12. As a first responder or admin, I want to manage the connection of the PRD with the mobile phone so it is easy to pair/unpair it.​


 

As mentioned before, what to show on home screen so that the app differentiates itself from the PRD and how much to show on it are the challenges. The previous app's home screen has dose rate in center and it's very similar to what's showing in the PRD. With that in mind and the 4 related stories and flows as guidance, we started the first round of wireframes on home and event screens.
 

The PRD shows the dose reading and the direction 

The previous app uses a graph to show the dose reading in the home screen which is repetitive to what the PRD shoes

Home 1: Big Detail + Small card

Home 3: Min Detail & Data Scientist

Concept 1: One list

Concept 2: Pairing device on top

Home 2: Min Detail & Big Card

Home 4: PRD in the Phone

Concept 3: This phone flagged

Concept 4: PRD in the phone 

Home and Event screens ideation collaborated with UX team, wireframes mainly designed by George R.
 

From Inefficient to Optimized

Exploring various visual options to display radiation events with severity of alarms

After showing the wireframes to clients, they prefer a style that combines both scientific and clarification approaches. This is the part I dove deep into exploring the visual options for the Home screen. As I'm the only UX designer working on the Mirion Design system as well, I took the mood boards we explored for the design system here serve as inspirations. A few keywords for Mirion brand style are intelligent, precise, and intuitive
Digital mood theme boards created in collaboration with Jeff M. in InVision 
At the same time, the Mirion system project side was going through the phase of visual exploring as well. Client picked the Analytical direction out of 3 directions. So the screen explorations below are for a device named SPIR Ace, which is one of the 6 totem products Mirion uses to be designed so that shows the new design system. In order to explore consistent visual styles for Mirion's digital products, these SPIR Ace visuals also serve as inspirations here for the PRD Home and Event interface design.
Mirion design system (SPIR Ace screen visual explorations) designed by me with Jeff M.
With inspirations and the most recent wireframes, below are my visual explorations for the Home screen. List of events and grid of events are the main 2 exploration directions. The backgrounds with hexagons are from Mirion's visual elements. After I had 4 first round of explorations, I had a 4-people group review on them and got some feedbacks. Below shows the process of from the most recent wireframes, to the 1st round of hi-fi design, to printed screens with feedbacks pinned on them, and to the 2ed round of design.

Explore Ambiguous to Precise

Makes sense of all visual elements 

One example I show here is the approach how the team decided on the "Send Snapshot" button from 1st version to the final one. At first I made it in orange as that's one of Mirion's main color. But later Mirion indicates that orange would be the color for high alarms so I changed the color to several options including blue and only the outline of the button. 
 

How alarms appear

How alarms match the dose read over time

When scroll the alarms 

When selected contacts

How the collapsed cards expand

The splash screen

Top left and right, and bottom right interactions credit George R.
 

Wait, the Project Continues? 

Hercules challenge here, how to create videos to educate users on how to use the PRD and how to respond to events in 3 weeks?

In order to better visually walk users through how to use the PRD, we were asked by clients 2 months later to create videos for certain training tutorials. We had meetings with clients in France on what training modules needed to make and what stories should them be. Clients provided all the voice content as we gradually built the stories and reviewed what we had, and then we revised graphics and storytellings based on their comments.
Screen Shot 2020-08-06 at 2.41.26 PM.png
Training module PPT deck collaborated with Jeff M. and George.R
We collaborated with an animator on the videos-creating process. He uses illustrator to work on animation so that we created each frame on its own layer within the same scene in AI. Below is an example of how I created the frames of the story "Search mode with Radar". 
Below is an example of final videos collaborated with both the UX team and the animator. 
PRD illustration credit Maddie S. Animation and Voiceover credit Gavin H.
 
 

The Execution

Bringing it all to life

 

FIN

What I Learned

Reflections should be throughout the process not just in the end

Constant reflection is necessary
This is a challenging project as the limiting information I had. Therefore a lot of internal discussions and explorations were involved and we basically re-created the app from scratch. As exploring the unknown areas such as how would they have default contact list and how much information to show if the PRD is not connected, I realized constant reflection is necessary during each step instead of just in the end of each step. Every time we had questions or confusions for clients, as we discussed the scenarios, we almost talked us out of the situations. Later we brought up our questions in reviews, provided our suggestions with clients, and got confirmations. Until today, even we handed off the design to clients, this is the beginning of this app. A lot of iterations and changes should be followed as they finish developing it and testing it with first responders. I would love to know the feedback from first responders who actually use this and how their experiences are. 
How agency push ideas matters
This is the project that really taught me how to efficiently communicate with clients and push the best solutions working in an agency. We had 4 reviews with Mirion throughout this app design and every time we prepared several design themes and would name each visual approach. The way how we presented to clients and which approach we suggested the most need to be curated in advance.
Photo credit Thrive Photographer