Technology Design Process: Overview

In this series of posts, I will explore the five general steps of the technology design process: Envision; Discover; Design; Develop; Launch.

I find that initially starting a brand new project is exciting!! Many times I also find it to be a bit daunting, as I stare at a blank page unsure where to begin. To help overcome this initial writers block, I begin by breaking the project into five elementary steps. This simple five step process helps ensure that any new technology project is successful in the eyes of its stakeholders.

1. Envision
2. Discover
3. Design
4. Develop
5. Launch

Now while many might rightfully argue that each of these steps is a process of its own, I contend that these five fundamental high-level steps are key to all successful technology projects. I have personally utilized this simple plan equally well for web site design projects, database design projects, as well as any other technology project that I have been faced with.

---

Envisioning is a business-centric, problem discovery, situation-assessment and opportunity planning process. It is designed to improve the odds for an effective solution by establishing clear business-focused success criteria.

---

During discovery, business stakeholders are asked to answer the who, what, when, and how much questions.

• Who will represent the interests of each involved business department?
• What are the business goals, expectations, and success criteria?
• When is completion required?
• How much is budgeted?

---

Once the project is properly defined, the design begins. This is the prototype phase of the project. Prototype concepts are basic design ideas; the first look at the project's possibilities. Discovery and design form an iterative loop, as concepts are vetted, including impact to timelines and costs.

---

After the design is signed off and finalized, development begins. Depending on the project's specific requirements this phase may include:

• application coding (programming)
• environment testing
• stress testing
• user acceptance testing
• operations, backup and recovery procedures creation
• documentation

---

Once the development efforts are completed, the new technology solution is ready for deployment. The launch however is about more than just deploying the application. It involves raising awareness, ensuring operational readiness, and tracking acceptance.

---

When applied properly, the steps of the design process can save time and money (as well as headaches and re-work). And by establishing clear success criteria coupled with open communication and collaboration my stakeholders are practically guaranteed to deploy a winning solution and have a great experience in the process.

Over the course of my career, this simple project outline has proven itself equally applicable to web site design, database development, business system construction or any [insert technology project type here] project I have encountered.

In the coming posts, I will explore in more depth each of the phases.

Read more...

Building a Sitemap

Few would consider building or remodeling a home without blueprints, yet many construct and redesign their web sites without a sitemap. 

Few would consider building anything much larger than a garden shed without blueprints.  The results for those that have are interesting, to say the least.

One of the most famous examples is the Winchester House in California.  Built continuously over the course of 38 years, the house was constructed and renovated one room at a time without consideration for the other rooms surrounding it. 

This lead to some very unique features:

•  stairways to nowhere
•  doors opening onto brick walls
•  second story doors exiting the
   house without deck or stairs

You would be hard-pressed to find someone desiring to take on a construction project like the Winchester House today.  Yet I work with clients regularly that have websites originally constructed over 15 years ago which have just evolved, new sections being added, sections being removed from site navigation but still linked to from internal pages, etc.

A scan of a current client revealed their website had over 500 pages, while they were sure it contained less than 30.  Ten years of organic growth and design led to a complex site with many hidden pages and more than a few broken internal links.

This is where the value of a sitemap comes into play.  While many may have utilized a sitemap as a wayfinding tool on a website, their primary use is in organizing a web design project.  Kim Baer, author of Information Design Workbook writes:

Sitemaps are foundational tools of information architecture, related to the master planning documents that architects have traditionally used when designing extremely complex building projects such as hospitals or university campuses.

They are also an excellent tool to ensure consensus among the various stakeholders in a project.  Detailed sitemaps, such as those built by a graphics tool like Visio are excellent reference documents, both during the construction of a website and afterwards for planning future renovations. 

Read about: Mindmapping.

I use these regularly, but find using a mind-mapping tool in brainstorming sessions with a client to be far more fluid to the dynamic nature of the meeting.  Once consensus is reached in the meeting, I produce a detailed map for the client to review and ultimately sign off on.  This then becomes our jointly agreed upon plan.

Don't let your company's web presence become the next Winchester House.  Take the time to complete a site map before beginning page construction.

Resources Cited:

Baer, Kim, and Jill Vacarra. Information Design Workbook: Graphic Approaches, Solutions, and Inspiration+ 30 Case Studies. Rockport Pub, 2008.

