Posts Tagged ‘feature’

Project Launch: Ringstats

Monday, January 31st, 2011

Ringstats Logo
We’re happy to announce the launch of Ringstats, an online venue that provides a revolutionary way for boxing, MMA, and Muay Thai fighters, managers, and promoters to connect.

The site allows promoters and managers to search fighter profiles and send requests for event matchups; allows fighters to get exposure and research future opponents; allows promoters to promote their events; and allows anyone to find information on training gyms and upcoming events.

As an active participant in the boxing world, our client came to us with a clear vision for what was needed in these sports’ communities and a good idea of how his service should work. Together we examined the various needs and arrived at the likely solutions and the sorts of interactions that would facilitate these solutions as a simple, cohesive, and effective experience on the site.

Ringstats

Having crafted a clear strategy, we then worked with our client to name the site and create a compelling logo as the foundation for the identity. With the identity established we moved into the site architecture and user experience.

To our great delight, this project allowed us to be reunited with our friends at Vector Media Group, who worked to build the backend account systems and CMS for Ringstats. We each worked directly with our client and, of course, together on the UX functionality and then the integration of Vector’s work with our own. As usual, our teamwork with VMG was seamless and successful. What a pleasure.

Our contribution was not limited to design and user experience, but extended into content strategy, as well as the operational and functional strategy of the business. Here, our experience in concept-to-launch-to-promotion of online products proved effective. In the end both we and our client were confident in the choices made regarding the practical operation of the site, the business, and management of the content.

In our view, this project was an example of the ideal marriage of a good idea with a clear strategy and an unreserved investment of mutual trust in all parties. Have a look at the final result at Ringstats.com.

Registration
Profile with search closed
Search results with refine search open

Project Launch: Tapology

Tuesday, October 12th, 2010

Tapology

We’re happy to announce the launch this week of Tapology, the web’s first state of the art network for mixed martial arts.

Tapology is unique among MMA fan sites in how it pulls together a great deal of detailed information from the competitive MMA world, but relies mostly on the user’s input with bout predictions, community and individual rankings, and forum discussion to create a richly-detailed network of information for MMA fans. Tapology is concerned with mixed martial arts, but it’s all about the members who use the site. A site member’s activity and ongoing skill at bout prediction work to build a member’s rank on Tapology. This ranking system works to inform other members in the same way a reputation score might; only this ranking system is set up to be a far more accurate indication of the user’s MMA acumen.

Our client already had a very good idea of what they needed to accomplish and how when they first came to us. As the site requires a great deal of user interaction, we worked with the Tapology team at crafting intuitive and inviting interactive mechanisms to ensure user satisfaction and delight. The prediction mechanism, especially, is head and shoulders above other similar features on other MMA fan sites.

The design was crafted to highlight the content to its best advantage and ensure order and clarity. It was based on the visual brand guidelines that the Tapology team already had in mind. Technically, our approach was to exercise simple HTML and CSS to its best advantage to accomplish much of the interactive behavior, keeping the pages comparatively lightweight and quick-loading. There was liberal use of JavaScript for certain interactions, but simplicity and efficiency were the overriding guidelines for our front-end development. The Tapology team did the rest, implementing a powerful and elegant back-end to drive the website. The result is something of which we’re all proud and we’re very happy to have taken part.

Tapology: the web’s first state of the art network for mixed martial arts.

New Product from Unit: Curations

Thursday, October 7th, 2010

We are very excited to share with you the latest in UI goodness: the Curations Series.

A Curation is a polished distillation of the best thoughts and articles the people of Unit have to offer on any given subject, taken from this blog and our personal sites. Each Curation volume is laser-focused on keeping your design, development, and professional chops at their absolute best.

Here at Unit we are unabashedly proud of how we do business, and we want to share these processes with you. So, quite fittingly, we open the Curations Series with PROCESS, a collection of short essays on design project process. PROCESS contains examinations and advice on aspects of design project process, such as working with overseas clients and other agencies, team interactions, handling deadlines, conducting design presentations, maintaining professional integrity, and much more.

