Fall 2018

My Role: UI/UX Designer

Tools Used: Sketch, Adobe Illustrator, ProtoPie

 Challenge 


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.



 Background 


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.


intro

For more detailed information on the research and ideation phase, please refer to this CHI Publication.



 Research 


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.

 Key Finding #1: No Visual Style 


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.


old design


 Key Finding #2: Pictures Are No Longer Needed For Side Bar 


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.




 Key Finding #3: My Notes Section Was Not Flexible 


"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.


my notes section

 Design Iterations 


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.


first draft

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.




 Final Design 



 About, Summary and Full Report Screens 


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.

about/summary/full report

 Info Cards & My Notes Screens 


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.

info cards & my notes

 Edge Cases 


These two screens are intended to handle the edge cases, in other words the "404" pages.

404

 User Flow 

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.



 Checking A Previous Exam from Summary Page 


When user taps on the date that refers to another exam, that exam will be highlighted in the side bar.

check my notes



  Checking the Meaning of Medical Terms through Info Cards 


When users tap on a medical term, an information card will appear with meaning and a 3D interactive model for user to explore.

check my notes


 Adding Notes in "My Notes" Section 


Here, it showcases the importance of the cards, which is also denoted with the different red on the side bar.

check my notes


 Lesson Learned 





Thank you