Skip to content

interaction design

Jump to bottom
Dave Crossland edited this page Jan 15, 2016 · 27 revisions

The Product Phase

Product Vision

Explanation of the Product Phase:

The vision is the heartbeat of your product, it is what you are making, reduced down to its core essence. Our customers find it absolutely invaluable when making difficult decisions about design and implementation of their products—all the way from concept to shipping.

Our role is to facilitate you in nailing a precise product vision. We do this by moderating what usually proves to be an intense session, where we help our clients to clarify just what their product vision is.

We always observe that creating this enables everyone in the team to focus on what it takes to achieve the goals that they themselves have set for their product. It is expressed as a concise, sharp, vision statement.

‘Krita is a KDE program for sketching and painting, offering an end–to–end solution for creating digital painting files from scratch by masters. Fields of painting that Krita explicitly supports are concept art, creation of comics and textures for rendering. Modelled on existing real‐world painting materials and workflows, Krita supports creative working by getting out of the way and with snappy response.’

– the product vision of the open source application Krita; read much more about its creation in our blog

Our Product Vision defines and guides the project's development. It was written by Peter Sikking in April 2014 after a detailed discussion with the developers (video) and is accompanied by Peter's blog post

Metapolator is an open web tool for making many fonts. It supports working in a font design space, instead of one glyph, one face, at a time.

With Metapolator, ‘pro’ font designers are able to create and edit fonts and font families much faster, with inherent consistency. They gain unique exploration possibilities and the tools to quickly adapt typefaces to different media and domains of use.

With Metapolator, typographers gain the possibility to change existing fonts—or even create new ones—to their needs.

Metapolator is extendible through plugins and custom specimens. It contains all the tools and fine control that designers need to finish a font.

Functionality Overview

Explanation of the Product Phase:

Having a complete functionality overview of your existing or future product makes designing and creating so much clearer and easier to manage. A deep understanding of the functionality, in conjunction with the project vision and user scenarios, is a prerequisite to develop the interaction concept and helps to prioritise the production process, amongst other things.

Compiling, right‐sizing and maintaining the list of functions—completely separate to the user interaction—is an important part of the product phase, and one which we can only undertake in partnership with our clients.

Our Functionality Overview is the most dry, to-the-point (call it boring) description of what a piece of software does; i.e. its features. It serves as a checklist for the design process—and the project—to know ’what is in the box’ and answers ‘did we forget anything?’

User Scenarios

Explanation of the Product Phase:

Creating user scenarios gives you a map of the essential use of your product: the depth and variety of your users’ activities and the impact your product vision has on them. The scenarios themselves are narratives which express archetypal use by your core users. They are a compact tool that will guide evaluation throughout the rest of the project.

User Scenarios show the essential use, in logical, worthwhile and valuable steps from users’ point of view. We have 7 scenarios:

  • Easy beginnings: make subtle changes to an existing font to adapt it to domain of use.
  • Typographer applies radical graphical treatments to an existing font for a design.
  • Font designer creates a new font through exploration of two compatible masters.
  • Create a font from sketch.
  • The grind: flesh out 3+ masters to a family/multiverse.
  • Extend: add script (i.e. a writing system) support.
  • Extend: add a custom algorithm.

G+ Discussion

Expert Evaluation

Explanation of the Product Phase:

A sharply focussed picture of the current situation; all available resources and information, and how this compares to where their product needs to be, empowers our clients to make decisions confidently.

Knowing the ultimate goal through the product vision, the functionality involved and guided by the scenarios, we evaluate all existing information at our disposal. This can be existing ideas, plans, prototypes and products; as well as an analysis of your competitor products. The conclusion of the evaluation naturally segues into the design stage.

Using the user scenarios as a guide and the functionality overview as a checklist, a review of how other font editor UIs realized the product vision. From this, a report with the good, the bad and the ugly, followed by further analysis and the start of actual design processes.

The Design Phase

Explanation of the Design Phase:

making the solutions model

This is the core concept, the solutions model, to act as the foundation to production of your software. To inform and mould a look and feel. To create interaction that will enable users of your software to reach their goals easily.

This is the top tier of the design that we make, fully determined by all the goals and needs we have agreed with you in the product phase. And of course, only after detailed discussions and reviews with you during the design process.

We will present you with a solutions model that is clear, concise and answers the big questions. It in turn guides and structures the design and development of detailed user interaction for your product. The solutions model will be documented—in wireframe screen designs and descriptions, and is an immensely valuable and self‐contained deliverable for our clients.

detailed design and specification

You may see a design specification as a detailed and definitive design of the overall user interaction and all of its elements, comprehensively documented—to be used by your team as a bible for production.

You may see a detailed design as a process of refinement, created in partnership with visual designers and engineers—through prototyping or over many iterations until the working solution is forged.

For us these two approaches are not mutually exclusive, and both fit into our working process:

  • We create what we deduce to be the right solution for your product, technology and users.
  • We always iterate—whether in design stages with the production team, or in review with our clients.
  • We always work together with media designers, developers and engineers to make a practical, shippable but above all, elegant and compelling solution.
  • We don’t stop until the interaction is of the very highest standard, and we are not afraid of aggressively innovating to achieve that.
  • We work with the structure and resources of your company to make a detailed design that is useable by you.
  • All design documentation will be permanently available in a format which can be reviewed by you as it is made.

Interaction design does not stop at this point. We follow through during implementation and beyond

Design Problems and Goals

Solutions Model

The Implementation Phase

During implementation we offer design support for the implementation team. Thus, when the team is confronted with feedback—be it from stakeholders, users, or via professional user testing, we are there to act on it.

With a steady hand we adapt our design according to the new facts, whilst maintaining the vision and principles that we have established throughout our product phase and design stage. It means that implementation acts as a process of refinement—strengthening the design in partnership with developers and users.

We are used to making on‑the‐spot updates to the design documentation, which is then immediately available to the implementation team.

– Explanation of the Implementation Phase

Detailed Design (wireframes)

This a developer documentation wiki. It can only be edited by Metapolator team members, but joining our team is easy - just ask in the Metapolator G+ Community

Pro Tip: This wiki can eat your work if you click submit after someone else also edited this page and already clicked submit before you! So select all and copy your version first, before clicking submit.

Clone this wiki locally