PROJECT PLANNING AT ACRO

Strategy: Prototyping

Creating a visual reference that guides the development of your project is often a very necessary part of our strategy process. A mockup of page layouts, with basic interactions, brand styling and placeholder messaging, helps bring the IA and TA to life and helps all stakeholders align on the look and feel of your site. Anders explains it all in this quick video. 

Transcript

Hi, I’m Anders Paulsen, Director of User Experience at Acro Commerce.

In this next portion of our Project Planning series, we’ll move on to the Prototyping step of our Strategy phase.

Once initial recommendations have been presented in the IA and TA, and we’ve established a shared vision for moving forward, our team will begin to Prototype.

A prototype provides an initial mockup depicting layouts and basic interactions, offering a visual reference for Development.

• Prototypes can be designed as low-fidelity wireframes,
• or as high-fidelity design concepts, showing the intended look and feel of the final build.

But at this stage, we’ll most commonly work in a state we refer to as ‘Mid-fidelity.’

By prototyping in a Mid-fidelity state, we’re able to leverage Gesso, our Project Accelerator.

Working with an established library of components, we’ll begin with some quick updates to the Design System tokens, which allow us to apply basic brand elements — like your colour values, logo files and fonts — which are reflected throughout the prototype pages.

Next, we’ll update the prototype’s Menus based on your Sitemap diagram, and begin to add placeholder Messaging to create Calls to Action, with sample Imagery to suggest related visuals.

At this point, it can be tempting to continue iterating on the design of the prototype.

As a visual reference, designed without working code, a prototype can be created relatively quickly.

However, it’s good to keep in mind that this is really just a picture of what your site could look like — something you may hear us refer to as an ‘artifact'.

An artifact is a reference created for planning purposes, but is not the actual thing we're ultimately working to build.

That isn’t to say it doesn’t provide value, but our goal is to develop with efficiency.

Production timelines can go by quickly when creating too many highly detailed artifacts or by working through endless rounds of revisions to perfect something that isn’t actually the end product.

Our focus at this time is to prototype using our default page layouts to structure workflows that are most essential to your build.

This helps us identify early on where custom design and development will be required.

In development, we’ll work towards building out the architecture for a fully functioning site that leverages system defaults, while establishing required connections and integrations.

Working in a mid-fidelity state allows our Developers to work most efficiently — building functionality and completing essential features ahead of applying custom styling.

Of course, a Creative Design Concept will still be produced in time, and component styling will be applied over the course of the project.

But, in the meantime, our goal is to deliver best value, by focusing on the right thing at the right time.

As the team works through each step of the Strategy phase, they’ll also be preparing for development by writing ‘Stories’ which relate to the various requirements identified during Discovery — these stories make up the issue structure used to create the Project Backlog. 

In the next chapter, we’ll look more closely at Story Writing, just ahead of our final chapter, Project Backlog.

Thanks for listening.

Up Next, Story Writing.