On sale now in PDF and ePub formats. Enjoy!

White Labeling Unify

Tuesday, August 17th, 2010

The current model for most web applications gives us a trade-off: free with explicit product branding, or paid with the ability to have your way with the branding. This leads us to believe that there is some actual monetary cost to allowing a change of brand. There isn’t. So what do you get for your money? At best, you get permission to at best confuse or at worst, permission to rip-off your client. This is not creating value. This is snake oil, and at Unit we refuse to take part in this charade.

Justification, Disassembled

There is one very simple reason to not allow white labeling for Unify: any branding change would alter the code, and we cannot properly support our product once the source code has been changed. Beyond this, I would like to put a finer point on our position. The following are some of the common reasons that people use to justify white labeling, each rebutted by our philosophical perspectives behind Unify.

Doomsday Scenario: “My clients will get confused! They need their brand at the top of an app.”

This morning I hit snooze on my Seiko alarm, ate some Kashi cereal,  drove to work in my Jeep, woke up my lazy iMac and posted this to the blog using WordPress. At no moment did I get confused… at least not about the brands I was using. (Thanks to David Airey for his similar progression in Logo Design Love).

Brands are not built to confuse. In fact, they clarify. A brand is a promise between the producer and the customer. Over time it is reinforced by good experiences and destroyed by bad ones. It is an honest face: recognizable and persistent. White labeling masks that face, and what do you consider the intentions of man behind a mask?

With Unify, we are building a brand through consistency and upkeep, and removing the brand would nullify any responsibility we take for our product. Marketing efforts, customer support, twitter chatter, blog posts on updates and improvements; all would be nullified by this obfuscation. This cost is too high to negate all of these efforts in the hopes of not confusing people who are smart enough – and familiar enough with brands – not to get lost.

The Appeal to Revenue: “You can charge tons more for a white label license! I will pay it!”

The only person who “pays” when costs go up is the end-client. The problem is, as explained above, THEY see no benefit. The only person who benefits from white-labeling is the middleman. The go-between gets to represent someone else’s work as their own, and the client pays a premium. How is this fair?

We have crafted a price and a model for Unify that correctly reflects its value. Inflating this price is not in our best interest. This larger price would communicate to those fitting the bill that there are more features, larger resources dedicated to customer service and bloated expansion towards bells and whistles. This is not our perspective on Unify. Unify is a simple tool, like a hammer; it does not bludgeon better with a different name on the side.

Also, there is an idea that comes up intermittently in our white-label discussions: that our “real” customers [designer/developers] want to be able to put their name on our product to make them look good. They are willing to pay five times the price – or more – so that they can tell their client that Unify is a custom-built CMS tailored to their needs. This, of course, is lying and is the worst possible justification for white labeling.

Truth be told, we want to look good, too. Not the “we” of Unit Interactive, but the “we” that makes Unify. We take pride in our product, and again, we want to build a brand behind that product that adds value and trust. We are not in the business of artificially inflating other people’s prowess. We only want Unify to be the best product for the people who have to use it every day.

High Anxiety: “My client will not understand why I charge my fee for a CMS when they can find that your product costs under $25.”

How a professional justifies their rates is not our business, but there is an easy answer to this: Time. Unify takes time to plan, install and to test (not much, though). One’s time is still worth money, so charge accordingly. If a person cannot rectify their rate with our price and their time, that person needs to sincerely reevaluate their pricing.

A Contrast in Black & White

“…black labeling is the practice of offering a ghosted service; where authorship, responsibility, or accomplishment (or all 3) are misrepresented in order to hide the truth of one’s inadequate skill, responsibility, or accomplishment. In plain English, by word this is known as lying; by deed this is known as deliberate deception.”

Here, Andy has drawn a decisive line between the honest uses of white labeling, and what he calls black labeling. By his definition only commodities can be appropriately white labeled. By our definition of what our actual product is – consistency of innovation, customer support, and a determination to keep things simple – Unify is a service. The code changes, but our commitment to serving to our customers stays the same.

