eROI Days Email Agency

Social networking has blanketed the news for the past 18 months, not because it’s a fad, but because it works. In our 2007 Online Marketing Predictions report, we concluded that social networking would keep growing strong, but that it would become very niche-oriented. eROI was fortunate to get paired up with client MatchPoint Corp which came to us with an incredible concept of targeting professional parents who want to connect with one-another, network for intros or referrals, find relevant service providers to support their home and business lives, or ultimately find high-value, flexible contract-basis jobs. In short, this niche business model is part LinkedIn, part MySpace, part Monster.com, and part full-service staffing agency. MatchPoint asked us to architect, design and build this well-designed and powerful tool for fostering online community. And, it had to be done in four months. So, we did…Starting from a blank slate is exhilarating but scary.

What follows are the perspectives of six different people, discussing five different pieces of this puzzle that needed to come together seamlessly in order to complete a stellar site.

Strategy Development by Ryan Buchanan, CEO; Anna DeMent, Sr. Account Exec.

On a global scale, social networking is getting more and more niche for a reason. It works. Niche social networking sites foster a loyal community of users who have something very specific and valuable in common, like professional parents. Furthermore, MatchPoint has something most social networking companies do not have: a business model based on profitable staffing placement, not advertisements. It also has an exclusive network where professional parents only have full access to the entire site after a MatchPoint Regional Manager approves their profile. Therefore, it’s a highly targeted network from which professional parents, companies, and service providers stand to gain substantial value.

From a website strategy perspective, we wanted to create a much more visually appealing social networking destination than sites like LinkedIn and MySpace. We also wanted to have very clear calls to action to draw the user into the flow of the site (and accomplish MatchPoint’s business objectives as well). On the homepage, new users are drawn to “Create a Profile.” Secondarily, users have the opportunity to login, search profiles and network or search jobs. To test drive the site and see live content, we wanted to enable the user to get access to a small portion of each registered user’s profile and job information before requiring the user to login for full access.

There are three distinct users: professional parents, clients / companies and service providers. Once logged in as a professional parent, she or he can “Expand my network” and invite others to join, or select job favorites to work with the MatchPoint Regional Manager on flexible contract-job placement, or connect with Service Providers like nannies, daycare, house cleaning, or even dog walking. Logging in as a company rep, you can post and manage company job listings as well as identify talented, prospective parents to fill those jobs. Creating a service provider profile enables that person to post service listings relevant to professional parents.

Branding + Design by Todd Quackenbush, eROI Designer

Branding: a great example of when concept, execution and trust in the designer came together well.

The logo: made up of two different pieces, the mark and the type, both were customized and work with one-another but can still function independently. The mark represents an abstract “m” consisting of three elements, two of the same shapes and a point, all of which come together, implying a network of people that come together to function as a new entity. The form is clean, sharp in some places and soft and curved on others. The colors are very contemporary.

The type: based on a font but with much customization to ensure it belongs with the logo’s look and feel. Intentionally, grey was chosen instead of black, making the logo pair, or lock up, more comfortably with the orange.

The website: great because Jeff (experienced in interface and information design) was able wireframe and break down the functionality, freeing me, the designer, to focus on look and feel. Tag team! The challenge of the site was to get so much functionality on each page to feel comfortable, designed, and not crowded. We spent a lot of time going back again and again to drawing on the white board, envisioning how the user would interact with all aspects of the site and what would or would not be intuitive. This included the registration wizard, where people might expect to receive a triggered email sent to their inbox and being able to save and continue the current step they were in. Also the colors for the site and rollovers were based on the colors from the branding.

Interface Design by Jeff Reynolds, eROI Senior Designer

It has been said that good user interface design is invisible. I think it’s important to keep this in mind — that the best interfaces are generally transparent to the user to the point that end objectives are immediately recognizable.

When one is designing a simple website, allowing for intuitive interaction is not an incredibly difficult task. Users have learned through repetition to expect certain circumstances — navigation across the top or on the left side, paragraphs of body copy with “read more…” links at the bottom, etc. There is a sort of standard in simple web layout, and this is beneficial to end users for obvious reasons — people know where to go to accomplish various tasks.

