Evolution of a Graphic Design Concept

Early in 1999, I was a member of a small group of entrepreneurs who realized that there might be an opportunity to create a successful career site. With the rise of generalist job sites like Monster.com, it seemed obvious to us that major niches were being overlooked.

After extensive analysis, we envisioned a specialist career site for professionals in the fields of accounting and finance. Our first choice had been the IT field, since that was what we were most familiar with. But the IT field already had several niche players with a good head start. The accounting field was wide open and our group also had some expertise in this area, so that's what we went after.

We came to the conclusion that this new business, which we called CareerBank.com, should be positioned as a vertical portal.

While the site would offer the job search and resume posting features typical of other career sites, it would also offer a wide array of content tailored for its audience, including career articles, accounting articles, contests, reviews and news. The site would also support advertising.

By mid-1999, we had a coherent vision for CareerBank.com, a business plan and funding from an angel investor. We also had 75% of the basic development completed.

But we didn't know yet what the site was going to look like.

Developing a solid and effective graphic design for a web site takes work, but most of that work is never seen by the outsiders. A good design is the end result of an iterative process, one in which numerous designs are created, evaluated and refined.

In this article, I'm going to lift the corporate veil and show how we developed the graphic design for CareerBank.com.

The Preliminaries

Before you get to the graphic design phase, though, you need to develop an understanding of the audience for the site. That understanding will drive many of the decisions made when evaluating competing designs.

We started by going back to the basics, answering questions like:

  • Audience: What group of people will be using the web site?

  • Goals: What should the site accomplish for its users? And for CareerBank.com?

  • Aesthetics: What look is the audience likely to appreciate? Is that the same look that CareerBank.com executives will like?

  • Impression: What impression should the site convey to users? Zany? Cool? Informative? What impression should users take with them after they've used the site?

Developing solid answers to these questions was a vital part of the design process.

Graphic Design Iterations

After the preliminaries, we began working with a graphic designer whom we had used on other projects. Our graphic designer created a series of design concepts based on our requirements. The goal at first was to create a number of different design ideas for initial evaluation.

The design evaluation team, made up of both technical staff members and the entrepreneurs, then identified design elements, colors and themes that they liked. From there, a refinement process began, with more designs being created based on the evaluation input. Finally, a design was achieved that met the approval of the entire evaluation team.

Most of the CareerBank.com designs are available as part of this article, with detailed commentary about each one.

Table of Contents 

Concept 1 The first design, with a play on the "bank" theme.
Concept 2 Sometimes you try an experiemental design.
Concept 3A variation in response to early comments on the design.
Concept 4 A departure in a new direction, and a new logo.
Concept 5 A major step in the right direction.
Concept 6 Refining the design some more.
Concept 7 More refinements. Used to announce impending launch.
Concept 8 Closing in on the final look. All the elements are in place.
Concept 9 Maroon makes a striking impression as a color choice.
Final A screenshot of the final look which was approved.

All of the designs were stepping stones to the final design that CareerBank.com ultimately adopted.

I hope this exploration of the design process has provided some insight into the development of a relatively large commercial site like CareerBank.com.

 


Concept 1        Back to TOC

The first concept was rough, but incorporated many of the elements that had been mentioned in requirements meetings. It quickly became clear that the nature of the audience for the site would have a large impact on the design.

The audience consisted of professionals in the accounting, banking and finance areas (the insurance area was added several years later). According to research, this group was one of the last to adopt the Web as a tool. Hence, the audience would not be technically savvy, nor would audience members be likely to have the latest technologies (i.e. - the latest browser, operating system or computer).

Because this effort was undertaken in the 1999 - 2000 timeframe, the design was tailored for a 640x480 screen, which was the predominant screen size at the time. Since browsers tend to display other objects on the screen, like scrollbars for example, this meant that the usable width of a web page would be 600 pixels.

Other requirements dictated a navigation scheme with the a menu at the top for the most frequent user activities on the site, and a left-hand navigation bar. Additional content would appear in a right-hand column, but this feature would not necessarily be present on all pages, e.g. - the search results page showing job listings was not going to have a right-hand column. The tone for the site would also be conservative to match the nature of the audience.

There are numerous problems with this look-and-feel. To begin with, the coin graphic just doesn't, well, resonate in any way. There's also no clear logo for CareerBank.com. Additionally, the plan was to include a banner at the top of each page, but the shape of the sample banner is clearly not acceptable (and we had a lot of fun teasing the graphic designer about that, too).

Note that we weren't unhappy with this stage. This wasn't even close to the final look-and-feel for the web site, and we knew it. At this point, we were just trying out ideas.

 


Concept 2        Back to TOC

This design was an experiment. It's generally a good idea to try out a few experimental designs to encourage the consideration of a range of features. Sometimes an experimental design will reveal some new design element that can be lifted out and incorporated into other designs.

Not this time, though. This one was rejected.

Note that the rejection of an individual design is a normal part of an iterative design approach. You'll never find a group of people that will like every design concept because, with a creative process such as this one, it's not possible to please everyone every time.

 


Concept 3        Back to TOC

Concept 1 returns in a new guise. The design evaluation team noted that Concept 1 seemed a little too dark. This design uses a lighter blue color. Notice that the rays of blue that extend out from the coin image are lighter and extend further than they did before. Also, the menu entries on the left-hand navigation bar have been emphasized more.

