PRODUCT DESIGN • UI • UX

CANVAS
CMS

PRODUCT DESIGN • UI • UX 

CANVAS
CMS

PRODUCT DESIGN • UI • UX

CANVAS
CMS

PRODUCT DESIGN • UI • UX

CANVAS CMS

PRODUCT DESIGN • UI • UX

CANVAS CMS

CANVAS is a custom CMS (content management system) built for the editors at Gallery Media Group. It was designed to cater specifically for the editorial workflows of the editors. The web application was built with ReactJS so it can adapt as new editorial branches are added and the business scales.

CANVAS is a custom CMS (content management system) built for the editors at Gallery Media Group. It was designed to cater specifically for the editorial workflows of PureWow and ONE37pm editors. The web application was built with ReactJS so it can adapt as new editorial branches are added and the business scales.

CANVAS is a custom CMS (content management system) built for the editors at Gallery Media Group. It was designed to cater specifically for the editorial workflows of PureWow and ONE37pm editors. The web application was built with ReactJS so it can adapt as new editorial branches are added and the business scales.

CANVAS is a custom CMS (content management system) built for the editors at Gallery Media Group. It was designed to cater specifically for the editorial workflows of PureWow and ONE37pm editors. The web application was built with ReactJS so it can adapt as new editorial branches are added and the business scales.

CANVAS is a custom CMS (content management system) built for the editors at Gallery Media Group. It was designed to cater specifically for the editorial workflows of the editors. The web application was built with ReactJS so it can adapt as new editorial branches are added and the business scales.

CAV-Main

Redesign of CMS

Background: At Gallery Media Group, editors of the publication PureWow use a custom CMS to publish all content on PureWow.com. The CMS they use was built in 2010 by a team of engineers who used the default HTML/CSS styling with little-to-no direction from a design team. Their current CMS allows editors to perform basic functions like inputting article text and images and adding SEO tags. Although the CMS has worked well for many years, it's outdated, slow, and buggy. When the new publication, ONE37pm under Gallery Media Group, launched it was clear that the current CMS would be unable to scale with the increased complexity of the publications under Gallery Media Group. The CMS then became a priority for the company and we started laying out a plan for a complete rebuild/redesign of the application from scratch.

 

Redesign of CMS

Background: At Gallery Media Group, editors of the publication PureWow use a custom CMS to publish all content on PureWow.com. The CMS they use was built in 2010 by a team of engineers who used the default HTML/CSS styling with little-to-no direction from a design team. Their current CMS allows editors to perform basic functions like inputting article text and images and adding SEO tags. Although the CMS has worked well for many years, it's outdated, slow, and buggy. When the new publication, ONE37pm under Gallery Media Group, launched it was clear that the current CMS would be unable to scale with the increased complexity of the publications under Gallery Media Group. The CMS then became a priority for the company and we started laying out a plan for a complete rebuild/redesign of the application from scratch.

 

Redesign of CMS

Background: At Gallery Media Group, editors of the publication PureWow use a custom CMS to publish all content on PureWow.com. The CMS they use was built in 2010 by a team of engineers who used the default HTML/CSS styling with little-to-no direction from a design team. Their current CMS allows editors to perform basic functions like inputting article text and images and adding SEO tags. Although the CMS has worked well for many years, it's outdated, slow, and buggy. When the new publication, ONE37pm under Gallery Media Group, launched it was clear that the current CMS would be unable to scale with the increased complexity of the publications under Gallery Media Group. The CMS then became a priority for the company and we started laying out a plan for a complete rebuild/redesign of the application from scratch.

Redesign of CMS

Background: At Gallery Media Group, editors of the publication PureWow use a custom CMS to publish all content on PureWow.com. The CMS they use was built in 2010 by a team of engineers who used the default HTML/CSS styling with little-to-no direction from a design team. Their current CMS allows editors to perform basic functions like inputting article text and images and adding SEO tags. Although the CMS has worked well for many years, it's outdated, slow, and buggy. When the new publication, ONE37pm under Gallery Media Group, launched it was clear that the current CMS would be unable to scale with the increased complexity of the publications under Gallery Media Group. The CMS then became a priority for the company and we started laying out a plan for a complete rebuild/redesign of the application from scratch.

Redesign of CMS

