ROSIE CHEN
Admin Portal allows clinical users to view and manage test results and patients information.
Lead the end-to-end design through user/design research, wireframing, interaction design, UI design, prototyping, usability testing, and cross-team collaboration.
I worked very closely with the PM to understand the business goal, identify user needs, and facilitate usability testing, and the Engineering team to understand the technical constraints.
Aug 2019 - Dec 2019 (5 month)
BrainCheck provides reimbursable neuropsychological tests for physicians to aid in identifying cognitive health for their patients. A few years ago, an Admin Portal was built for clinical users (physicians, nurses, org admins) to see and manage patients' test results and patients' information.
However, since it was released, its user engagement has stayed low. To improve user engagement and cover the needs of this growing business, I helped redesign the Admin Portal.
I first worked with the PM and Sales team to clarify the issue of low user engagement, and here are what I found:
Through Google Analytics, we noticed that there was a high drop off rate. Most clinical users couldn’t find what they want, which in this case, is the test reports from the Admin Portal.
By talking to the Sales team, we learned that most clinical users prefer to contact the Sales team to get their reports by email, because:
Contacting the sales team is faster than browsing the Admin Portal.
Clinical users can download the reports from their email directly, which was convenient for them to upload the reports to their EHR (electronic health record) later.
.png)
We identified three things we could do to increase the Admin Portal's usage and reduce the workload for the Sales team:
.png)
Update the UI and visual style to improve the readability and brand identity
.png)
Optimize the UX to help users quickly find the test reports
.png)
Improve the cross-platform experience between BrainCheck platform and EHR system
The PM helped define the release timeline. For phase 1, we decided to update the Admin Portal's entire UI, with a focus on improving the workflow of finding the test reports. For phase 2, we focused on improving the cross-platform experience.
.png)
Design Research
By interviewing the Sales team, I learned that users look for reports by the patient name and test date. Sometimes, users only look for reports for specific tests or the one that was done by a particular test admin.
However, by auditing the old Admin Portal, I noticed its user flow didn't quite match users' mental model. The only way for users to find the test reports was through the patient profile page.
.png)
Old user flow. Once users log in, they arrive at Manage Users page (left). To find reports, they click a user name to navigate to the user profile page (right) to browse the available reports.
Solution
To better help users find their test reports efficiently, I proposed a new site architecture, a search function, and a filter feature.
This new site architecture prioritizes the need to access reports for users quickly.
When logging in, users now see the reports organized chronologically instead of alphabetically. This is more closely aligned with a clinical user's mental model, because they are often searching for recently administered tests. We also included search and filter functions to help with more advanced queries.
.png)
Proposed new landing page.
1.
Searching reports by patients' names are the most common use case. So the search bar is placed in a prominent place.
2.
.png)
Filter in Manage All Test Results page
3.
The table layout helps users scan information quickly. The content of the table, from left to right, is arranged according to the importance of the information.
4.
We also include Download and Print features in the table. Clinical users can access these features without opening the report in a new tab. This feature was part of improving the cross-platform experience. However, by considering its high-demand among users, PM and I both agreed to include it in phase 1 release.
A button dropdown that allows users to view, download, and print the test reports
Patient list page. Users access this page from the main nav.
Patient profile page. Users can access this page from the patient list page.
Add new patient form. Users access this page from the CTA on the patient list page.
Questionnaire result page. Users access this page from either the Report list page or patient profile page.
From this page, users will be able to access the Testing App.
Design Research
By interviewing the domain experts, I mapped out a typical workflow of how our users use BrainCheck product:
.jpg)
To improve this tedious experience, our product team decided to minimize the steps by adding Download report, Print report, and Snippet features to the Admin Portal. Snippet is a feature that auto generates formalized and comprehensive test details to help clinical users get reimbursement. Clicking the Notes button expands the table row and reveals the Snippet and note-taking features.
.png)
Snippet, a feature that auto generates formalized and comprehensive test details to help clinical users get reimbursement.
1.
Since clinical users usually type in this kind of content in the patient chart as a note, we decided to put the Snippet feature under the Note tab.
2.
Users only need to click to copy and paste the information into their EHR.
Due to the time and budget constraints, we released phase 1 once all stakeholders approved it. After the first release, we heard lots of positive feedback from the market. The new site architecture and UI significantly reduced the frustrations for clinical users to get reports. However, we also heard some frustrations about the table and filter interactions, and some styling ambiguity. We decided to include the iterations in the phase 2.
Feedbacks we heard:
.png)
Most clinical users are not that tech-savvy. They didn't know how to use the button dropdown.
Buttons usually trigger actions. Some users didn't expect to see the row expand after clicking the Notes button. They also didn't expect to see functions other than taking notes.
Iterations:
Instead of using a button dropdown, I decided to put the View and Print actions upfront.
Instead of using a button, I used a down-arrow to indicate the row expansion and encourage users to better discover the Snippet feature.
Previously, I didn't consider what the layout would look like if users applied multiple filters. Although we still need data to see how users use filter options, the previous design was not scalable. Therefore we moved the filter chips to the left, so that it takes the full column row.
Iterations:
We also optimized the Admin Portal on the iPad screen for those who prefer to use one device to access both the testing App and Admin Portal.
By comparing the month before and after the release of these improvements, we found that:
Always think about different screen sizes when designing digital products.
Do not just focus on MVP, but also think about the future and design with scalability in mind.
It's ok to have a non-ideal design process. But no matter what process it is, always ask why and involve users' voices. It might be a direct quote, it might be a FB comment, it might be a question that pops up during a sales call.
As the only designer in the team, I am the source of truth for the design. Be confident, reflect, and keep improving.