Any attempt to white label Unify would really be black labeling, and would destroy Unify. This is not merely my opinion: it is the result of much internal debate and input from users – mostly to the contrary – that has led me to firmly stand against the ability to re-brand Unify. In most implementations, black labeling destroys brands and experiences. Where some argue that it adds consistency, it instead severely muddies the water for the people who are our main concern: the user. White labeling should be relegated to the few opportunities where it makes sense, and it is disheartening to see that it has become so ubiquitous in the life of a web designer.

Working with Multiple Agencies

Wednesday, August 11th, 2010

Unit’s approach to working with other agencies to successfully bring a client’s project to fruition is simple, straight-forward, and has had a genuinely positive impact on the quality of our work. It allows us to maintain professional relationships. It ensures the client receives our best effort. It enables close collaboration with the other contractors which provides the best possible results in the final product.

Despite these obviously desirable outcomes, our approach seems to be the exception rather than the rule in the web design and development industry. What follows is an explanation of the way in which we prefer to work and why it is the best-case scenario for our clients.

The Allegory of the Stool

To understand the client/agency relationships we encourage as well as why we believe they are effective, it is useful to consider a stool. Building a simple stool is not a particularly daunting task, but doing so successfully does require attention to a few critical details. The stool is the configuration of pieces (people) chosen to bring a project off.

The first critical element of a stool is the seat. The seat is the reason for having a stool in the first place and without a seat one can never have a stool. The seat is the project.

Next, one must add some legs to the stool in order to elevate the seat. After all, a seat on the ground does not a stool make. But how many legs to add? Can we get away with just one?

The One-Legged Stool

As it turns out, yes! A stool with only a single leg can be made to balance if it is carefully constructed and never disturbed. Yet, it is far from an ideal construction. It can tip in any direction and will do so when presented with the slightest turbulence. A person may sit on this stool, but not without constantly working to stay upright. Successfully using a one-legged stool is a precarious balancing act.

One-Legged Stool

A project set up as a one-legged stool provides many points of failure and inherent instability.

In the design world, one-legged stools come about because of the all-too-common practice of subcontracting. More explicitly, they occur when Agency One are hired to deliver all aspects of a project and then Agency One, in turn, hire Agency Two (or more) to handle aspects of the project Agency One aren’t equipped to handle on their own.

There are myriad issues with subcontracting and in his article Lies, Deception, and Subcontracting, Andy has written about them at length, but the short version is that at some level the agency is dealing dishonestly with its client.

At worst, the agency is deceiving the client into believing that the agency is capable of work it cannot do and must hire others to accomplish. In this situation the client is kept in the dark about who is actually doing the work and a facade of responsibility is maintained by the agency. Participating in such a scheme is not only bad news for the project, it is also patently unethical.

Not all subcontracting is based on deception however. An agency could be perfectly forthright with its client about what its true capabilities are and who will be doing which parts of the project. Unfortunately, even a transparent subcontracting situation is a dishonest one. The agency is still assuming responsibility for work it isn’t doing and people it doesn’t manage. They are still building a one-legged stool.

Project collaborations set up this way are so unstable because a failure at any point can topple the whole process:

  1. If the subcontractor fails, the agency can’t pick up the slack for work it couldn’t do in the first place.
  2. If the agency fails (or bails), the client loses all of its hired talent.
  3. If the client pulls out, the agency is left holding the bill for its subcontractors.
  4. Depending on the situation, any of the preceding can result in litigation.

At Unit, we flat refuse to be part of the house of cards that is a one-legged stool project. Most of us have had the experience at some point in our careers and were left understanding just how demeaning and unprofessional subcontracting really is.

The Two-Legged Stool

Two heads are better than one and so is a stool with two legs better than the contraption with just one. While inherently unstable, a two-legged stool is easier to balance on because it can only tip over in two directions. Its instabilities can be predicted and planned for by an alert sitter. Still, the stool is not constructed for success and sitter is solely responsible for keeping the seat upright.