Background: At Gallery Media Group, editors of the publication PureWow use a custom CMS to publish all content on PureWow.com. The CMS they use was built in 2010 by a team of engineers who used the default HTML/CSS styling with little-to-no direction from a design team. Their current CMS allows editors to perform basic functions like inputting article text and images and adding SEO tags. Although the CMS has worked well for many years, it's outdated, slow, and buggy. When the new publication, ONE37pm under Gallery Media Group, launched it was clear that the current CMS would be unable to scale with the increased complexity of the publications under Gallery Media Group. The CMS then became a priority for the company and we started laying out a plan for a complete rebuild/redesign of the application from scratch.

PRE-CAV-1

Previous CMS Article Builder & Catalog: The UI was purely functional and used the default HTML/CSS styling without any consideration of an efficient UX for the editors' workflow. The experience was an extremely manual process for editors and was not catered towards the growing number of articles and content being produced each day. 

Previous CMS Article Builder & Catalog: The UI was purely functional and used the default HTML/CSS styling without any consideration of an efficient UX for the editors' workflow. The experience was an extremely manual process for editors and was not catered towards the growing number of articles and content being produced each day. 

Previous CMS Article Builder & Catalog: The UI was purely functional and used the default HTML/CSS styling without any consideration of an efficient UX for the editors' workflow. The experience was an extremely manual process for editors and was not catered towards the growing number of articles and content being produced each day. 

Previous CMS Article Builder & Catalog: The UI was purely functional and used the default HTML/CSS styling without any consideration of an efficient UX for the editors' workflow. The experience was an extremely manual process for editors and was not catered towards the growing number of articles and content being produced each day. 

Previous CMS Article Builder & Catalog: The UI was purely functional and used the default HTML/CSS styling without any consideration of an efficient UX for the editors' workflow. The experience was an extremely manual process for editors and was not catered towards the growing number of articles and content being produced each day. 

PRE-CAV-2

Timeline: 1 year

Team: Design Lead, 2 Product Managers, Front-End and Back-End Engineers

Challenge: Create a new CMS for Gallery Media Group publications called CANVAS. SInce ONE37pm was a newer publication, we started working on user flows and site maps based on the needs of editors at ONE37pm. However, since the plan is for all publications to adopt CANVAS, we kept in mind that the workflow would also have to be flexible for the different needs of each publication.

Goals:

  • Ability to create content at scale with ease 
  • A CMS that works cross platforms app including a mobile app
  • Design a design system for CANVAS to allow for product updates to be seamless and efficient 

Timeline: 1 year

Team: Design Lead, 2 Product Managers, Front-End and Back-End Engineers

Challenge: Create a new CMS for Gallery Media Group publications called CANVAS. SInce ONE37pm was a newer publication, we started working on user flows and site maps based on the needs of editors at ONE37pm. However, since the plan is for all publications to adopt CANVAS, we kept in mind that the workflow would also have to be flexible for the different needs of each publication.

Timeline: 1 year

Team: Design Lead, 2 Product Managers, Front-End and Back-End Engineers

Challenge: Create a new CMS for Gallery Media Group publications called CANVAS. SInce ONE37pm was a newer publication, we started working on user flows and site maps based on the needs of editors at ONE37pm. However, since the plan is for all publications to adopt CANVAS, we kept in mind that the workflow would also have to be flexible for the different needs of each publication.

Timeline: 1 year

Team: Design Lead, 2 Product Managers, Front-End and Back-End Engineers

Challenge: Create a new CMS for Gallery Media Group publications called CANVAS. SInce ONE37pm was a newer publication, we started working on user flows and site maps based on the needs of editors at ONE37pm. However, since the plan is for all publications to adopt CANVAS, we kept in mind that the workflow would also have to be flexible for the different needs of each publication.

Timeline: 1 year

Team: Design Lead, 2 Product Managers, Front-End and Back-End Engineers

Challenge: Create a new CMS for Gallery Media Group publications called CANVAS. SInce ONE37pm was a newer publication, we started working on user flows and site maps based on the needs of editors at ONE37pm. However, since the plan is for all publications to adopt CANVAS, we kept in mind that the workflow would also have to be flexible for the different needs of each publication.