Read more...

Wayfinding in the Real World

The art of wayfinding is as old as written history.  In this post I will look at a modern real-world implementation of this ancient art.

The art of wayfinding has been utilized for as long as there has been written communication.  Ancient cave paintings are known to depict crude maps.  For overland travel, cartography and trailblazing have been combined for centuries.  In earlier eras, trailblazing many times consisted of marking trees along a trail with hatchet chops.  Today this is done in a more ecologically friendly form, using paint or plastic markers.

Near my home, Norman Lake State Park uses a combination of signs, maps, and trail-blazing marks to aid in wayfinding.  This utilizes many of Passini’s Sign-Posting principles of Information Design, including presenting the right information, where it is needed (Jacobson, 2000, p. 90). 

This is evidenced by the placement of a general map, and a detailed insert in the parking lot. 

Then at the trailhead there is a clear sign as well as a trailblazing mark.  Following the color and shape of the mark leads one down the full trail.  Turns are indicated by two marks, the upper being left of the lower if the trail veers to the left, or on the right for trails turning right. These standards in form and presentation greatly aid in both finding the desired path and remaining on that path.

Resources Cited
Jacobson, R. (Ed.). (2000). Information Design. The MIT Press.

Read more...

The tools I use.

In this article I will go over the Information Design tools I regularly use in the production of this blog.

I was recently asked what tools I have used in the design and production of this blog.  There have been three primary tools I have relied heavily upon.  The first is Photoshop from Adobe for the creation and manipulation of the images displayed on this site.  The second is CorelDraw from Corel.  This I use for the production line art, which I then finalize in Photoshop.  The difference between these two is Photoshop is a raster-based (think pixels) product, while CorelDraw is a vector-based (think lines) program.  Raster images do not scale well, but vector images are not designed for display in web browsers. 

For information design purposes, I would add two additional desktop tools from Microsoft - Excel for the production of charts and graphs; Visio for the creation of flowcharts and certain types of other graphics.

However, the single most important tool in use for the production of this site is Blogger – the content management system underlying this blog.  Blogger provides a number of key tools for the creation and customization of a blog site.  Starting with fully customizable HTML-based templates, and easily added gadgets, the system allows for each blogger to craft a site unique to themselves.

While the tool allows an author to fully customize their blog using client-side Javascript, CSS, and HTML, it also provides simple to use editors and site designers that require no knowledge of these technologies.  Additionally it provides for building a social network component into a user’s blog through comments. Finally it provides an excellent set of tools for performing web analytics, showing how much traffic a site is seeing and where that traffic is originating.

Best of all, Google provides all features of Blogger for free.  There are no upgrades.  The only opportunity to spend money is on high-end third-party templates.
 

Read more...

Every picture tells a story

While a picture may be worth a thousand words, it is only valuable when people look at it.  InfoGraphics adds the additional complexity of needing to be understood.  The challenge becomes producing the right image, shown at the right time to the right audience. In this article I will explore Dan Roam's methodology for making the right choices.

Napoleon Bonaparte is credited with saying “a picture is worth a thousand words”. This is especially true today where we have relatively little time to spend on absorbing knowledge in our information dense society. The new profession of Information Design and concept of InfoGraphics has risen up around this fact – aiding people in more rapidly grasping meaning through transforming information into images.

However, it needs to be the right image presented at the right time to the right audience. To accomplish this, Dan Roam recommends that an Information Designer utilize a methodology he has dubbed Imagining. As a preamble, the designer is encouraged to close their eyes and begin visualizing what is not readily visible. A designer draws connections between different bits of information and develops a mental understanding. They then work on how to best visually portray the information to convey the information in an easily digestible format.

But what format? While Microsoft Excel provides 53 chart types to convey information. Microsoft Visio adds hundreds more to the possible formats. However, all of the charts and graphs can be grouped into one of six archetypes. Each of these are associated with one of six basic questions: Who/What; How much; Where; When; How; or Why. This forms the first axis of Dan Roam’s Visual Thinking Codex. To use the codex, a designer needs to decide the type of information to be conveyed. Is it about a person, a group or an item? Then develop a portrait. Is it a question of how many or how much? Then create a chart. Is it about a location or structure? Then craft a map. Is it time-dependent? Then construct a time line. Is it about how things fit together? Then build a flowchart. Or is this a question of WHY? This calls for a multi-variable plot which can be the hardest to create.

