ProMach

  • Role
    UI, UX, Animation
  • Client
    ProMach
  • Industry
    Consumer Packaging
  • Category
    Web App
  • Year
    2017 (3mo)
Overview

ProMach is a leader in the packaging marketplace. Within the past two decades, they have acquired 26 different product brands to facilitate end-to-end production. With a re brand of the master brand and its sub brands, they needed a resource, a Brand Governance Portal to educate employees on how the new brand should be used and portrayed. They also needed a repository for assets that marketing teams can utilize.

Challenges
  1. Educate employees on the brand and its guidelines.

  2. Provide a way to download assets easily.

  3. The ability to create collections that can be shared.

  4. Easily manage assets for current and future brands.

Meet the Users

Administrator
  • Name:

    John Pitman

  • Age:

    37+

  • Occupation:

    Marketing Director

“We have so many pieces of assets and collateral for every acquisition we make, it’s going to be a headache getting them all uploaded and trying to keep everything consistent .”
Brand Ambassador
  • Name:

    Jene Brick

  • Age:

    30+

  • Occupation:

    Creative Director

“Each of the brands we acquire should relay our voice and tone. A clear and cohesive messaging strategy is important for all employees to understand the do’s and dont’s of the ProMach brand.”
Designer
  • Name:

    Pete Michaels

  • Age:

    24+

  • Occupation:

    Graphic Designer

“I spend just as much time designing as I spend hunting through folders to find the right assets - only to find we don’t have what I need or it’s not a hi-res version. I always end up creating my own system to organize and find things I need.”

What Does Success Look Like?

There are 2 main goals of anyone using the portal: to create a collection and to be able to download assets and collections. These goals should be accomplished in the least amount of steps possible. Mapping the flow with the least resistance helped me to think through the navigation and layout for the remainder of the experience.

Information Architecture

Writing MVP User Stories

While many platforms on the market provide this service, none completely matched the needs of the ProMach team without outrageous fees. It was easier and more cost-efficient to build a customized portal. The use of User stories prevented us from missing key features, while assisting the development team in understanding the depth of the project. Here’s a sample.

Sketching for Time

As we were pressed for time, sketches were used as a form of lo-fi wireframes, after which I proceeded to interface design.

The Dashboard

All copy needed to be clear-cut. The only creative writing was that of the brand’s messaging. All dashboards began with access to the brand’s Manifesto video, download report, on-boarding and a copy of the brand guidelines booklet. All other dashboard sections were specific to the logged in user. Their collections are groups of assets which they have been given access to or created themselves. The shortcuts are frequently used links, which may be added for quick navigation.

Challenge 1

Education on the Guidelines

Majority of the design was built using a 1:2 column structure to easily allow for details, visuals and descriptive text to be viewed simultaneously while maintaining a better format for reading. If an asset is being discussed, there will be an option to download it without having to navigate to the assets section.

Challenge 2

Easily Downloading Assets

Users are able to download different versions of an asset in various formats without having to navigate multiple screens. Batch downloading is a available for multiple assets through collections.

Challenge 3

Creating Collections

Collections are used as repositories for varying assets that users might need to frequent or share with internal teams and external vendors. This helps to maintain consistency and compliance with upholding brand standards.

Challenge 4

Easily Add New Assets

In the event of a new acquisition, new assets are designed and uploaded to the portal. We allowed for compressed files or multiple individual files to be dragged and dropped. Implementing conditionals helped to prevent duplicate extensions by prompting errors, while also pre-determining their asset category using their file extensions. This helps to alleviate extended periods of time spent adding assets.

On-boarding the Newbies

Using Keynote, I created a series of on-boarding UI walk-throughs to aid anyone using the platform for the first time, or for those who simply forgot where to go or what to do.

UI Style Guide

Created for hand-off to development.

Redlines and States

Takeaways

What made this project interesting for me, was the fact that I could relate to the frustrations of not having assets all in one place. This understanding helped in providing good solutions.

Working closely with development, I learned a lot about the limitations and capabilities of back-end programming in respect to its ability to process and sort data intelligently. At the end of the project, it was refreshing practicing animation to create the on-boarding videos.

scroll across to see more >