Who is the user?

  • Team of 40+ editors write content for PureWow.com and ONE37pm.
  • They are responsible for inputting all of the article content into the CMS 
  • Input 10-15 articles per day 
  • Articles range from 5 pieces of content to 100 pieces of content 
  • Manually copy and paste text into the CMS and upload images one-by-one 
  • They are comfortable with their current workflow and don’t want to deviate too much from it.
  • Need Canvas to complement their workflow, streamline it, and make it quicker

Who is the user?

  • Team of 40+ editors write content for PureWow.com and ONE37pm.
  • They are responsible for inputting all of the article content into the CMS 
  • Input 10-15 articles per day 
  • Articles range from 5 pieces of content to 100 pieces of content 
  • Manually copy and paste text into the CMS and upload images one-by-one 
  • They are comfortable with their current workflow and don’t want to deviate too much from it. 
  • Need Canvas to complement their workflow, streamline it, and make it quicker 

Who is the user?

  • Team of 40+ editors write content for PureWow.com and ONE37pm.
  • They are responsible for inputting all of the article content into the CMS 
  • Input 10-15 articles per day 
  • Articles range from 5 pieces of content to 100 pieces of content 
  • Manually copy and paste text into the CMS and upload images one-by-one 
  • They are comfortable with their current workflow and don’t want to deviate too much from it. 
  • Need Canvas to complement their workflow, streamline it, and make it quicker 

Who is the user?

  • Team of 40+ editors write content for PureWow.com and ONE37pm.
  • They are responsible for inputting all of the article content into the CMS 
  • Input 10-15 articles per day 
  • Articles range from 5 pieces of content to 100 pieces of content 
  • Manually copy and paste text into the CMS and upload images one-by-one 
  • They are comfortable with their current workflow and don’t want to deviate too much from it. 
  • Need Canvas to complement their workflow, streamline it, and make it quicker 

Who is the user?

  • Team of 40+ editors write content for PureWow.com and ONE37pm.
  • They are responsible for inputting all of the article content into the CMS 
  • Input 10-15 articles per day 
  • Articles range from 5 pieces of content to 100 pieces of content 
  • Manually copy and paste text into the CMS and upload images one-by-one 
  • They are comfortable with their current workflow and don’t want to deviate too much from it.
  • Need Canvas to complement their workflow, streamline it, and make it quicker
CAV-curren-workflow

Site Map

  • The site map below was the initial plan for the phases of CANVAS broken out for design and build based on priorities. Below list the phases and how they changed once we started.
    • Phase 1 - The first focus of CANVAS was creating an article catalog and builder with a more efficient experience
    • Phase 2 - Data analytics dashboard, media library 
    • Phase 3 - User/editor comments, draft versions

Site Map

  • The site map below was the initial plan for the phases of CANVAS broken out for design and build based on priorities. Below list the phases and how they changed once we started.
    • Phase 1 - The first focus of CANVAS was creating an article catalog and builder with a more efficient experience
    • Phase 2 - Data analytics dashboard, media library 
    • Phase 3 - User/editor comments, draft versions

Site Map

  • The site map below was the initial plan for the phases of CANVAS broken out for design and build based on priorities. Below list the phases and how they changed once we started.
    • Phase 1 - The first focus of CANVAS was creating an article catalog and builder with a more efficient experience
    • Phase 2 - Data analytics dashboard, media library 
    • Phase 3 - User/editor comments, draft versions

Site Map

  • The site map below was the initial plan for the phases of CANVAS broken out for design and build based on priorities. Below list the phases and how they changed once we started.
    • Phase 1 - The first focus of CANVAS was creating an article catalog and builder with a more efficient experience
    • Phase 2 - Data analytics dashboard, media library 
    • Phase 3 - User/editor comments, draft versions

Site Map

  • The site map below was the initial plan for the phases of CANVAS broken out for design and build based on priorities. Below list the phases and how they changed once we started.
    • Phase 1 - The first focus of CANVAS was creating an article catalog and builder with a more efficient experience
    • Phase 2 - Data analytics dashboard, media library 
    • Phase 3 - User/editor comments, draft versions
CAV-site-map

Phase I

