Duration: 2017 Summer at Midtown Atlanta, Georgia
Background: Bioscape Digital is a health IT startup that makes tablets for hospitals. The tablets are meant for the patients and consist of educational videos about symptoms, insurance, etc.
Key Method/Tools: Site Visits, Salesforce, Storyboard, A/B Testing, Sketch, Principle
Summary: Researched and created storyboards to implement a unique UI for each department under a hospital. Redesigned and reorganized the UI for the users to find contents easier. Worked with Data Scientist, Engineers, and CEO.
Hospitals are sending tons of new content to put on our tablet, and the tablet UI has been getting cluttered and disorganized. Patients thus are having difficulty in finding specific content such as educational videos. How might we organize the UI in a way that’s easy to find relevant content?
Below are the original UI and basic notes. I first discussed a lot with Account managers, familiarized with the current tablet UI, wrote down any feedback that they heard during their site visits, and categorized various feedback into potential areas to improve.
Example Feedback: Users don't know the difference between Health & Wellness and Going Home?; Users are confused about Primary Care Sign up and Patient Portal Sign up?; Users are unclear about which to click to get to a health educational video.
It seemed like the basic issue was on buttons on homepage UI. A data scientist and I also used Salesforce and Excel pivot table to understand which features were being used and weren't being used. I cannot attach any specific Excel screenshots, but I have imported a heat map of usages and some summary slides that I created to analyze trends and understand the usage distribution:
The heat map reveals which categories were being more used through a darker blue color. I created such through importing data from Salesforce under Medical City Plano, summing usage time of all content under each category through Excel pivot table, and creating the data visualization on Adobe Illustrator. When I finished creating heat maps for 50+ tablets under Medical City Plano, I realized that many categories showed no significant trends - although games and insurance were always dark blue, other categories were completely inconsistent.
The company ran brainstorm sessions with me, 2 front-end developers, a data science intern, CTO, and the CEO himself. The CTO brought up the idea to recombine data according to departments. This idea of separating data according to departments, e.g. Emergency Department, Cardiology Department, Pediatric Department.., was apparently brought up before, but it was never passed as it takes too much effort and company resource to develop multiple platform for all the departments out there. However, I saw the potential merit and quickly requested data on which tablets belonged to which department and created the visualization according to departments. Below is an example from Piedmont Medical Center:
The data visualization revealed the following: all specific department had very similar trend across various hospitals, and all individual tablets under a specific department also had very similar trend. This meant that we can take advantage of these trend if we separate product UI for each department. To further clarify the merit in terms of the user, I created a storyboard:
The CEO approved my request to pursue the redesign. Before jumping into the designs, I took the time to break down what strong characteristics each department has. Our tablets are currently in 9 departments, and here are the breakdowns:
After the user characteristics, I also made a product map with notes on what to change. For this, I worked a lot with account managers who directly contacted many of the patients they interacted with in the past. The CEO, CTO and I also ran brainstorm sessions as well. Here is the final breakdown:
Tradeoffs we're allowing:
Example screensavers that I created using Adobe Aftereffects:
I spent some time to design more specific screensavor. I actually went to a site visit at Atlanta Medical Center (South) to ask for feedback and make immediate changes.
Below are the redesigned screens designed over the span of 2 weeks.
To test the prototype, I visited Atlanta Medical Center North and South to talk to the users about the product. I prepared case questions to test their navigation skills on my new design.
I noticed a clear improvement in their performance both quantitatively and qualitatively, where the overall time decreased and there were less confusions within the navigation. However, I faced some problems.
3 users refused to take my tests, because they all thought the new UI looked too different. They told me they were satisfied with the old UI and did not want any changes. This was unexpected, and the CEO helped me organize a group meeting, where I presented the problem and possible solutions:
Solution 3 was immediately taken away, since the new UI had visible increase in the usages and simplicity of our product. Our CTO decided we pass both Solution 1 and Solution 2, where we keep the design elements as similar as possible to the previous version and we would hand out a brochure to ease the transition to the new update.
I informed the IT team to set up an experiment to track click thoughts specifically on Hospital Videos to constantly update the top 3 content on each categories. It was definitely very interesting to take feedback from real users and also learn to handle negative reception from my designs in the real world. I handled such from the large positive receptions by a lot of kind users who are excited about our product and its future updates. I am glad to be part of Bioscape Digital's milestone and hopefully can see them grow tremendously to increase patient engagement and experience at more hospitals in America!