My Role: UI/UX Designer
Tools Used: Sketch, Adobe Illustrator, ProtoPie
I joined the Rapport project after the original team had developed and tested this product, and the team was about to launch a new version to test on a larger scope. However, due to fact that they did not have designers, they only had a web application prototype with almost no visual design.
Since this application is mostly used in a hospital environment, it would be a lot more convenient for patients to view the report on a tablet rather than on a PC / laptop. Moreover, with the touch screen, users will have a much easier interaction with the tablet, especially, for pediatric patients and their family. After this initial disusction with the team, my task was pretty clear: to modify a web application into a tablet app.
The original prototype looked like a backend system for doctors to easily view the report without the distraction of any visual design. However, I think having a more approachable visual design for the user interface would help ease the nervousness of the patients. Especially, since our target users are mostly pediatric patients, a colorful design might help to draw their attention.
For the duration of this project, I focused on redesigning the interfaces and interactions, attempting to provide better experience for future users.
Rapport is a novel tablet app that organizes radiology reports and provides real-time explanations and visualizations for the medical terms through information cards. Based on collaboratively curated points of interest, the application generates a set of discussion topics to help patient families append notes or questions they would like to discuss with the doctor.
For more detailed information on the research and ideation phase, please refer to this CHI Publication.
I wanted to learn if there were anything that needed to be improved from the first prototype, anything from user flows to the icons used on each page. I mapped my research using the following methods:
Through the process, I came to a clear understanding of what should the app achieve. The first prototype is pretty low-fidelity visually. Although, the flow and layout of the app was very clear, there were still a couple of problems I found with the prototype.
As you can see from the screenshot below, there is pretty much no design for the first prototype. This app is intended for pediatric patients and their family, but the visual design does not seem to be aiming to the targeted users.
From the interview with the project team members, I understood that patients actually have no access to the pictures form the test. Taking out the pictures gives the side bar more space, which might be valuable to include more information on there.
"My Notes" section is a place where users can add on their own notes to a specific info card. Many users had given positive feedbacks on this function, saying that it is very helpful to keep track of what they think is important and help them prepare the meeting with doctors.
However, users would have all the info cards which they had checked shown on that page, leading to a problem of losing track of the most important ones when they have opened a large number of information cards. In other words, there is no filter for importance for the information cards.
Additionally, users can only write down notes after entering this section and found the right information card. This showed a problem of low flexibility with the design.
Lastly, when users stared an information card, it would then show to the blank space on the left, which could also lead to a cluster after marking down a bunch of information cards.
I started by sketching out the layout, interactions, ideas and alternatives for the screens. In addition, I noted some questions I found when actually sketching out the display, such as, the position of menus, what is a better to show the info card and ordering for report summary etc.
I then brought the sketches to the project team members to discuss my questions and ideas. After a few rounds of discussion with sketching, I started to create a high-fidelity design using Sketch.
Since it is a tool for pediatric patients and their family, I chose to make the overall tone light and playful. I also followed the material design guidelines because it is an Android tablet app.
I added profile section on the side bar to give user an extra layer of confirmation that these are their reports. I chose to use different color bars for distinguishing each section as it would add more playfulness to the page.
I chose to have a fixed area for the information cards for visual consistency and added "bookmark the card" to help reduce the cluster in "My Notes" section. In addition, users can now add notes associate with the info card while reading through the information.
Users now only can see the info cards that they have marked previously shown in the "My Notes" Section, with options of sorting and filtering the info cards. Each card shown here has expert and exam date to remind user of the context.
With the redesign of this user flow, users would be able to have more efficient discussions with their doctors.
These two screens are intended to handle the edge cases, in other words the "404" pages.
After created the interfaces, I wanted to give the developers more guidance and reference to the interaction and flow. So, I used ProtoPie to create the following three interactions with micro-level animations.
When user taps on the date that refers to another exam, that exam will be highlighted in the side bar.
When users tap on a medical term, an information card will appear with meaning and a 3D interactive model for user to explore.
Here, it showcases the importance of the cards, which is also denoted with the different red on the side bar.