Público

Um modo mais ágil de fazer jornalismo digital.

Publico Backoffice on Laptop by Mediaweb

Services

User Experience Design
User Interface Design
Brand Interface Styleguide
Front-End Development

Deliverables

Live Styleguide
Interactive Prototypes
Platform Front-End

Client

Público

Project Explanation

Creating and editing news requires more than just inserting content on the site. It requires a clear study of the actuality, information sources verification and rapid delivery of the articles. In this project, we designed an efficient backoffice that provides better usability to journalists, helping them to do their work faster and easier without compromising the quality of the published news.

Highlights

WE’RE TAKING IT TO THE NEXT LEVEL

Platform Structure

We redesigned the way users navigate this interface to make it more intuitive and contextual to their needs.

Functional & Branded

Designed sits on top of the Outsystem's SILK UI silkui.outsystems.com framework which allows for quick creation and testing of functional solutions, taking advantage of predefined UX good practices while being able to design with brand in mind.

Smooth Deployment

Our front-end developers work hard to make it possible to implement the newly designed experience without interfering with current ongoing work by the users. And like 3,2,1... users can get their new interface without ever having to stop their work.

Live Style Guide

When you develop your application, you should predict the scale of the product and this implies constant improvements and release of new features. Creating a live style guide will help the fast development as well as preview this components directly on the browser.

Publico Dashboard on Laptop Device by Mediaweb

01.

CONTEXT

Product

Público's Backoffice is a productivity platform for the company to simplify its flow of news entry to the public. Users can now create news, articles and more in a simple and faster way, making a breeze working from one day to the other.

Challenge

We were in charge of defining Público's backoffice experince, optimize their platform and simplify content creation flows in the complex environment that is News.

02.

APPROACH

When designing products as complex and extensive as Público's Backoffice some times we have to go oldschool at the start. Using techniques like mind mapping, paper sketching and quick iterations with the client we try to be wrong fast to be right quicker. From this we start creating the required pages using Outsystem's SILK UI framework to help speed up implementation while ensuring the usage of UX and UI good practices.

Research & Wireframe

We start off by wireframing the main screens for the flow of the app. This phase is specially important to validate the main functionalities on the screen rather than looking at graphic visuals that might only serve as distraction.

Publico Backoffice Wireframe by Mediaweb
Publico Backoffice Wireframe by Mediaweb

Styleguide

WE’RE TAKING IT TO THE NEXT LEVEL

Colors

#D01A1A

R: 208

G: 26

B: 26

#F5A623

R: 245

G: 166

B: 35

#66BB6A

R: 102

G: 187

B: 106

#4A90E2

R: 74

G: 144

B: 226

#323232

R: 50

G: 50

B: 50

Typography

Publico Typography by Mediaweb
Publico Typography by Mediaweb

Iconography

Publico Iconography by Mediaweb
Publico Iconography by Mediaweb

03.

OUTCOME

News Management

Get an immediate top-level overview of the status of breaking news.

  • Publico Backoffice by Mediaweb
  • Publico Backoffice by Mediaweb
  • Publico Backoffice by Mediaweb
  • Publico Backoffice by Mediaweb
  • Publico Backoffice by Mediaweb

Aftermath

We take experiences to the next level.

Público Backoffice After by Mediaweb
Público BackOffice Before
Publico Testimonials Image
  • Nicolas Matias

    Mediaweb

    “With this challenge, we aimed to streamline the methodology of Publico's employees by simplifying their backoffice.“