Two-Legged Stool

Two-legged stools are usable but take a lot of work to keep upright.

Clients, especially those that are unpracticed at managing such projects, have a tendency to segment the workflow. Perhaps they prefer to first produce all of the design comps and then later worry about building the site out. Or maybe they desire a working product before considering the design. If the project is not segmented chronologically it may still be segmented by function with the client providing all of the communication between different agencies.

In whatever arrangements the pieces end up, a two-legged stool is created when the client works directly with the involved agencies (good) but the agencies work independently of each other (not as good). Everyone is in an honest business relationship and there are fewer points of failure, but the project is susceptible to two major flaws.

Chronological Segmentation: Every project has tweaks. Adjustments must be made as the various pieces are integrated. If the project is set up so that one agency must fully complete its work before the other begins, then these adjustments become a major hassle instead of a natural part of the project end game. The worst outcome of this is the loss of trust from the client’s perception of a job imperfectly done.

Function Segmentation: It is proper that different people should handle the aspects of a project that fit with their expertise. But if a client keeps these people ignorant of each other it is setting itself up to be the communications hub for people who need to speak a completely different language.

Clients are experts in their business (or should be if you are going to work with them). They are not experts in your field and trying to communicate with other experts through your client is an exercise in futility. Not only will the messages not be conveyed clearly, but since neither agency has a commitment to work with the other, both will be mainly concerned with protecting their reputation (and work) from the influence of the “other guys”. This is far from ideal and puts the quality of the finished product in jeopardy.

Two-legged stool projects are not the end of the world and they can produce great results, but they do so in spite of their flaws. We see our fair share of these projects at Unit but it certainly isn’t our preferred way to work nor is it what we suggest to our clients.

The Three-Legged Stool

A stool with three legs is fully stable. It stands on its own. It supports a weight without the active involvement of the sitter. It requires a strong jolt to upset the balance of a stool standing on three legs.

Three-Legged Stool

Three-legged stools are the most stable and best set up for success.

When the client is working directly with all agencies involved in a project, and those agencies are collaborating with each other, a three-legged stool has been achieved.

It is the best-case scenario for all involved parties. The agencies are only contracted to do the work they are best suited for. They all have a direct line to the client and each other so no intermediary translation is needed. They can collaborate to integrate and adjust the project without affecting project quality or disturbing the client’s trust. The ramifications of any one party’s failure is mitigated as much as possible. Best of all the work, and not the politics, is in the best position to receive everyone’s focus.

This is how Unit loves to work. Three-legged stool projects have demonstrated superior results time after time and so we recommend it to all clients seeking our services.

Useful Regular Expressions

Wednesday, May 5th, 2010

Regular expressions are great. Anyone who delves in to scripting should pick up a little knowledge of how they work. For me – and for the development of our recent products like Unify and Just Made My Day – they have become invaluable. They work in almost any scripting language (JS, PHP, ASP, etc.) and they will save you a lot of time.

To understand their importance, think about the last time you tried to recall a TV show or song to someone but couldn’t recall the exact name. You probably said something like “It starts with a ‘P’” or maybe you hummed a few bars. And then… Eureka! They knew what you were talking about. Regular expressions are the equivalent of humming a few bars of code so that your script knows what you need.

Now, there are plenty of great resources out there that will help you get started with these crafty little expressions. I am not here to talk about them, but if you need some bearings, check out these links:

The following are the most valuable and extensible Regular Expressions that I use:

Disclaimer – These work for me in the context of code that I have written. They may not work in your code, but give them a whirl anyway. I hope they save you some time!

Tag Open w/ Specific Class

Find any HTML tag with a specific class. In this example, that class is “unicorns”. Make sure it is case insensitive for IE.

