All work

Smart Package.

Package copy, written once, approved by every country, printed on the box.

Product Design Lead · Venturus · For a global consumer electronics manufacturer · B2B · 2021

Under NDA: the client is not named, and the screens are wireframe level with placeholder copy, as in the original.

Smart Package wireframes: a status board and the content creation screen with a box dieline preview

The problem

Every product model ships to many countries, and every country has its own regulatory rules for what the box must say. Copy had to stay consistent across product models, pass regulatory review in each region, and reach the factory ready to print, directly on the package instead of on a printed label.

Who touches the box

Seven groups of professionals touch one package across five phases: packaging, product marketing, regulatory, admins, localization, the factory and operations. We mapped who does what, and when, before designing a single screen.

Mapping · Seven groups, five phases, one box

Seven groups touch one box. So we mapped who does what, and when.

What each group does in each phase
ConceptProduct and designInitial setupStrategy into the toolTemplate and copyNames, features, copyTranslationLocalizationPress checkPrinting, quality
PackagingLook and feelDefines look and feelBox templates, regulatory logosUpdates templatesLine breaks, readability
Product marketingName, featuresLocalization strategyName, features, compatibilityFills and reviews feature copy
RegulatoryReviewers in the toolTrademarks, environmental contentTemplate by regionSerial numbers, IDs, logos, final review
AdminsProjects, lifecycleProject setup, data entryRegulatory iconsTemplate reviewFinal translated reviewExports print specs
LocalizationLocal languageTranslation samples for layoutTranslates and reviews
FactoryPrints on the boxCountry of originEnglish content for print
OperationsQualityProduction samples

Archetypes before the interface

Before committing to a layout, we explored interface archetypes: a template workspace with the box in 2D and 3D, a context and details view with a product tree, and a tool and canvas editor next to the dieline.

Exploration · Interface archetypes before the interface

Three ways to hold a package on screen, explored before one was drawn in detail.

Three wireframe archetypes: a template workspace, a context and details view with a product tree, and a template editor next to the dieline
  1. Template workspace

    Content on the left, the box in 2D, 3D, back and side views.

  2. Context and details

    A product tree, with regulatory, location and description fields and their owners.

  3. Tool and canvas

    A template editor with component properties next to the dieline.

Five roles, five ways in

Everyone opens the same tool, and nobody sees the same screen. Each of the five roles got its own user flow and its own prototype: the admin sets up programs, products and users; the content owner works from an inbox; the reviewer approves or sends content back; the viewer follows status without editing; and the factory employee receives approved content ready to print.

Five roles · A user flow and a prototype for each

Everyone opens the same tool. Nobody sees the same screen.

  1. Sets it up

    Admin

    • Creates programs and products
    • Adds users from a list or by hand
    • Assigns reviewers
  2. Writes

    Content owner

    • Works from an inbox
    • Opens a project, adds documents
    • Saves drafts, sends for review
  3. Approves

    Reviewer

    • Reviews content in context
    • Approves or sends back
    • Quick review from the status list
  4. Follows

    Viewer

    • Read-only inbox
    • Sees status without editing
  5. Prints

    Factory employee

    • Receives approved content
    • Print-ready, per product

Three screen flows to an MVP

Five page layouts and twelve interface archetypes came first, with screen sizes defined up front, from a phone to a desktop split in thirds. Then three screen flows: 12 screens, then 24 as administration and search arrived, then an MVP of 18 screens numbered as journeys, from review to approved and from draft to inbox updated, with empty states designed instead of left blank.

Evolution · From layout experiments to an MVP built on journeys

Three screen flows before the MVP. The MVP kept what the journeys needed.

  1. Exploration

    5 + 12

    Layouts and archetypes

    Five page layout options and twelve interface archetypes: worklist, funnels, rich text editor, workspace, dashboard, swim lane board.

  2. Screen flow 1.0

    12

    Screens: home, status, project

    Home variants, a status list with quick review, and the project page.

  3. Screen flow 2.0

    24

    Screens: administration arrives

    Administration arrives: project list, new projects with product numbers, search, drafts. Project creation as a six-step wizard.

  4. Screen flow 3.0 · MVP

    18

    Screens, numbered as journeys

    Review to approved. Draft to inbox updated. Template updated. Search. Empty states designed, not left blank.

Counts taken from the original design files. Desktop at full, two-thirds and one-third width, tablet and phone sizes defined up front.

The product

One tool with a view for each role, in the final interface: project setup, content creation with a preview on the box, a status board for reviewers, and a dashboard for managers.

The product · One tool, a view for each role

The admin sets it up, marketing writes, regulatory approves, and everyone sees the box.

Four wireframe screens of Smart Package: project setup, content creation with box preview, status board and dashboard
Wireframes with placeholder copy and numbers, as in the original.
  1. Admin

    Project setup

    Countries, deadline, category, serial numbers, and the reviewers for copy and regulatory approval.

  2. Marketing

    Content creation

    Copy entered once per feature, with a live preview on the box before it goes to the factory.

  3. Reviewers

    Status board

    To do, in progress, to be reviewed, completed, with priority on every card.

  4. Managers

    Dashboard

    Progress by category and reviews per user, to see where the pipeline is stuck.

Write copy, preview it on the box, and approve it as each role.

Try the prototype
Back to all work