网页 综合 更新时间 2026-11-13 17:20:39

Advancing Healthcare - Marchant Web Case Study

自动蜘蛛 marchantweb.com 正文约 2841 字
Advancing Healthcare - Marchant Web Case Study
Deerfield is an investment management company with a focus on healthcare - with hundreds of articles on their website for visitors to browse and discover. The challenge that presented itself was how visitors would find content, and how to display it to promote discovery. The user experience had to guide users towards key content, while also keeping it well organized and fluid enough that you could explore in many different ways.
This project entailed taking an agency's design files and working alongside them to develop a reactive component that was visually interesting, while also performing well across a multitude of device capabilities.
As you’d expect, a bunch of math went into place to calculate where each dot would land, and how they animate across the screen. HTML5 canvas was used to render the layer, with hit tests that trigger modal pop-ups surfacing more details on each content item.
Content was drawn to the screen in concentric rings, with each dot representing a single content item. These items were color-coded into one of three categories, and their distance to the center of the diagram (and the brightness of the hotspot) was determine based on the content’s relevance.
This functionality was extended into the search feature. When a user enters a search term, or clicks on one of the three main categories of content, the network will re-arrange and filter itself to show the most appropriate content front-and-center. Search itself was implemented using SwiftType.
On the initial load, we wanted a full introduction animation before the network comes together to form their core values. This process involved not only working to simultaneously load data and swap out pseudo-elements, but a custom SVG filter was developed with some clever trickery to allow the dots to "blob" together when near each other, creative an intriguing fluid effect.
Performance was key, so the experience was extensively tested on a variety of mobile devices. We were constantly checking frame rate, animation speeds, hit boxes, and more to ensure a consistent and enjoyable browsing experience.
The final component provided for a robust and navigable user experience that allowed visitors to quickly find what was relevant to them. By implementing this system, Deerfield has improved the overall user experience for their visitors and increased the discoverability of their content.
Director of Software Development at White Rhino, Inc
Some of my random updates, articles, thoughts, tinkering and talks.
© 2025 Marchant Web, LLC
Grab your sense of humor and prepare to dive headfirst into this crazy coding adventure.
Introducing "usePartyRef" for @vuejs. It's a ref() that syncs in real-time with other clients using @partykit_io.
This was a fun one to build, with the design by none other than @the_rmoon 👏
16k views, 215 likes.
访问原文 返回搜索 https://marchantweb.com/portfolio/advancing-healthcare
本页为82搜索生成的网页快照,内容来自站内索引;演示数据的原文链接仅作示例。