Vision Care Info
Educating and encouraging advocacy in the vision care industry
Johnson & Johnson Vision Care Info (JJVCI) is a website that makes it easy to learn about the vision care industry and the issues that face it. It provides up-to-date information on vision care legislation, as well as resources and tools to get involved. My role was to advocate for the site's users and create wireframes for the site's redesign. I collaborated with a UX designer, visual designer, and project manager to overhaul this site's information architecture and provide a more meaningful user experience.
Johnson & Johnson
Conduct a heuristics review, assist with external stakeholder interviews, synthesize research findings, advocate for the user in team meetings, and create wireframes for the site redesign.
UX Methods Used
Design Tools Used
Omnigraffle (site map)
Pen & Paper (sketches)
Team Members & Collaborators
UX Designer: John Brodish (me)
UX Design Lead: Dave Burke
Visual Designer: Josh Cheung
Project Manager: Dale Vieregge
Johnson & Johnson is a multinational medical device, pharmaceutical, and consumer packaged goods manufacturer with stakes in the vision care industry. Their website, JJVCI, informs vision care industry stakeholders on the latest industry news, issue activity, explains how the issues affect them, and why they should get involved. Johnson & Johnson's goal is to mobilize stakeholders to help advance legislation supporting JJVCI’s organizational objectives by providing users with the tools to advocate.
• Inform stakeholders of the issues, latest news, how it affects them, and why they should get involved
• Redesign IA to support needs of optometrists, eye care providers, and related professionals
• Mobilize stakeholders to help advance legislation supporting JJVCI's organizational goals
• Promote JJVCI's role as an industry leader in the advocacy space
• Doctors of optometry (ODs), eye providers and related professionals
• Policymakers, legislators
• Vision Care Industry advocacy organizations and members
JJVCI can make bigger strides toward its legislative goals by expanding its current audience of policymakers and legislators to include to eye care providers and related professionals. Johnson & Johnson hope is that more people visiting JJVCI will result in more people becoming vision care issue advocates.
Johnson & Johnson wants JJVCI to cater to multiple audience segments with differing needs and goals. Figuring out how to optimize navigation and IA so everyone can find what they're looking for, quickly and easily, was the biggest challenge of this project. Accommodating multiple feature requests from our client was a close second.
I was brought onto the project as a contractor shortly after the client kick-off meeting. I was given an overview of the project's goals (listed above), as well as a walkthrough of JJVCI's current site. As I followed along with the project manager as he clicked through JJVCI's current site, it quickly became apparent the site needed some improvement. My first assignment was to take account of the different site issues through a heuristics review. This was later used to inform the site redesign.
External Stakeholder Interviews
Our team secured interviews with five industry members. They were familiar with JJVCI's organizational goals, but may or may not have visited the site before. Our project manager led the interviews via teleconference. I occasionally joined in for clarification or follow-up. Most of the time, I was quietly listening along, jotting down insights on my laptop.
We asked individuals about their role in the vision care industry, and what sites and apps they used in that capacity. We also asked what they knew about JJVCI, if they had visited the site before, and how it could be improved.
We learned that JJVCI was the leader in advocating for vision care industry issues, with no close competitors. Our interviewees told us that only a couple other sites existed with this kind of information, but they didn't have any tools or content supporting advocacy efforts. All of our interviewees preferred JJVCI.
We learned most eye care professionals were not visiting JJVCI organically. They were typically directed to the site, usually through an email campaign. They also weren't spending much time on the site. Most ODs were checking it during the short windows of time between patient visits.
Whether they had visited the site previously or not, all of those interviewed found the website provided a wealth of useful information. However, many bemoaned the tedious and confusing navigation needed to reach all of it.
We identified the following user needs:
Formulating UX Recommendations
After finishing our external stakeholder interviews, I synthesized our research and provided UX recommendations for the redesign.
Revamping the information architecture/navigation was high on our priority list. ODs and eye care professionals needed to be prioritized on the home page. As first-time visitors, it would be important to engage them as soon as they arrive at the site. Legislators, advocacy organization members, and others more familiar with the site and vision care industry issues would be taken care of by providing them easy access to resources. The general idea was to bring more relevant, actionable information forward and place the detailed, less-relevant pieces in back pages.
Calls to action needed to be short and straightforward. JJVCI's current process of handholding users through the steps of contacting their representative was great in this regard. Carrying that experience into the redesign would be essential.
From a content standpoint, providing more succinct, digestible content would engage more users. As one interviewee put it: "simplified and amplified." Describing the benefits of joining the cause would also be effective in getting ODs and eye care professionals to start advocating.
I met with the team to present our research findings and my UX recommendations. Our client requested we call-out a number of education tools on the homepage, to increase their traffic. We discussed how to bridge the gap between our client needs and user needs, and sketched out a few ideas of what the site might look like.
Taking cues from other advocacy sites, we determined the site could be broken down into two sections: Learning and Taking Action. The former section would be geared toward educating newcomers and providing quick access to resources for veterans. The latter, as the name implied, would contain the tools for getting involved.
For the homepage, we opted for a panel layout that efficiently supported learning about the issues, taking action, our client's feature requests, and a few user suggestions. By the end of our meeting, we had put together a rough wireframe of the homepage.
Site Redesign Wireframes
Our team meeting helped establish a general framework for the site redesign. I fleshed out our ideas in Sketch, keeping research insights, client goals, and user needs in mind as I designed. I sought feedback from my team, then cleaned up the designs some more. After a few days, the wireframes were ready, on-schedule, and ready for visual treatment and development.
The homepage hooks visitors with a big call-out to what's at stake. Client feature requests lie just below the fold, and an interactive map gives visitors the opportunity to see what is happening in their state. Two big calls-to-action, "Learn" and "Act", provide quick access to everything the site has to offer.
Bill information, related resources, and updates are more distinguished. Contributing to the cause by contacting your Congressmen or state representative remains easy with a stickied call-to-action on the right-side of the page, which opens a form that will do the hard work for you.
Every page received a big organizational update, with links, resources, and information getting clearly segmented and labeled.
Passing along these finished artifacts, along with a sitemap, was the end of my involvement with this project.
What I Learned
• I learned a lot about working at an agency, balancing work on multiple projects at different phases in their lifecycle, and helping people understand the value of UX design. I also learned a lot about the vision care industry in general. Evidently, 1-800 Contacts does not always send people the correct prescription contacts.
• Comparative analysis with other successful sites in the advocacy space inspired a number of solutions to our more complex IA problems. A reminder to be more proactive with this research in the future, and not waste time trying to reinvent the wheel.
• The most challenging aspect of this project was making sure the site would support the needs and goals of all our of different audience segment. Conducting user research and identifying common ground between the segments, as well as comparative analysis of similar sites, helped us overcome this challenge with relative ease.
• The team meetings were my favorite part of this project. I had a lot of fun bouncing ideas back-and-forth with my teammates, discussing different ways to tackle our problems. Everyone had some interesting insight to offer. Our frequent collaboration kept us on the same page and boosted morale as we worked through the project together.