Account Managers wear a lot of hats. Our goal is to keep the client happy, keep the project on time and on budget. With that, communication is key throughout the life of a project. There is one tool that drives the project to a successful completion and at the heart of the Account Manager’s role is: the deliverable.
Dan Brown, Communicating Design, defines deliverables as: “A document created during the course of a web design project to facilitate communications, capture decisions, and stimulate innovation.”
At Paramore we have a few, simple, deliverable milestones throughout a web development project.
Strategic Development Plan
At Paramore we identify and include the following information in our primary deliverable at the beginning of a project, the strategic development plan:
- UX (User Experience) information
- Competitive Analysis
- Content Audit
- Goals and Success Metrics
- AND, some special Paramore secret spices that I cannot divulge. (Fine. I’ll tell you. We like websites, and we drink a little. It’s liquor.)
Both the site map and wire frame are deliverables of the Information Architecture phase.
Site Map: During site mapping, we plot out the content for the website using a current site content audit and the strategy outlined in the Strategic Development Plan. The site map visually shows the hierarchy of navigation in landing pages, sub pages, sub sub pages, etc. We lay this out in OmniOutliner, export it as dynamic HTML and place the site map on an online comps page which allows us to present the site map to the client interactively. Once we’ve collaborated with our client on the site map, defined all types of content and where each lives, we move on to wireframing the main templates of the site based on the site map.
Wireframes: With the approved site map (translation... deliverable) in hand, the designer on the project creates the wireframes for the site, typically home page wireframe first and then subsequent interior pages. Like a blueprint, the wireframe visually shows the hierarchy of content on a specific page template without any color, design or copy. (See a definition of wire frames below.) The goal is to define the flow of information on the page and arrange it in a way that is intuitive to the user. Wireframes created match the specific types of content and page templates identified by the site map.
With approved wireframes, we move on to the design deliverable. In a client’s mind the design, second only to launching the site, is the biggest deliverable and most important. Everyone wants their site design to stand out above the rest. And, the work done in the information architecture site provides context for us to think strategically about the design deliverable. The team knows a website is more than pretty colors and fancy pixels, that is why it is important to tie the elements of the design back to the strategy giving each piece a purpose in the design deliverable. The home page and each wireframe template is designed out to set the standard for every section of the site. It’s important to note that designing to the strategic development plan and information architecture decrease the chances of getting derailed in design phase. Because the deliverables that lead up to design are collaborative (both agency & client side), nine times out of ten, there are no surprises when presenting the design deliverable. Typically, it’s a tweak here... a tweak there... and BAM: Approved.
Those are just the deliverables that lead up to the start of website development. The more we hone these steps, the more efficient we are with our web development and maintaining profitable web development projects.
What deliverables do you use to communicate the progress of a project with your clients?
See below for an excerpt from Dan Brown’s book Communicating Design
User Needs documentation:
Persona: A summary representation of the system’s intended users, often described as real people. Any project can have on or more persona's, each representing different kind of audience for the system. Also known as: user profiles, user role definitions, audience profiles.
Usability Test Plan: The usability test plan describes the goals, method, and approach for a usability test. The test plan includes several different components, from profiles of participants to an outline of a discussion with users. The test plan described here incorporates test objective, test logistics, user profiles, and the script.
Usability Report: The usability report is the outcome of a usability test, whose results are compiled into an actionable format.
Competitive Analysis: A web design competitive analysis shows the differences between the site you’re working on and comparable sites. The differences highlighted and the sites compared in the document depend on the purpose of the analysis.
Concept Model: A concept model is a diagram that shows the relationships between different abstract concepts. You can apply the concept modeling technique in a variety of circumstances to explain different aspects of a web site. Also known as concept maps or affinity diagrams.
Content Inventory: A list of all the information contained in a web site, along with data that describes the information from several points of view, like target audience or location. Also known as content analysis or content audit.
Site Map: A visual representation of a we site’s structure. Also known as a structure model, taxonomy, hierarchy, navigation model, or site structure.
Flow Chart: Flow charts attempt to visualize a process, usually centered around a specific task or function. For web-based processes, flow charts often represent a series of screens that collect and display information to the users. Also known as flows, user flows, process charts.
Wire Frame: A simplified view of what content will appear on each screen of the final product, usually devoid of color, typographical styles, and images. Also known as schematics, blueprints, prototypes.
Screen Design: Screen designs are a collection of images in some electronic format that show what the final web site will look like. Also known as screen comps (short for “composites”), mock-ups, page design, visual design, graphic design, interface design, design concepts, pretty pictures.Share Article