Johnson & Johnson Vision
Customer Portal
My Role
Strategy, research, UX Design, UI Design
Other contributors: Austin Ragsdale (UX), Stephanie Brunnemann (UX), Amanda Boshard (Lead on UI)
Johnson & Johnson Vision Logo | jnjvisionpro.com
Background
Johnson & Johnson Vision (J&J Vision) is a B2B subsidiary of Johnson & Johnson that sells vision products to qualified customers. The portal is a gated ecommerce portal through which customers purchase, return, and report usage of J&J Vision products.
A clunky and outdated user experience, the portal was in need of a full redesign. The J&J Vision team wanted a refresh of their site, focusing primarily on their users needs by improving current processes, adding new functionality, and giving the portal an overall updated feel.
The old experience
UX Challenge
How can we improve the user’s experience in key tasks to help increase customer adoption?
Scope
A holistic redesign of the entire app. We were tasked with redesigning about 10 user flows.
​
6 months for discovery, research, and design
Constraints
We were brought in to do discovery, research and design that would be handed off to the development team. For the majority or the project, an engineering team had not been identified so we were not able to get as many technical inputs as we would have liked. However, we did our best to get insights from the technical team that had built the first iteration of the project we were redesigning.​
​
We ended up using Johnson & Johnson Vision's existing technical stack of templates and components. While this initially limited some design solutions, we felt that provided structure that was quite positive in the end.
Outcomes
We successfully delivered discovery documentation and final designs to the Johnson & Johnson Vision development team.
They began development and testing in the summer of 2019. At this time, an internal product team was identified to manage development and future iteration.
Design Process
1. Start with interviewing the stakeholders
We interviewed 3 stakeholders to gain an understanding of the needs of the business and how we would measure success at the end of the project. After the interviews, we developed themes that we heard and read them back to the stakeholders so they could confirm whether we had heard them right.
This is one of the slides we used to communicate the themes that we heard from the stakeholders.
2. Learn from subject matter experts
We talked to 11 different subject matter experts within the J&J organization. They came from the customer service team (USA and Global), the sales team, the IT team, and operations team. From our interviews, we pulled out themes and tactics for improvement. Plus, we leveraged those relationships throughout the process, which was really important.
Some of the slides we used to read back what we heard to Subject Matter Experts
3. Usability Testing with the users
We interviewed 9 different users (7 remote and 2 in person) about their experience using the current tool. We also did some testing of the current experience.
​
One of our main insights is that most users want to complete tasks in bulk rather than one by one to save themselves time, including reordering more product.
Photos artifact that we gathered during our on-site interviews. They helped us better understand the environment in which the users is often operating and also the products themselves.
4. Relating the app to the users who are actually using it
After interviewing users, we realized that we could start categorizing and prioritizing user needs to help us determine how to design the portal experience. From deciding on the UI functionality to organizing the information and navigation that will cater effectively to each type of users, the user type was always on our mind.
We categorized users into different types to help us ensure that we were covering different types of use cases.
We developed user stories to help us identify the tasks that we needed to design for and mapped those to each user type. This helped us categorize and prioritize as well.
We developed user stories by each user type to help us identify what the app must help users accomplish.
5. Mapping user journeys
With so much complexity in processes and ophthalmology industry jargon, we found that the best way to wrap our heads around the experience was to map the users journeys out. This also helped us identify opportunities to incorporate new functionality into the app and potential redundancies to eliminate.
A user journey depicting the catalog's role in ordering a product
6. Designing the "shopping" experience
Users expressed frustration with almost every flow but one in particular really brought up a lot of pain points and seemed like something that we could dramatically improve with even small changes: the catalog experience.
​
Users use the catalog to find the lens they need for their upcoming surgeries. The old experience was pretty awful and really didn't mirror most of the ecommerce features that users have come to expect as "normal." We often heard the sentiment, "Can't it just be more like Amazon?" We got the point.
​
Unlike most catalogs, though, slow browsing really wasn't the point. Users need to get in and get out as fast as possible. In a real way, our success would be measured best by how little time users were spending on the app.
Our goals for the catalog:​
​
-
Allow the users to add a cart from the product list to speed up quick orders
-
Make the calls-to-action visible and clear in their purpose.
-
Add bigger, better product photos to cue users as to what they are browsing for.
-
Incorporate filters to help users who may want to browse.
-
Invest in search functionality (of course!) for the users who know exactly what they want.
-
Add a product detail page for users to see more product info at the product level
-
Design a way for users to easily add multiples of several diopters (sizes) of lenses
Initial exploration into the concept of the product list expanding to show a specific product's details rather than taking users to a product page. Spoiler alert! This idea did not win out.
Insight
New or inexperienced users do not intuitively understand the different "order types" that Johnson & Johnson Vision uses for their product purchasing.
​
Solution
Product catalog wireframe. Note that we added the ability to add items to the cart from the list and tool tips to help first time users navigate the confusing concept of "order types" that J&J Vision uses.
Insight
Users want to spend as little time as possible ordering products. Because they tend to order the same products, just in different sizes, they don't need to go all the way to the Product detail page to do so. ​
Solution
We added the ability to add items to the cart from the product list.
Insight
Users want to be able to quickly narrow to their desired products.
​
Solution
We added filtering at the top of the product list.
Insight
Users want a quick way to order multiple quantities of multiple sizes of a single product. In the old interface, they had to navigate a variety of drop-downs and poor feedback to do so. ​
​
Solution
On the product detail page, we provided a quick way for users to add multiple sizes at multiple quantities with one click instead of having to use drop-downs.
7. Final UI
Catalog Final UI. Showing filters in the catalog.
Catalog Final UI. Showing the user's option to add a product straight from the list if desired.
Product Detail Page Final UI.
Product Detail Page Final UI. Showing the user's ability to add multiple sizes at once with ONE "add to cart" click.
Outcomes
We successfully delivered final designs to the Johnson & Johnson Vision development team.
They began development and testing in the summer of 2019. At this time, an internal product team was identified to manage development and future iteration.
Lessons Learned
1. Pay close attention to work arounds. I used our in-person user testing sessions to identify work-arounds that users were taking in their process of ordering. These user-work arounds weighed heavily on my mind as I designed the new ordering process modules.
​
2. Get referrals. With so many moving parts and people in this project, I knew it would be important to develop a network of subject matter experts. At the end of each interview, I asked people who else I should speak with. This gave us opportunities to hear from people we never would have otherwise - like people in the fulfillment departments of smaller J&J Vision clients. Their perspectives were invaluable.
​
3. Focus on incremental change. This project was really about changes that would bring the experience up to par with what users needed - basic functionality. The future optimization will help us achieve the loftier goals we want to.