/<[^>]*class=(?:\"|\'|)[^>]*\bunicorns\b[^>]*?(?:\"|\'|)[^>]*>/i

PHP include

Find PHP includes on your pages. Returns the include path in variable 3.

/(include|include_once|require|require_once)\s*\(*(\"|\')([^\"\'<>]*)(\"|\')\)*;/

SSI – Apache

Find Apache Server-Side Includes. Returns the include path in variable 2.

/<!--#include\svirtual\=(\"|\')([^\"\'<>]*)(\"|\')\s*-->/

PHP on the page

Find any on page PHP in the midst of your HTML. Handy for removing scripts while cleaning up code.

/<\?(.|\n|\r)+?\?>/

PHP only file

Check the contents of a file to see if it only contains PHP.

/^<\?php([^?]|\?[^>])*\?>$/

Any Specific Tag + Contents

Find specific tags and return them and their contents. In this case, I have used the invalid and little known “spaghetti” tag. Again, case insensitive for IE.

/<spaghetti[^>]*>(.|\n)*?<\/\s*spaghetti>/i

Meta – Charset

Find the given charset in the page contents. Returns the charset in variable 1. Case insensitive.

/<meta[^>]*charset=\"*([^\"<]+)/i

DocType

Find the given DOCTYPE of a page contents. Case insensitive.

/<!DOCTYPE[^>]*>/i

TinyMCE Attributes

Working with TinyMCE can yield unexpected attributes. This will help you filter them out. Returns the attribute plus its value in variable 1. Case insensitive.

/<[^>]*(mce_[^=]+=(?:\"|\'|)[^\"]*(?:\"|\'|)\s*)/i

Valid File Types

A simple list of file types. Start here and eliminate/add what you want.

/\.psd|\.pdf|\.swf|\.sit|\.tar|\.tgz|\.zip|\.gzip|\.bmp|\.gif|\.jpeg|\.jpg|\.jpe|\.png|\.txt|\.doc|\.docx|\.xl|\.xls|\.flv|\.mov|\.qt|\.mpg|\.mpeg|\.mp3|\.aiff|\.aif|\.aac|\.wav|\.ppt|\.rtf|\.html|\.shtml|\.htm|\.php|\.cfm|\.phtml/

Inline Elements

A list of inline elements. A negative match would give you block elements. Case insensitive.

/\ba\b|abbr|acronym|\bb\b|basefont|bdo|big|br|cite|code|dfn|em\b|font|\bi\b|input|kbd|label|\bq\b|\bs\b|samp|select|small|span|strike|strong|sub|textarea|tt|\bu\b|var/i

Email

This is not my own. It has had a long life on the internet before now, but here it is again. Match a proper email pattern.

/^[a-zA-Z0-9,!#\$%&'\*\+\/=\?\^_`\{\|}~-]+(\.[a-z0-9,!#\$%&'\*\+\/=\?\^_`\{\|}~-]+)*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

Multiple Emails:

I adapted this one from above. Make sure all of the emails in a list of comma separated emails are of the proper pattern.

/([a-zA-Z0-9,!#\$%&'\*\+\/=\?\^_`\{\|}~-]+(\.[a-z0-9,!#\$%&'\*\+\/=\?\^_`\{\|}~-]+)*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4},*)+$/

Strong Password

More than 5 chars, at least one uppercase and at least one numeral.

/^\w*(?=\w*\d)(?=\w*[a-z])(?=\w*[A-Z])\w{5,}$/

Punctuation – Sentence End

Text too dull? Make every sentence an EXCLAMATION!

/(\?|\!|\.)+$/

Valid Domain

Matches a proper domain pattern.

/[^,\s]+\.{1,}[^,\s]{2,}/

Sub-Domain

Returns the sub-domain of a proper domain.

/^([^\.]+\.)/

No Special Characters

Make sure that a string is URL Friendly, and contains no special characters.

/^[a-zA-Z0-9\.\-,\s]+$/

Do you have any Regular Expressions you find useful?

The Analog Notepads of Unit Interactive

Tuesday, April 20th, 2010

The notepads and other devices used for recording project info are peculiar to individual designers’ preference. It’s not uncommon for these tools to almost be considered sacred artifacts to one degree or another. Having touched on this fact recently in the Unit offices, we thought it might be interesting to share our folks’ thoughts and provide a few glimpses into our respective tools.

Angela Conlon

“I really like the format of the Action Book for large projects because it allows me to outline what I need to accomplish on the same page with my sketches. I don’t exactly use it as the designer intended, opting to use the ‘action steps’ for my project bullet points instead. I also appreciate having a book devoted to all my large project sketches I can look back on for inspiration. For smaller projects or quick detail brainstorming, I opt to use a legal pad where I have the rest of my notes for that particular project, but I use it in much the same way: sketches with bullet points and notes.”

Angela’s Behance Action Book

R.A. Ray

“My main analog tools are a single legal pad and a Uni-ball Vision pen (my second in three years). On the lined paper of the legal pad I take all of my meeting notes, jot down quick ideas, do complex mathematical computations and even any sketching that I find necessary.

R.A.’s sketches and calculations on legal pad sheets

Project and meeting notes

“My other auxiliary tool is a magnetic whiteboard that is mounted with Velcro so I can move it anywhere I need it to be. Portability and the freedom to destroy (throw away/erase) are essential for my process. The more comfortable I feel making mistakes, the more I will use a system. Photoshop™ is really my sketch tool of choice. I <3 History and Snapshots.”

R.A.’s ever-essential portable whiteboard

Nathan Ford

“Primary and most handy in my intricate system of lo-tech planning/sketching devices is my tiny notepad. It goes where I go and serves as a back-up memory for to-do items so my brains can think on the more creative bits. Less frequently used, but more strategic in nature, college-ruled, 8.5”x11” notepads serve useful purposes for app development and meeting notes. Least frequently used, but possibly the most devastating weapon in my arsenal, is a pad of tracing paper. That’s where the magic happens (this is for Cribs, right?). All of this eventually winds up in my highly sophisticated, laboriously indexed library of manila folders. The details of which are, perhaps, for another post?”

Nathan’s “memory” pad

Yes, that is a hand written change-log for Unify

Andy Rutledge

“I, too, like to use a Behance Action Book for grouping brief bulleted notes with thumbnail and concept sketches to provide a good conceptual snapshot for some phases of project work. The only problem with this is that I’m hesitant to use the Action Book after capturing that initial snapshot because I tend to work in a pretty messy manner. It seems a shame to mess up the cool pages of that notebook. So most of my work is accomplished with the help of plain ol’ white legal pads. Lots of ‘em, actually.

Andy’s complement of analog devices

“It’s on these plain lined notepads that I record most of the project info and the river of thumbnail sketches before and during the computer tools’ work. And because I spend time most days on the phone with potential clients, I have to have a ready stack of notepads at hand.”

The ready stack of notepads

* * *

So how do you use your analog notepads?

Nathan’s Anniversary

Thursday, April 15th, 2010

Two years ago today…yes, on April 15th—tax day 2008…Nathan Ford came to work with us at Unit Interactive. Nathan was the first ever employee that Angela and I hired for our company, after months of searching for the right sort of person to add to our growing little enterprise. Nathan was, indeed, the right sort of person.

Nathan working on his comic

Nathan hard at, er…work.

While here at Unit, Nathan has been the primary force behind our content editor, Unify and he’s also built helpful little apps like the UniTip and Unit PNG Fix, that have made life easier for thousands of designers and developers all over the world.

As a designer, Nathan has crafted websites (design and development) for folks like Milestone Documents and John DeGroote, and has done lots of work for Woot, including the redesigned shirt.woot reckoning page. Nathan was also the designer and developer of the Just Made My Day site.

We’re very happy that Nathan joined us and we’re especially happy that two years later he’s still doing his thing with us here at Unit. Happy 2nd anniversary, Nathan!

Recommended
Most Popular
Underappreciated