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.
Step 1. Research and Salesforce Data
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.
Step 2. Brainstorm Sessions
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:
Step 3. Research on User Characteristics
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:
- Pushing some content below the fold on big categories, but we are confident in the smoother navigation to lead users to the content
- Disappointment from Past Users who are used to the old UI, but this will be minimized from the transparent design update and minimal animations
Step 4. Targeted Screensavor
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.
Step 5. Redesign UX
Below are the redesigned screens designed over the span of 2 weeks.
Step 6. Site Visits
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.
- Ask them to find *Specific Content*
- Time them and take notes on what buttons they are clicking to get to the *Specific Content*
- If they tapped the wrong button, ask them later why they thought the *Specific Content* was under such button
- I asked 12 patients from the 2 hospitals. With such note, I had the very strong understanding of the UX.
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 1: Do not change the background and only decrease buttons
- Solution 2: Give them a brochure with list of all contents and their locations
- Solution 3: Do not update
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!
- Provided solution and designed separate UI for various departments of hospitals to show more relevant content under each departments
- Remodeled the UI to regroup the categories to improve user experience and show top hospital content to increase user interaction
- As for August 2017, the daily usages improved by over an average of 12%
- The content that was sponsored by hospitals increased an average of 7.2% and resulted in a revenue increase
- Huggies, a diapers brand, contacted us after they saw the new update of specific UI for the Mother and Baby Department. They want to put coupons and promotion videos on our Mother and Baby Department tablets.