COVID-19 Vaccine Hub & Journey Block

As the leading health website, we want to provide a hub with trustworthy, authentic and reliable source of information to answer the questions about COVID-19 Vaccines. I will walk through the case study from research & analysis, design exploration to implementation & tech and zoom in to the most tricky problem of “journeys”. Check out the live page︎︎︎ in the works.

Time: Launched Dec. 2020 2 weeks







Professional Skills
Responsive Web Design
User Experience Design
User Interface Design
Wireframing
Rapid Prototyping
Competitive Analysis

Work Closely With
Mark Lewis (Senior Director, Product)
Verywell Editorial Team
Verywell Dev Team
SEO Team

My Role
Lead UX design, visual design


Design Tools
Figma, Adobe Suite, Zoom, Jira






Why is this impactful?

We’ve helped 3 million people understand vaccines with content that did not exist in November.
I solved other design problems that had been lingering around for a while, which can be applied to more use cases.











Scope and Challenges

Instead of building up a brand new hub page, we were looking to leverage our current taxonomy page︎︎︎ design. 

My responsibilities include: 
  • Leverage our current taxonomy page design. 
  • Design content blocks to meet the need of the content editors
  • Figure out a way to plug in the third-party tools without feeling off brand.

// Our pages are being controlled in CMS where editors are able to modify the text without touching the overall looking.





The Vaccine Hub






 

The page is easy to maintain and customize with flexible content blocks inserted by editors based on their needs by editors.






Flexibility and less tech lifting of the LEGO solution for “journeys”.









Research & Data





Search Data Never Lie

SEO team showed that people are looking for actual vaccines, why halting, temperature, side effects, pregnancy safety, authenticating for event attendance.

// Didn’t really expect Ticketmaster was ruling the search results.



Target Users

For this project, we were not only designing for our end users but we were also designing for our editors as a tool to enhance their editing and writing experience-and of course, to make it SEO friendly.




Competitors

In the meantime, we were also checking other publishers and competitors. What has inspired me most is the COVID-19 vaccine tracker︎︎︎ by the NY times where the timeline, process, and science behind each vaccine are well documented and easily tracked, even though it’s limited by its one-page setting.

// Almost every publisher has covered COVID-19 and its vaccines but no one has built the actual product for it exclusively.







Early Design Explorations




I shared the low-fi wireframes that laid out the basics we want to explore to help content editors visualize their ideas. From there we were able to move forward within the context of design.

// The idea brainstorming, content creation, and design explorations were happening in parallel.



It turned out that most ideas can’t be easily leveraged based on what we already have. I need to design these content blocks and count the future reusability.

// Bear with me, the artboard does not always look fancy and organized.







But... what is the top design challenge?

The design of the journey block and the future reusability of that block in many other use cases.











You May Ask: What is “Journey”?

The idea of “journey” is basically a template where a bunch of related articles were being stitched together. Perfect examples of our journey: Pregnancy Week By Week Guide︎︎︎ and Arthritis Guide︎︎︎. The concept was baked in a fairly short time back in 2018. Since then, it has caused a lot of confusions and complaints, but it is also a really great product idea that we don’t want to toss away.





Revisit the Structure

I collected most “journeys” (nearly 50) across four microsites and revisited the content structure.



Use Cases

We will probably extend the use case in the near future, but currently, it will only be featured on tax pages for two placements: “Up Top” and “Inline”. The “Up Top” is the exisiting component live in production.



This is how content editors perceive the content

We can see there is a huge difference between editors’ way of thinking and user’s understanding, like do users ever care about the information they are given?

After evaluating and synthesizing different types of journeys, I was able to find the logic similarity among the groups and consolidate the ideas.

// I kept asking myself: What is key to a user? Do more text and more layers/levels really assist them understanding the content beneath it?



The Atomic Solution

Considered as LEGO, the blocks can be easily customized by hidding or replacing the elements in it. The bottom element has two basic layouts which will be linked to the actual documents.

 



Mockup 








Implementation & Tech




Tech Screening & Tradeoffs

Most features we’ve shown to our devs were easy to implement. But we didn't know how flexible and feasible it is for the third-party plugin, Biodigital. We met with the other dev team who are more knowledgeable on this and can help us build it. Unfortunately, there was not much flexibility around it, but luckily, the features we need were already built-in.

And another tradeoff we made on the design side is to modify the existing layout a little to make it work for the “Ask an Expert” section. Devs and PMs had concerns about creating a new theme with limited reuse capability.

Sad Parts

  • The current live page is not great, a lot of features in the design are missing.
  • Need to live with the off-brand visual elements such as fonts, color, and spacing for third-party plugins.




Implementation & QA

We went through a few rounds of formal zoom calls and informal slack messages. As mentioned earlier, the content will probably be different, but we’ve considered the edge cases to make sure it will work for most content populated.

We were working closely with another dev team to make these components available globally for all other brands (nearly 20 distinct brands) in our company.

As always, I created clear specs for new components and laid out the transitions in different browser widths. We used google spreadsheets in our team to log and track QA tasks and design cleanups.


Takeaways




  • Bringing pieces of information into an organized organism is such an accomplishment.
  • Actively check what can be achieved before going too deep into third-party tools.


Mark