Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
Designing for America's Largest Publisher
My Role
My Role
My Role
UX Design, User Research, Design System
UX Design, User Research, Design System
UX Design, User Research, Design System
Collaborators
Collaborators
Collaborators
Vlada Mashkovich (Mentor & Manager), Ivan Leung (Senior Designer), Sophie Lucy (Senior PM), Jane Wood (Senior PM), Yingying Chen (PM Intern)
Vlada Mashkovich (Mentor & Manager), Ivan Leung (Senior Designer), Sophie Lucy (Senior PM), Jane Wood (Senior PM), Yingying Chen (PM Intern)
Vlada Mashkovich (Mentor & Manager), Ivan Leung (Senior Designer), Sophie Lucy (Senior PM), Jane Wood (Senior PM), Yingying Chen (PM Intern)
The Work
The Work
The Work
During my internship at Dotdash Meredith, I was a part of the Design team that worked on Greenhouse, the umbrella tool which covered everything related to the publishing domain
During my internship at Dotdash Meredith,
I was a part of the Design team that worked on Greenhouse, the umbrella tool which covered everything related to the publishing domain
During my internship at Dotdash Meredith, I was a part of the Design team that worked on Greenhouse, the umbrella tool which covered everything related to the publishing domain
Duration
Duration
Duration
2 months (June 2023 - August 2023)
2 months (June 2023 - August 2023)
2 months (June 2023 - August 2023)
Summary
Over the course of my internship, I designed for the user management tool including flows for the creation of new users and the addition/management of permissions for new/existing users
Over the course of my internship, I designed for the user management tool including flows for the creation of new users and the addition/management of permissions for new/existing users
Over the course of my internship, I designed for the user management tool including flows for the creation of new users and the addition/management of permissions for new/existing users
Worked with PMs and a Senior Researcher to create research plans and enhance the config manager tool to improve user experience by optimizing the navigation and presentation of features through collaborative design
Worked with PMs and a Senior Researcher to create research plans and enhance the config manager tool to improve user experience by optimizing the navigation and presentation of features through collaborative design
Worked with PMs and a Senior Researcher to create research plans and enhance the config manager tool to improve user experience by optimizing the navigation and presentation of features through collaborative design
Worked cross-functionally with Senior Designers, Senior Researchers, Product Managers and Developers
Worked cross-functionally with Senior Designers, Senior Researchers, Product Managers and Developers
Worked cross-functionally with Senior Designers, Senior Researchers, Product Managers and Developers
Optimizing the Config Manager
What is the Config Manager?
What is the Config Manager?
What is the Config Manager?
The Config Manager is a data and option heavy function under the Greenhouse tool used to control the configurations of the various templates and sections used for different articles by the 40+ brands under Dotdash Meredith.
The Config Manager is a data and option heavy function under the Greenhouse tool used to control the configurations of the various templates and sections used for different articles by the 40+ brands under Dotdash Meredith.
The Users
The Users
The Users
Editorial Operations Team
Editorial Operations Team
Vertical Team (PMs)
Vertical Team (PMs)
They use the tool to check out and manage configs like the content block and callout themes for brands to reach higher exposures and rankings in search engines
They use the tool to check out and manage configs like the content block and callout themes for brands to reach higher exposures and rankings in search engines
Timeline
Timeline
4 weeks (July 19th - August 10th)
4 weeks (July 19th - August 10th)
4 weeks (July 19th - August 10th)
Why the need for the redesign?
Why the need for the redesign?
The config manager was released in January 2023, 6 months ago. User interviews conducted as a part of the PM intern's (Yingying Chen) project revealed gaps in the usability of the tool and the time-consuming nature of it which in turn decreased productivity
The config manager was released in January 2023, 6 months ago. User interviews conducted as a part of the PM intern's (Yingying Chen) project revealed gaps in the usability of the tool and the time-consuming nature of it which in turn decreased productivity
The config manager was released in January 2023, 6 months ago. User interviews conducted as a part of the PM intern's (Yingying Chen) project revealed gaps in the usability of the tool and the time-consuming nature of it which in turn decreased productivity
Getting Started & the Process
Getting Started & the Process
Based on the PRD for this project and brainstorming with a senior PM and senior researcher, the focus area was narrowed down and I drew up a Research Plan that detailed out the phases and timelines for the redesign.
Based on the PRD for this project and brainstorming with a senior PM and senior researcher, the focus area was narrowed down and I drew up a Research Plan that detailed out the phases and timelines for the redesign.
Based on the PRD for this project and brainstorming with a senior PM and senior researcher, the focus area was narrowed down and I drew up a Research Plan that detailed out the phases and timelines for the redesign.
Research (Primary, Secondary & Competitive) ⬇️
Research (Primary, Secondary & Competitive) ⬇️
Research (Primary, Secondary & Competitive) ⬇️
Understanding Requirements (Current Needs, System Limitations & Use Cases) ⬇️
Understanding Requirements (Current Needs, System Limitations & Use Cases) ⬇️
Understanding Requirements (Current Needs, System Limitations & Use Cases) ⬇️
Ideation & Design (Design Explorations, Iterations & High Fidelity)
Ideation & Design (Design Explorations, Iterations & High Fidelity)
Ideation & Design (Design Explorations, Iterations & High Fidelity)
A Glimpse of the Competitive Research
Insights & Direction
After 18 user interviews, secondary research of best practices and competitive research of existing tools, the aim:
After 18 user interviews, secondary research of best practices and competitive research of existing tools, the aim:
After 18 user interviews, secondary research of best practices and competitive research of existing tools, the aim:
The new version of the Config Manager aimed to provide a streamlined and simple way to see all the existing configurations of a brand
The new version of the Config Manager aimed to provide a streamlined and simple way to see all the existing configurations of a brand
The new version of the Config Manager aimed to provide a streamlined and simple way to see all the existing configurations of a brand
Reduce the time taken to see this information across various brands
Reduce the time taken to see this information across various brands
Reduce the time taken to see this information across various brands
It should provide a way to audit all the configurations at a glance
It should provide a way to audit all the configurations at a glance
It should provide a way to audit all the configurations at a glance
The two major areas of the redesign
The two major areas of the redesign
The two major areas of the redesign
Creating an understandable overview of the enabled options for a user to glance through to understand the configurations of the brand.
Creating an understandable overview of the enabled options for a user to glance through to understand the configurations of the brand.
Creating an understandable overview of the enabled options for a user to glance through to understand the configurations of the brand.
Streamlining the index list of all the 50 odd possible aspects that could be edited which were different for the different brands
Streamlining the index list of all the 50 odd possible aspects that could be edited which were different for the different brands
Streamlining the index list of all the 50 odd possible aspects that could be edited which were different for the different brands
Breaking down the Existing Design
Breaking down the Existing Design
Next I categorized the various configuration pages to understand the different information architectures that had to be summarized.
Next I categorized the various configuration pages to understand the different information architectures that had to be summarized.
Next I categorized the various configuration pages to understand the different information architectures that had to be summarized.
1.1 Dropdown with toggle configuration pages
1.2 Dropdown with toggle configuration pages
Name + Value configuration pages
Value only configuration pages
At a high level, the individual configuration pages fit into 3 types
At a high level, the individual configuration pages fit into 3 types
At a high level, the individual configuration pages fit into 3 types
1.1 Dropdown with toggle configuration pages
1.2 Dropdown with toggle configuration pages
Name + Value configuration pages
Value only configuration pages
1.1 Dropdown with toggle configuration pages
1.2 Dropdown with toggle configuration pages
Name + Value configuration pages
Value only configuration pages
Applying this understanding, I created a content inventory based on the existing flow
Applying this understanding, I created a content inventory based on the existing flow
Applying this understanding, I created a content inventory based on the existing flow
Content Inventory Sample
Content Inventory Sample
Content Inventory Sample
Existing Flow Example
Existing Flow Example
Existing Flow Example
Explorations
Based on the content inventory, I explored designs for an overall summary page
Based on the content inventory, I explored designs for an overall summary page
Based on the content inventory, I explored designs for an overall summary page
These explorations aimed to consolidate all the enabled configurations of a specific brand into one scannable page
These explorations aimed to consolidate all the enabled configurations of a specific brand into one scannable page
The explorations aimed to consolidate all the enabled configurations of a specific brand into one scannable page
The explorations for the summary page proved that there was far too much information to be show on one page.
The explorations for the summary page proved that there was far too much information to be show on one page.
The explorations for the summary page proved that there was far too much information to be show on one page.
Additionally, adding all the data that was considered vital together only proved that having it in separate pages were more scannable.
Additionally, adding all the data that was considered vital together only proved that having it in separate pages were more scannable.
Additionally, adding all the data that was considered vital together only proved that having it in separate pages were more scannable.
This made me realize that the redesign's focus was taking us away from the experience we were trying to improve.
This made me realize that the redesign's focus was taking us away from the experience we were trying to improve.
This made me realize that the redesign's focus was taking us away from the experience we were trying to improve.
The Pivot
The Pivot
Using the explorations for a visual presentation, I explained to the team how by creating an overall summary, we were actually making the required data harder to scan.
Using the explorations for a visual presentation, I explained to the team how by creating an overall summary, we were actually making the required data harder to scan.
Using the explorations for a visual presentation, I explained to the team how by creating an overall summary, we were actually making the required data harder to scan.
Further applying the aims to the page categorization, I was able to explain how the only pages that were time consuming and posed a problem for the users were the pages with a ton of toggles.
Further applying the aims to the page categorization, I was able to explain how the only pages that were time consuming and posed a problem for the users were the pages with a ton of toggles.
Further applying the aims to the page categorization, I was able to explain how the only pages that were time consuming and posed a problem for the users were the pages with a ton of toggles.
This convinced the involved stakeholders to pivot the redesign focus to individual summaries for toggle pages.
This convinced the involved stakeholders to pivot the redesign focus to individual summaries for toggle pages.
This convinced the involved stakeholders to pivot the redesign focus to individual summaries for toggle pages.
High Fidelity Designs
High Fidelity Designs
Individual summary pages - The new designs groups the enabled toggles together and collapses the unused ones which allows the user to scan the necessary information at a glance
Individual summary pages - The new designs groups the enabled toggles together and collapses the unused ones which allows the user to scan the necessary information at a glance
Individual summary pages - The new designs groups the enabled toggles together and collapses the unused ones which allows the user to scan the necessary information at a glance
Current
Current
Current
Redesigned
Redesigned
Redesigned
Refining the Left Panel
Refining the Left Panel
The other aspect of optimizing the config manager was refining the left panel.
There are currently 50+ tabs which house the various config pages and I aimed to group similar ones together to enable finding a specific page easier.
The other aspect of optimizing the config manager was refining the left panel.
There are currently 50+ tabs which house the various config pages and I aimed to group similar ones together to enable finding a specific page easier.
The other aspect of optimizing the config manager was refining the left panel.
There are currently 50+ tabs which house the various config pages and I aimed to group similar ones together to enable finding a specific page easier.
Current Side Panel
Current Side Panel
Current Side Panel
Redesigned Side Panel
Redesigned Side Panel
Redesigned Side Panel
With further presentations and discussions with the team, I came up with more explorations for scenarios where longer help text needs to be accomodated
With further presentations and discussions with the team, I came up with more explorations for scenarios where longer help text needs to be accomodated
With further presentations and discussions with the team, I came up with more explorations for scenarios where longer help text needs to be accomodated
Conclusion & Learnings
Conclusion & Learnings
The final designs made the config manager scannable and reduced the time the edops team took to scan the configurations of a brand when any issue arised.
The final designs made the config manager scannable and reduced the time the edops team took to scan the configurations of a brand when any issue arised.
The final designs made the config manager scannable and reduced the time the edops team took to scan the configurations of a brand when any issue arised.
The necessity of iterations - While I have always understood the iterative mindset, this project cemented why it is necessary to explore various directions before focusing on improving one design
The necessity of iterations - While I have always understood the iterative mindset, this project cemented why it is necessar
The necessity of iterations - While I have always understood the iterative mindset, this project cemented why it is necessar
Communication is key - Once I realized the design direction wasn't appropriate, I shared my explorations and thoughts with my mentor who guided me to present the same to the team and explain why a pivot was necessary
Communication is key - Once I realized the design direction wasn't appropriate, I shared my explorations and thoughts with my mentor who guided me to present the same to the team and explain why a pivot was necessary
Communication is key - Once I realized the design direction wasn't appropriate, I shared my explorations and thoughts with my mentor who guided me to present the same to the team and explain why a pivot was necessary
A picture is truly worth a 1000 words - This goes hand-in-hand with the previous point and made me realize the importance of visually showcasing the ideas in presentations to best convey the challenges across to others
A picture is truly worth a 1000 words - This goes hand-in-hand with the previous point and made me realize the importance of visually showcasing the ideas in presentations to best convey the challenges across to others
A picture is truly worth a 1000 words - This goes hand-in-hand with the previous point and made me realize the importance of visually showcasing the ideas in presentations to best convey the challenges across to others
The beauty in simplicity - Sometimes the simpler solutions are more usable and impactful
The beauty in simplicity - Sometimes the simpler solutions are more usable and impactful
The beauty in simplicity - Sometimes the simpler solutions are more usable and impactful
More Projects
Designing for User Management and Design System work.
Designing for User Management and Design System work.