Readers of Mr. Roam’s The Back of the Napkin are familiar with his SQVID (and I am not talking about seafood). SQVID stands for Simple, Quality, Vision, Individual attributes, Delta (change). He uses these five attributes to define the five dimensions of all infographics. Each dimension is an either/or decision to be made based upon the target audience. Is this a simple drawing, or should it be elaborate? Is portrayal of Quality or Quantity more important? Is the audience more concerned about a vision of the future, or today’s execution? Is the goal to highlight a single attribute, or compare items? Finally, should focus be on changes or on the status quo?

While all well-developed infographics contain all five aspects, the next step in leveraging the codex is to determine which aspect is most critical. For example, if we are looking to describe inter-relation of data – ie, show where items overlap – then we would go to the Where row and determine that a map is the best method for conveying the information. Next, if we determine that the information is primarily focused on a goal or vision, we would look to the V column and see that the optimal framework for our use is a Venn diagram.

The Charities Aid Foundation (CAF) world giving map provides a clear example. From their map we can determine that their intent was to show how much each country gave and how they compared. Using the codex, a bar chart is recommended. However, the nature of information – country data – includes a Where factor, which would indicate the use of a map. To encompass both the Where and How Much factors, CAF utilized a bubble chart where the relative size of each bubble was indicative of their rank and then placed each bubble in the approximate location of the country it represents.

Read more...

InfoGraphics - cure for Information Overload

As the volume of information increases, the time we have to assimilate knowledge from any one item decreases. To help counteract this effect, Information Designers have begun to utilize pictographs to more readily convey understanding. These pictographs have been dubbed InfoGraphics.

Read more...

Design Tools

In The Back of the Napkin Dan Roam explains the four step process of Visual Thinking: Look; See; Imagine; and Show. The Information Design process would appear focused on the Show step, and most design tools are targeted there. However, tools do exist to aid in the other steps. In this article I will be examining one that I use regularly when working with clients as we collectively Imagine their future design.

In The Back of the Napkin Dan Roam explains the four step process of Visual Thinking:

1. Look - Take in all the information available to build an initial "Big Picture"
2. See - Assess the information and begin making connections
3. Imagine - With eyes closed, visualize what isn't immediately obvious and begin manipulating the information to make hidden connections visible
4. Show - Find the best method to visually represent a summarization of the information observed and the connections found

The Information Design process would appear to be focused on the Show step, and most design tools are targeted there.  Andrew LeBarron  briefly reviews three of these: Piktochart; Gelphi; Gliffy; all of which can be used to create striking visualizations of information. While not as readily visible in the final web design, one tool I frequently use is FreeMind.

FreeMind is a mind mapping tool useful in creating diagrams that visually outline information. A mind map is a graphical way to represent ideas and concepts. It is a visual thinking tool that aids in structuring information, helping us to better analyze, comprehend, synthesize, recall and generate new ideas. A mind map is often created around a single word or text, placed in the center, to which associated ideas, words and concepts are added. Major categories radiate from a central node containing the key idea, with lesser categories as sub-branches of the larger branches. Categories can represent words, ideas, tasks, or other items related to the central  idea.

Mind Maps organize the information in the same way our brain organizes information. This makes it very natural and easy to understand. Our brains like thinking in pictures. The smooth curves and colorful pictures create powerful images for our brains to remember.

We have two halves to our brains which think in different ways. The left half thinks linearly following direct linkages to related ideas. Our right brain likes to see the whole picture with colors and flow. A mind map caters to both sides of the brain at the same time, which makes it a very good way of storing and recalling information, presenting complex concepts to other people, and brainstorming new ideas.

Brainstorming is encouraged through the use of a radial hierarchical layout and non-linear creation of categories. This creation process generates mind maps that are unique in structure and design, making it easy for our brains to process and retain the information.

I have found mind mapping a useful practice in helping clients identify key driving forces behind web projects, as well as the information and its association to be contained within their web-based system.  Below is an example mind map created interactively with a client describing a future cloud-based business system.

 

Works cited:
Roam, Dan. The back of the napkin (expanded edition): Solving problems and selling ideas with pictures. Portfolio, 2009.

Read more...