In Scope:

  • Article Catalog: Editors can easily sort articles in the article catalog
  • Builder: Modular based allowing editors to add components to add body text, headlines, social embeds, images, pulled quotes, and shoppable sliders
  • Toolbar: Collapsable side menu where editors can add featured images, SEO, categories, tags, and social images
  • WYSIWYG Preview: Allows editor to view a live preview of the article they are building in a side by side view next to the builder

Out Scope: 

  • Media Gallery
  • Analytics Dashboard

Phase I

In Scope:

  • Article Catalog: Editors can easily sort articles in the article catalog
  • Builder: Modular based allowing editors to add components to add body text, headlines, social embeds, images, pulled quotes, and shoppable sliders
  • Toolbar: Collapsable side menu where editors can add featured images, SEO, categories, tags, and social images
  • WYSIWYG Preview: Allows editor to view a live preview of the article they are building in a side by side view next to the builder

Out Scope: 

  • Media Gallery
  • Analytics Dashboard

Phase I

In Scope:

  • Article Catalog: Editors can easily sort articles in the article catalog
  • Builder: Modular based allowing editors to add components to add body text, headlines, social embeds, images, pulled quotes, and shoppable sliders
  • Toolbar: Collapsable side menu where editors can add featured images, SEO, categories, tags, and social images
  • WYSIWYG Preview: Allows editor to view a live preview of the article they are building in a side by side view next to the builder

Out Scope: 

  • Media Gallery
  • Analytics Dashboard

Phase I

In Scope:

  • Article Catalog: Editors can easily sort articles in the article catalog
  • Builder: Modular based allowing editors to add components to add body text, headlines, social embeds, images, pulled quotes, and shoppable sliders
  • Toolbar: Collapsable side menu where editors can add featured images, SEO, categories, tags, and social images
  • WYSIWYG Preview: Allows editor to view a live preview of the article they are building in a side by side view next to the builder

Out Scope: 

  • Media Gallery
  • Analytics Dashboard

Phase I

In Scope:

  • Article Catalog: Editors can easily sort articles in the article catalog
  • Builder: Modular based allowing editors to add components to add body text, headlines, social embeds, images, pulled quotes, and shoppable sliders
  • Toolbar: Collapsable side menu where editors can add featured images, SEO, categories, tags, and social images
  • WYSIWYG Preview: Allows editor to view a live preview of the article they are building in a side by side view next to the builder

Out Scope: 

  • Media Gallery
  • Analytics Dashboard
CAV-site-diagram

Wireframes & Prototypes

Wireframes & Prototypes

Wireframes & Prototypes

Wireframes & Prototypes  

Wireframes & Prototypes

article+catalog+wireframe

Article Builder & Catalog Wireframes

Article Builder & Catalog Wireframes

Article Builder & Catalog Wireframes

Article Builder & Catalog Wireframes

Article Builder & Catalog Wireframes

Design System

After the initial wireframes and initial high fidelity prototypes, it became clear that we needed to establish a design system and pattern library for Canvas. The branding for our consumer-facing website was not sufficient for an internal user tool like CANVAS. Using Google Material Design as a starting point for components and interactions, we layered our branding onto the components needed for CANVAS. This proved to be an efficient way to design and build CANVAS.

Design System

After the initial wireframes, it became clear that we needed to establish a design system and pattern library for Canvas. The branding for our consumer-facing website was not sufficient for an internal user tool like CANVAS. Using Google Material Design as a starting point for components and interactions, we layered our branding onto the components needed for CANVAS. This proved to be an efficient way to design and build CANVAS.

Design System

After the initial wireframes, it became clear that we needed to establish a design system and pattern library for Canvas. The branding for our consumer-facing website was not sufficient for an internal user tool like CANVAS. Using Google Material Design as a starting point for components and interactions, we layered our branding onto the components needed for CANVAS. This proved to be an efficient way to design and build CANVAS.

Design System

After the initial wireframes, it became clear that we needed to establish a design system and pattern library for Canvas. The branding for our consumer-facing website was not sufficient for an internal user tool like CANVAS. Using Google Material Design as a starting point for components and interactions, we layered our branding onto the components needed for CANVAS. This proved to be an efficient way to design and build CANVAS.

Design System

