Digital Member Kit
01 Project Brief
Tufts Health Plan has more than 50 different plans. New members would receive a beautifully designed booklet providing an explanation of their health plan in the mail. This information changes annually (or sooner), and it takes a lot of time and effort to update the print materials (all individual InDesign files). These booklets also require a lot of physical materials, such as paper and ink, and are a great expense to mail. Tufts Health Plan desired a new approach for their member experience to help solve these issues. The digital member kit was the easy-to-manage, environmentally friendly, and cost effective solution.
The digital member kits only provide general information about the plans, to find individual information, each member is required to register for the online portal.
Therefore, the member kits should achieve the following goals:
For the Tufts team, it needs to be:
- Simple to assemble or update on the back end
- Easy to share and print (for sales purpose)
- Easy and encouraging for new members to register for the online member portal
And for the users, it needs to be:
- Navigable
- Accessible and allow members to print necessary documents
- Easy to register for the member portal
02 My Role
I was the lead UI/UX designer and responsible for creating wireframes, prototypes, UI, presenting to the client, and handing off to the developers.
03 Solutions
The structure of the member kits are divided into chapters. Each kit has a different amount of chapters. Some chapters are the same among all kits, and some are tailored for its own kit.
I began my research by studying other online publishing platforms, such as the Apple book store, Kindle, and many digital magazines sites. I also referred to traditional book design for inspiration.
My approach for the wireframes was to have 2 levels of architecture. The landing page was to be similar to the front matter of a book (the foreword and the table of contents), and the detailed pages are the body matter of a book (the main content, separated into chapters). On the detail page, I utilized the left column to be a fixed menu for the chapters, so users can scan them and go from one to another efficiently.
After that, I started adding in the features: such as allowing users to download the entire kit, build custom PDFs, print documents, and to share their plan. On the landing page, these functions will appear as a hovering ellipsis, while on the detail page, it's sticky on the right side of the window. To help users understand and familiarize with these functions, I use tooltips to label them. Once you add a chapter into your PDF builder, a window will appear at the bottom of the browser, and automatically collapse when scrolling motion is detected. (See below "PDF building process")
Open the prototype in new window
04 Design
During the design process, my goal was to create a comfortable reading experience. The overall look and feel is consistent with the main site and uses the same iconography and typography as much as possible so users won't feel a disconnection.
Open the live site in new window
Landing page design
PDF building process
NOTE:
- Hover over the ellipsis (•••) to show the 3 options.
- Hovering over the 3 options will display tooltips
- The icon "+" adds the chapter into the PDF builder. Once added, the builder window will come up, and the icon + will turn grey and disable.
- The PDF builder will collapse automatically when scrolls
PDF builder
NOTE:
- Maximum height on desktop and tablet: 1/3 of the view height
- Maximum height on mobile: 205px
On the detail page, I defined all the content block styles, including the table, call out box, accordion, image, pull quote, and videos.
Mobile Design
On the landing page, I removed all the supporting images to improve the site's speed and performance, and decrease the amount of scrolling for the users.
On the detail page, I turned the sticky function bar into a button, so it won't disturb the reading experience, but still easily accessible when they need it. When users press the button, the functions will appear.
