Case Study: Leveraging Experience of Resource Acquisition
Web Design | UX / UI
In 2020, my team in Evoke Giant helped a pharmaceutical client launch their campaign website to provide information and support for healthcare professionals (HCP). The entire project is divided into different phases of iteration to keep leveraging the user experience post-launch.
As a UX/UI Designer for this brand, I’m responsible for refining design and updating the Design System. In this case study, I’m going to tell the story of how I help to improve the user experience of the Resource Library of the website providing access to supporting documents to the users.
Discovery
Challenges and Problems
After the launch of the Campaign website for HCP use, a range of additional content was added to support users with dive deeper into the information and get access to the tools needed for the following practice. With this expansion, the original design of the library page couldn’t keep up with the increasing number of resources it’s hosting. Thus it needed an improvement itself for a better experience for the users to get access to and retrieve the information they seek.
The library was originally designed to host 2–4 featured resources, all PDF and downloadable. The cards were treated generously with space, allowing each to be separated and stand out nicely, and be visible without having to scroll away much. But when the number increased to over 6, the pattern started to hinder the experience of the page.
And the number of resources now to live in the library is 12.
Original library view (sample)
User Feedbacks (sample)
Key Takeaways
Need improvement for scanability
Leveraging space use
Opportunity to expand functionalities such as sharing, filtering, and sorting
Action to apply to multiple items
Mobile-friendly
Main Tasks
Competitive Research (2 samples)
Competitor 1 Resources Page
PROS
Filter functionality to help to narrow down resources
Scannable resources with smaller resource modules
Easily to apply to new resources
CONS
Lack of visual cue for the resources
Alignment issue with no-boundary resource module
Batch functionality won’t show until items are selected. No imply of the existence of the functionality
Competitor 2 Resources Page
PROS
Simple, condensed card design, scannable
Nice visuals to differentiate cards
Categorize cards and provides jump links rather than a filter, so the cards are always visible and accessible
CONS
Doesn’t support batch download
Limited space for functionality more than just download
The customized icon is a higher cost for adding new resources
All XXX Resources which leads to a full list under the category seems unnecessary for this many resource cards–all the cards are listed upfront
Design Process
Adding Feature: Batch Download
User Flow: Stand download
Redesign of Card
Adding thumbnails as visual cues to differentiate cards
Adjust content and spacing to be more condensed and scannable
Collapsed card (option) for mobile
Customized For Different Categories
Special Occasion – A featured card which needs confirmation of reading specific disclaimer before download/Email
For this special occasion, I designed and tested the two adjusted flow below:
I tried to ask for confirmation of disclaimer BEFORE users get access to download or share, by graying out the two CTAs until the full disclaimer is reviewed in a pop-up. For this adjustment, users would need to shift their focus between the resource card and the content in the pop-up. Furthermore, the checkbox for batch download/share is further away from the trigger of the disclaimer which causes confusion if it’s also diactivated.
Adjusted Flow 1
Then I tried another approach to ask for confirmation AFTER the action for downloading/sharing. This adjustment allows users to focus on the task of browsing and selecting resources, and get to review the disclaimer only when they commit acquisition of the featured resource.
Adjusted Flow 2 (final)
Here is a quick view of testing in prototype
Outcomes
In this journey I oversaw the process of a component elevates along with the leverage of the experience. It taught me a lesson of how to create a module that could cover as many edge cases a possible before it becomes an added piece of the Design System. And the correlations of modules and how they could help cover more cases.