After the initial wireframes, it became clear that we needed to establish a design system and pattern library for Canvas. The branding for our consumer-facing website was not sufficient for an internal user tool like CANVAS. Using Google Material Design as a starting point for components and interactions, we layered our branding onto the components needed for CANVAS. This proved to be an efficient way to design and build CANVAS.

Style-Guide
CAV-design-system

Sketch Pattern Library & Design System

Sketch Pattern Library & Design System

Sketch Pattern Library & Design System

Sketch Pattern Library & Design System

Sketch Pattern Library & Design System

c-d-1
c-d-5
c-d
c-d-6
c-d-7
c-d-8
c-d-1

Article Catalog 
With a design system and pattern library in place, the high fidelity prototypes for the article catalog and article builder came together fairly quickly.

Article Catalog 
With a design system and pattern library in place, the high fidelity prototypes for the article catalog and article builder came together fairly quickly.

Article Catalog 
With a design system and pattern library in place, the high fidelity prototypes for the article catalog and article builder came together fairly quickly.

Article Catalog 
With a design system and pattern library in place, the high fidelity prototypes for the article catalog and article builder came together fairly quickly.

Article Catalog 
With a design system and pattern library in place, the high fidelity prototypes for the article catalog and article builder came together fairly quickly.

c-d-5
c-d

Article Builder
The article builder UI also came together fairly quickly after we established the CANVAS design system. The goal of the builder was to provide a single page where all of the activity that goes into building an article can occur. The following screens show a simple flow for an editor building an article.

Article Builder
The article builder UI also came together fairly quickly after we established the CANVAS design system. The goal of the builder was to provide a single page where all of the activity that goes into building an article can occur. The following screens show a simple flow for an editor building an article.

Article Builder
The article builder UI also came together fairly quickly after we established the CANVAS design system. The goal of the builder was to provide a single page where all of the activity that goes into building an article can occur. The following screens show a simple flow for an editor building an article.

Article Builder
The article builder UI also came together fairly quickly after we established the CANVAS design system. The goal of the builder was to provide a single page where all of the activity that goes into building an article can occur. The following screens show a simple flow for an editor building an article.

Article Builder
The article builder UI also came together fairly quickly after we established the CANVAS design system. The goal of the builder was to provide a single page where all of the activity that goes into building an article can occur. The following screens show a simple flow for an editor building an article.

Module Design
In order to streamline the manual process of inputting article content, we came up with a modular approach to the design. At any given time, an editor can select which article component they want to add next. Technical parameters are in place to prevent a situation where, for example, an editor might try to accidentally add 5 subheads in a row.

Module Design
In order to streamline the manual process of inputting article content, we came up with a modular approach to the design. At any given time, an editor can select which article component they want to add next. Technical parameters are in place to prevent a situation where, for example, an editor might try to accidentally add 5 subheads in a row.

Module Design
In order to streamline the manual process of inputting article content, we came up with a modular approach to the design. At any given time, an editor can select which article component they want to add next. Technical parameters are in place to prevent a situation where, for example, an editor might try to accidentally add 5 subheads in a row.

Module Design
In order to streamline the manual process of inputting article content, we came up with a modular approach to the design. At any given time, an editor can select which article component they want to add next. Technical parameters are in place to prevent a situation where, for example, an editor might try to accidentally add 5 subheads in a row.

Module Design
In order to streamline the manual process of inputting article content, we came up with a modular approach to the design. At any given time, an editor can select which article component they want to add next. Technical parameters are in place to prevent a situation where, for example, an editor might try to accidentally add 5 subheads in a row.

WYSIWYG Builder Article Preview
The article builder also has an option to preview an article as you're building it, in a window allowing you to switch device sizes

WYSIWYG Builder Article Preview
The article builder also has an option to preview an article as you're building it, in a window allowing you to switch device sizes

WYSIWYG Builder Article Preview
The article builder also has an option to preview an article as you're building it, in a window allowing you to switch device sizes

WYSIWYG Builder Article Preview
The article builder also has an option to preview an article as you're building it, in a window allowing you to switch device sizes

WYSIWYG Builder Article Preview
The article builder also has an option to preview an article as you're building it, in a window allowing you to switch device sizes

CAV-M-1

Mobile Mock 

Mobile Mock 

Mobile Mock 

Mobile Mock 

Mobile Mock 

Previous
Goldin
Next
ONE37pm Website