Publish Articles

Quick summary

This software tool allow users to publish articles to a customer facing website. The client wanted to use this platform to educate their customers about the car industry. It aimed to create a trusting relationship between the client and customers.

design System
Mobile design

My role

Designed forms for marketing managers to create and post articles to their websites. Establish a new design component. Designed for mobile devices.


Website & mobile


About the project

Our client runs a popular car dealership business. The client's marketing managers wanted to publish articles to their customer website. The types of articles range from promotional to educational material. They wanted to establish a sense of trust between the company and their customers. So in future, customers would consider the business for any car-related services.

Flow to preview an article

Below is a click through for previewing an article:

Beginning the project

There were a few things to foresee.

Thinking a few steps ahead

For this enterprise tool, there were some things to consider:

  • Different permissions between content managers and marketing manager
  • How to manage multiple articles across many dealerships
Outlining permissions for different employees roles
  • Content managers submit a post for approval to the Group/Marketing Manager before it gets published online
  • There is an approval process managed by the Marketing Manager to ensure the post is accurate and appropriate for the Group/Dealer site
Managing large numbers of articles

A few things to consider:

  • How can users manage and share articles across multiple websites?
  • What happens when users duplicate existing posts and share it across the client's sites?

To manage a bulk of the posts, articles scan be grouped into categories e.g. advice, reviews, promotional.

Outlining the flows

Creating an article flow
Un-publishing articles flow

Un-publishing an article is to remove posts that have been published online e.g.  when users remove outdated promotional activity.

Two ways to un-publish:

  • Set the article status to drafts - if content of the post is incorrect
  • Change publish date - if the user wanted to reuse the promotional materials in future
Scheduling when articles get published

When users change a date - they have the option to schedule an article to be posted in the future.

Designing a toolbar component

My process when building a new design component:

  • Since the design system was still in progress, I created a new component.  I referred to existing examples like as Carbon, Polaris and Material Design
  • Using the examples as a basis, the toolbar needs to be consistent with our current design system
  • Test the reusability of the toolbar across different scenarios. For example, previewing a post, composing an email and using a rich text editor
  • Document the component. Set guidelines on usage and when not to use it. Provide examples and scenarios for the toolbar component

Responsive design for iPad.

Publish an article on desktop

Linking articles to a customer facing website

How can users manage articles to their customer facing website?
Below are four ways:

Create a clickable tag

These tags link a vehicle display page to a post. Editing clickable tags can only be linked to the product selector.

Link to a vehicle page

User select a vehicle via model, variant or model year e.g. Jeep Cherokee. The article would appear on any Jeep Cherokee vehicle page.


Like social media, articles can be posted across websites. For example, 16 locations refers to sharing the article across 16 sites.

Category & tags

Category allows users to organise the article under one group.
Tags will link any commonalities between articles.

Publish an article on mobile devices

Responsive layout for tablets and iPad devices.

Collapsing into tabs

Layout is divided into two tabs. "Content" allows users to add text to the article. "Details" links and organise the article to the customer facing site.

Responsive layout for smaller devices

Maintaining the tabs

On smaller devices, the layout has tabs to maintain consistency across mobile devices.

Stacking the settings

UI under 'Details' are stacked because it easier for users can scroll down to add content.

Animating editable tags

In the animation, it shows an initial state of creating an article. The animated UI is linked the article to a vehicle detail page, through tags. Prototyped with InVision, this animation focuses on selecting an exisiting product. Then creating a tag.

How it all work out?

This project didn't get into production. There were other projects in the pipeline.

For future referencing I documented this project. Writing isn't my one of personal strengths - so I was quite reluctant. One of the designers advised to keep it short and to the point - good advice I carry to this day. Turns out my documentation was a hit in the design team. Before, documenting designs was usually passed over. After, it showed how documentation can a useful communication tool.

This was my first project working on system design. Although the this design didn't reach development, it pique my interest. This project was my launchpad to more complex processes. I usually reflect upon this project as a personal reminder to keep my work clear and simple.