dashboard-herodashboard-hero

Due to a confidentiality agreement, any identifying and confidential information has been removed and/or replaced.

Role - Lead Designer

Client - Confidential

Agency - Onyx Creative Studio

Helping create a streamlined process for a remote team, and reimagine their workflow with an internal product.

This project was for a telecommunications news and information provider. Industry leading service providers and suppliers turn to them to stay informed of all market demands, government mandates, technical advances, and industry trends. The client uses Engine, their proprietary web application, to manage and publish all of their editorial content and web pages - it was an integral part to how the company ran. As it stood, Engine was a content management system but it had the potential to be so much more. It needed to be reimagined from the ground up and into the tool that it was set out to be - an intuitive web app that facilitated a streamlined editorial process.

When the Client launched it was only a handful of writers and editors, so the editorial process was agile and short. But as the company grew, a big problem emerged: how can we bring everything under one roof and increase production?

 

Over the years, it became difficult for everyone to be in sync and up-to-date on project statuses as well locate necessary file assets without having to sift through dozens of emails, chats, and server folders. So naturally, this tool needed to be reimagined to incorporate new and existing features, and facilitate a new editorial process to achieve the best results for company growth.

02. Users & Audience

The target users of Engine were older professionals working in the editorial industry, but even broader than that was everyone who worked at this company. These users have a strong preference for real-time communication and asset organization because email just didn’t cut it anymore.

 

A key differentiator of this user group is that they are heavy users of Microsoft Office and DotNetNuke, so they wanted something that feels familiar to those experiences, but more reliable and was more heavily focused on their needs.

03. Design Process

In order to identify if this product was achievable, as well as what needed to be accomplished, we started out by assembling focus groups of target users. After navigating through all of their feature requests and issues, we were able to identify their key pain points: they wanted an easier way to communicate with each other, reduce the amount of third party software they used, and have a tool that could help streamline their editorial process. 

Inconsistency

Many of the users cited an exhausting process that required an unnecessary amount of software. The team used a different tool for certain things which was a clear pain point.

Accessibility

Accessing content was inefficient, the most common impediments mentioned in interviews were related to accessing content through navigation systems.

Engine was pieced together using several different programming languages. This resulted in constant crashing and was ultimately unreliable.

Approximately 89% of users only used it to upload final content that was created else where. This resulted in a scattering of resources and files.

Due to its issues, the majority of users wanted to spend very little time using the application.

[unex_ce_button id="content_qt57ck4od,column_content_mpdxyu75s" button_text_color="#ffffff" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ff4c5e" button_padding="5px 16px" button_border_width="0px" button_border_color="#ff4c5e" button_border_radius="25px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#ff4c5e" button_border_hover_color="#ff4c5e" button_link="" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]1[/ce_button]

Improve the user flow, system architecture, and the navigation systems to provide instant access to content creation, article submission, and customer information.

[unex_ce_button id="content_qt57ck4od,column_content_yf0lzzdmc" button_text_color="#ffffff" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ff4c5e" button_padding="5px 16px" button_border_width="0px" button_border_color="#ff4c5e" button_border_radius="25px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#ff4c5e" button_border_hover_color="#ff4c5e" button_link="http://www.semplicelabs.com" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]2[/ce_button]

Encourage communication within the editorial team through chat interfaces and other project management features.

[unex_ce_button id="content_qt57ck4od,column_content_a3z9n9usy" button_text_color="#ffffff" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ff4c5e" button_padding="5px 16px" button_border_width="0px" button_border_color="#ff4c5e" button_border_radius="25px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#ff4c5e" button_border_hover_color="#ff4c5e" button_link="http://www.semplicelabs.com" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]3[/ce_button]

Incorporate new tools and features that could eliminate the need to use so many separate third party applications and bring the experience under one roof.

04. Structure & Flow

We identified some key specs that needed to be included in the final product, and then mapped out user flows based on those specs. This helped us address concerns that were raised in the discovery stage regarding content, system accessibility, and the potential usability of new and existing features. At this point in the process, we found that having end users map out their ideal flows was extremely helpful. This helped us gain insight into their daily tasks and we were then able to incorporate that feedback into our designs.

 

Based on the user flows, we structured the information architecture in a way that enabled users to access relevant information, quickly and easily, with minimal level of difficulty. Following this design process allowed us to stay focussed on delivering a smoother user experience, and ensured that project goals were met.

Information Architecture

Detailed navigation that allowed the user to quickly and efficiently access the necessary sections throughout the application.

Reorganized Elements

Important elements are sectioned off better and easier to access, resulting in a more efficient workflow and a more enjoyable user experience.

Supplementary information is placed lower in the hierarchy of the pages for optional, but unobtrusive, access.

  • Calendar System
  • Contact Directory 
  • Content Management
  • Customer Relationship
  • Digital Notes
  • Email Communication
  • File Management
  • Member Directory
  • Project Management
  • System Analytics
  • Task Management
  • Team Chat
side-menu-flowside-menu-flow

New Features

Global Search

System wide search that allows the user to quickly identify the item they are searching for rather then dig into the specific section it may relate to.

Ability to quickly execute common tasks via hidden slide out menu or a dropdown list throughout the application at any time.

Elements providing information such as email, article status, shares, and comments can be interchanged based on user needs.

Detailed Glances

Global notifications include brief details such as what type of notification it is so the user can act accordingly.

menu-top-flowmenu-top-flow

05. Interface Design

The objective of the interface was to design a style that was comfortable to use and leveraged it in a way that helped create a familiar environment. In order to reinforce the clean and sophisticated tone that was established for Engine, we used a limited colour palette, and avoided heavy drop shadows and springy animations for the system interface. We also found that using high-fidelity prototypes was critical in helping us gather valuable feedback. The results of user testing indicated an overwhelmingly positive response to the new design of Engine.

06. Closing Thoughts

Engine's redesign was well received within the company, it instantly increased communication within the companies teams, and began to boost employee production. A by-product of this project was that it lead this client to have a greater appreciation of a design process and the level of care and attention to detail it takes to build a great product.

 

As a result of this experience, I learned a few things when designing a product; involving the development team early on in the project really helped things to go smoothly further into the project and pays off in the end, incorporating user feedback from the initial stages of the project was crucial to the projects success, and being empathetic to how people within a company can use the same tool(s) differently.

[unex_ce_button id="content_rbfawm66t,column_content_pstqkfcck" button_text_color="#884cff" button_font="bold" button_font_size="14px" button_width="content_width" button_alignment="center" button_text_spacing="1px" button_bg_color="#ffffff" button_padding="15px 60px" button_border_width="2px" button_border_color="#884cff" button_border_radius="50px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#884cff" button_border_hover_color="#884cff" button_link="https://sketch.cloud/s/7amAp" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]SKETCH FILE[/ce_button]