The web is expanding, however, in huge ways. There is now the ability to create, and a demand for, web-based services and applications that go far beyond what people have typically become accustomed to, and what has been bred into web design. What this creates is a need for interfaces that, in some cases, are as niche and customized as the services they’re linked to. These interfaces are based around new, custom content and functionality that may have never before been done on the web (or perhaps have never been done well). So how does one design an interface that will feel comfortable and intuitive in instances where no standard has been set?

First things first, and although it may seem obvious, it’s amazing how often this is muddied: the designer has to determine the objective of the new service or application. The designer must ultimately be very comfortable saying, “Blah blah blah is what we really want our users to do.” There are typically a lot of elements that support this final conclusion, and all those supporting elements are of varying importance, but hierarchically, the idea of getting a user easily and efficiently to the information you’re providing must always be the top priority. It’s easy to let a project become overwhelming because of its many features, or let excessive design drown out the objective. This is why it’s so important to “keep your eyes on the prize” as a designer.

Next, the information being delivered has to be examined on a more granular level. Essential to any successful web project is a broad understanding and documentation of the elements necessary on the various pages that a user will be interacting with; this knowledge allows all elements to be taken into consideration, and the most complete vision of the project to be implemented from the start. There is often no way to know what the future will bring, and interfaces need to incorporate a level of elasticity so that unforeseen elements can be introduced, but having the highest possible level of information at the start is nonetheless of utmost importance.

When the designer has these details, they can begin to lay them out; here is where arguably the most important layer of design is implemented. Intuitive interaction is developed in these early stages — the grouping of similar elements, placement of objects in appropriate areas, hierarchical alignment, etc. It’s incredible important to know how a user will see these details, and to plan for it. Sometimes it’s as simple as saying, “This edit button relates to that image, so they should probably be directly connected.” Other times it’s more complicated, such as a determination of how a step-by- step process should be implemented (should users be able to go back in the process? is this going to be edited in the future? how much time is filling out these forms going to take? should we implement a save function for an incomplete process?).

Polishing typically comes after this information design stage (though realistically they’re often happening concurrently), and involves the more conventional brand implementation, and “prettying up” of the interface. It’s easy to dismiss this step as fluff, but that’s really a huge disservice. Making a project feel appropriate within its brand, and making it fun to look at and interact with, is a huge part of sustaining an audience and getting potential users excited about it in the first place. When the two levels of the design — the information and the polish — work together, the result can be almost magical.

An interface that is invisible is one that is concise, intuitive and informational.

Producing the Site by George Huff, Emerging Technologies Manager

One of the major goals of being a production artist at eROI is to build a site pixel-perfect; a person comparing a site’s Photoshop comp to what’s in their browser will see exactly the same thing. Being a major goal, this is also a major challenge. MatchPoint presented a whole slew of challenges to our production team which we addressed through use of a ton of new tricks.

As you may have noticed, there is a good amount of textures and patterns throughout the site. The layout is challenging in the sense it can’t be put in a box. There are also drop shadows everywhere, and as we web producers know, PNG images are so tricky! So what did we do?

Utilizing CSS, HTML, and JavaScript, we molded and shaped this site to be pixel-perfect, as well as keep our programmers happy with the flexibility of the content. In building MatchPoint, we walked the line between aesthetics and functionality, and as with any challenge, it inspired us.

Programming the Web 2.0 Site by Tore Gustafson, Programmer Extraordinaire

Social networking sites at their core are really a collection of a lot of common and architecturally simple applications. What is a blog from a development standpoint? Really, it’s just a few database columns including things like a date, an article and a title. Then all you need is the application framework to edit and display that information. A social networking site takes applications like a blog, or email, or adding a person to your personal network, and builds a cohesive framework for all the pieces to play together.

Building MatchPointcorp.com from scratch, however, was by no means a small task. Mapping the database architecture for a site that offers so many different capabilities was probably the most time-consuming task, not to mention building interfaces for both delivering content to the end user as well as an administration portal enabling managers to administer their users, companies and service providers, and ultimately connect them to one-another.

Probably the most enjoyable aspect of developing sites like this is getting cool Flash-like (and much more) effects working with plain old JavaScript. JavaScript frameworks like prototype and the ensuing add-ons like mootools have made JavaScript not only more consistent across browsers, but actually fun to code. If you’re a developer and still ignoring JavaScript, grab a copy of prototype and dig in!