Signed in as:
filler@godaddy.com
Signed in as:
filler@godaddy.com
Media is one of the most widely used features of Veeva System CRM; it's a library of approved content that pharmaceutical reps and medical teams utilize for tailored healthcare provider interactions. I designed the media block and share modal DS components, and animated transitions going in and out of content.
The Media tab in Veeva CRM enables users to search and present digital multi-media content to healthcare providers using a custom media player, which accurately captures key metrics for fast follow-up documentation and reporting.
The feature was launched in 2011 and is used by over 100 pharmaceutical customers, such as Genetech, Bayer, Novo Nordisk, Boehringer Ingelheim, and many others with countless users.
When I joined the team early 2020, the design system squad was just being formed. The efforts involving the media block component, the media block transitions, and the share modal component were all integral for establishing new processes of building, integrating, and testing components into the product.
I designed the media block component and defined how it would scale.
I created custom transitions that would animate the media block in and out of presentation mode.
In the media search overlay, I worked on bringing an advanced text search view which searching on text within slides.
I designed the share modal component, and worked with the feature squad to integrate it from the media block component.
For the media block component, I used the existing design as a baseline and further defined details such as text wrapping/truncation, padding, scaling across screens, different sizes, default thumbnail image, and a tap state that shrinks the thumbnail.
I also animated transitions for navigating in and out of presentations for a more streamlined and interactive experience that would be seen by both the user and the provider they are presenting to.
The transitions I designed and animated would follow immediately after the media block tap state.
Lastly, I designed a share modal component which would allow a user to send a presentation to a provider via other applications or with a QR code link. The share modal would be launched from the media block's actions.
Once the designs and animations were fine-tuned and approved by stakeholders, I worked meticulously to document the design system components and transitions.
The documentation in InVision DSM (now in Zeroheight) was an important part of the process as our design system squad was relatively new, and we were establishing patterns for our design system Aurora.
I handed off designs to the design system engineering squad, and went over visual, functional, and scaling requirements. If there were any questions that weren't addressed by the design documentation, I would make updates, and have them peer reviewed.
Once engineering built components and transitions, they published the live code to a Testflight "demo" app where I reviewed and tested the components in an isolated area, and provided feedback to engineering or gave UX approval.
Once the media block, transitions, and share modal components were ready, the design system engineering team and I had handoffs to the squad integrating them.
I attended media feature squad standups to provide UX support, and acted as liaison between the feature squad and design system squad for any UX questions.
Sometimes bugs or need for enhancements would surface, and I would be the designer to address them.
Bounding Boxes and Hit Targets
I included built-in padding so the media blocks always have a safe area, and can allow for up to three lines of text.
The hit targets include the more options icon, the thumbnail, the heart icon, and the name of the media.
Tap State
On tap, the thumbnail and text should shrink by about 12.5% as the final state, with an extra shrink of 2% right before. The heart and wrapped label (if any) should fade out before shrinking animation. The status (if any) and more options stays fixed. The max text container height for the title is included in the shrinking.
Text Wrapping and Truncation
Text in the container will shrink to fit if needed using adjustsFontSizeToFitWidth and minimumScaleFactor to start at a default 13pt font size and shrink to a minimum of 11pt font size before tail-end truncating.
Expand Fill, which would scale the thumbnail up to fill the screen, and simultaneously fade in media player controls and the first slide of the selected presentation.
Radial Fill, which would transition to a view with the slides of the selected presentation by filling the screen with a dark background and fading in the slides of the presentation.
Shrink Dismiss, which would be the reverse of the Expand Fill transition to exit the presentation back to either the Media tab or the view of the slides.
New Segment Control and Default Recent Searches
I designed the new media search overlay to include recent search strings for a quick way to search relevant content.
I also added a segment control to allow toggling between an existing Standard Search (on metadata), and a new Advanced Text Search (on text within slides).
Advanced Text Search View
Toggling to the Advanced Text Search slides over the new view horizontally.
The Advanced Text Search surfaces an explicit search button as it requires connectivity unlike the type ahead Standard Search.
Once the user hits the search button in the UI or on the keyboard, a skeleton loader state shimmers until the results load in.
Overview
The share modal allows users to share content via specific apps and actions, in which activity can be tracked.
It is used in Media, when users want to share content with healthcare providers, and is accessed via the Media Block more options popover.
Tap State
On tap, the app should shrink and have a darker overlay of 30% black. The thumbnail should shrink by about 12.5% as the final state, with an extra shrink of 2% right before. The text is not affected.
Tapping on the actions dims them. For "Copy Link", the user will get a notification that the link had been copied.
Regular app tap state; app tap state with loading; action tap state with loading
Copyright © 2024 Betty Zhou - All Rights Reserved.
We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.