Another change is the banner at the top of the page, which is now shaped like a conventional 468x60 banner.

Variations of this design were also created in green and red to help the design evaluation team in determining a basic color scheme for the site.

The team liked Concept 3 (the blue version) in general, but felt some misgivings about the image in the top left corner of the page. In a play on the "bank" aspect of CareerBank.com, the coin disappears into a slot as if the web site were a piggy bank. The team felt that the coin was not distinctive enough for branding purposes, though they wanted some symbol which would be meaningful to accountants.

Green is the color of money, and means positive things to accountants. Here, though, green seemed a little garish and overpowering. Blue was clearly a better choice of color than green for the site.

If the color green has positive connotations for accountants, well, red generally has negative connotations. To accountants, red is the color associated with businesses that are failing.

Needless to say, red was rejected as a color for the site.

But notice that these Concept 4 variations of the design gave the graphic artist the opportunity to experiment with another way to emphasize the menu entries on the left-hand navigation bar.

 


Concept 4        Back to TOC

This design represents a departure from the previous designs. After reviewing the previous designs, the evaluation team wanted a different logo in the upper left-hand corner of the page for branding purposes. They also wanted to incoporate an image as a common element of the site which would resonate with accountants.

The "A/CB" logo was perceived as an interesting experiment by the team, but not a successful one.

For the first time in the design process, a calculator image was incorporated into the design. This element resonated with the team, and would eventually become part of the final design, albeit in a different form. However, it was felt that including menu entries within the screen area of the calculator would be nonintuitive for the audience.

There were also some other problems with the design. The tabs, along with the graphics underneath the tabs, took up too much screen real estate. Additionally, it was felt that having the menus on the right side of the page would have a negative effect on site navigability. Despite these flaws, this was a considerably more polished design concept than the previous ones.

 


Concept 5        Back to TOC

The calculator image resonated so well with the evaluation team that it made its way into this design, which incorporated the calculator into the logo (as seen in the upper left corner of the design). Also, key user activities have been set up in a tab style.

The evaluation team felt this design was "tighter" than the previous designs, and thought it had a nice feel. They liked the calculator as part of the logo, but were less keen on the "ACB" portion of the image. They noted that the calculator took up a great deal of screen real estate, but they still liked it.

This was also when the evaluation team began hearing the refrain, "Does the calculator actually work?"

Clearly, this design represented a major step in the right direction.

 


Concept 6        Back to TOC

This design is mostly a refinement of the previous one. The calculator remains as part of the logo, but the paper that previously extended out of the calculator image is gone. The tab motif for the menu entries at the top of the page has been kept.

A dark version of green has been used as a dominant color on the site. It's a conservative color, and a dark green should work well with accountants.

 


Concept 7        Back to TOC

The calculator logo remains, but now it has a three-dimensional look. The evaluation team had determined by this point that the calculator image would be part of the final design.

At my urging, the menu entries at the top of the page have been turned into buttons rather than tabs. I felt buttons were more appropriate in this context than tabs.

The evaluation team also liked the way that "CareerBank.com" was displayed at the top of the web page.

Since news about CareerBank.com had already leaked, this design was actually published on the web site to announce the impending launch of the business.

 


Concept 8        Back to TOC

We're closing in on the final design. Each successive design iteration now consists of tweaking or enhancing individual design elements.

The evaluation team likes the gray pebbled look of the calculator, with its three dimensional feel. However, it's generally felt that the calculator is too large.

Interestingly, the calculator has resonated well with focus groups, but a constant refrain is being heard: "Does the calculator actually work?"

 


Concept 9        Back to TOC

Concept 9 was actually presented to the evaluation team at the same time as Concept 8, but the team preferred Concept 8.

However, after extensive discussion, the team decided that the one thing they liked about this design was the maroon color. Further research indicated that maroon was a conservative color that resonated well with accountants. Maroon was to become the dominant color in the final design.

 


Final Concept        Back to TOC

Here's the final design for CareerBank.com.

Note that maroon ended up being the dominant color choice for the web site, but it didn't actually make an appearance until Concept 9.

The calculator first appeared in Concept 5, but was successively refined in further designs. In this design, the calculator was simplified (a row of buttons was removed). It was also made smaller and more compact by incorporating the company name into the screen of the calculator.

Even more startling, the technical team implemented a JavaScript solution that made the calculator actually work. the evaluation team felt this was essential because of the reactions of the focus groups. There is a design principle that states, "If a design creates a resonable expectation that something should work a certain way, make it work that way." The focus groups were almost unanimous in expecting the calculator to function as a calculator.

Admittedly, the fully operational calculator was a bit of a gimmick, but it was nevertheless effective. It worked on two levels. In discussions, it left people with something interesting to remember about the site. In the crowded arena of career sites, that was a good thing.

On a second level, it demonstrated a degree of technical proficiency available to CareerBank.com which was lacking in many other career sites. It wasn't that the calculator itself was important, but rather that it showed how casually and easily the development team could accomplish difficult technical tasks.

After all, remember, this was JavaScript circa 1999, without all of the nifty open source libraries that are available today.

Over the years, the design was further refined into a sleeker, more business-like look. But I find that I still have a certain fondness for the original look-and-feel that came out of this first refinement process. It may not be as polished as in later years, but it's the design that got the company going.

 



Comments

No comments yet. Be the first.



Leave a Comment

Comments are moderated and will not appear on the site until reviewed.

(not displayed)