As if Barcelona's (and Chicago's) sun wasn't hot enough, we managed to churn out some pretty hot updates of our own:

• ConceptFeedback got feedback trifecta;
• BisonOffice has it's product feed on Amazon.

ConceptFeedback's trifecta of feedback is finally complete with the latest addition of Expert Feedback. Expert Feedback gives you access to website reviews from a hand-selected panel of experts in the fields of design, usability and marketing. The process is simple: choose which areas you need feedback in, select how many experts you'd like in each category, and receive a detailed, professional critique.

• Certified Experts - Hand-picked experts with proven experience and solid credentials
• Educated Advice - Feedback based on time tested principles and real-world experience
• Actionable Feedback - A concise written report with visual annotations
• Satisfaction Guarantee - Great ideas to improve your website or your money back

Not to be outdone, BisonOffice managed to get it's product feed on amazon, rendering thousands (OK, a bit less) of orders the first day.

Who could have known that X-Acto X5082 Basic Knife Set with Wood Chest would be a bestseller? Probably something to do with Dexter Season 4 almost out on DVD. Or maybe that school starts soon...

Labels: amazon, bisonoffice, conceptfeedback, devbridge

I’m just going to go out and say it – Google mentioned us on their code blog! Next up – we take over the world, turn all fast food restaurants into video game arcades! Since pigs aren’t flying just yet we’ll have to be satisfied with being mentioned by the organization we look up to as we toil away under the hot Chicago summer sun.

The post on Google code blog was about a component that Tomas (who has been absolutely annihilating me in chess) wrote, and I quote:

“The WebFont Loader was designed to make it easy to switch between different providers of web fonts, including Google, Typekit, and others. The Ascender module provides users of the FontsLive service with enhanced controls over how web fonts are handled by various browsers.

The WebFont Loader provides developers with advanced features to manage how web fonts behave, establish better consistency across all browsers and even set the fallback font size to more closely match the web font, so content doesn't reflow after loading.”

While all other creatures of any significant intellect are hiding in the shade or splashing in pools of cool water, DevBridge is pumping out code like it’s five dollars a gallon! AscenderFonts.com has received a bucket of new features that include sample text generator, product reviews, and product galleries uploaded by users. Morris launched GreenAkridge.com and missed the World Cup finals because he was busy visiting friends in the mountains! ConceptFeedback.com is launching Private Tools this week and Expert Feedback next week, spearheaded by Gedas as the developer. We are also nearing completion of the ServiceBridge project which will allow mobile technicians to use iPhones to interact with their ServiceCEO software. Ant last but not least, TripBaltic.com is going through final beta stages before the official launch – good work, Tim! As you can tell our development team is anything but slacking this fine summer month of July.

Speaking of slackers, Martin took a trip out to Lithuania in June and hosted a DevBridge developer get together at his father’s ranch. The rag tag bunch had all kinds of fun that’s considered illegal in most developed nations, such as throwing shiny spheres around, eating a whole leg of a pig, and relaxing in a “kubilas”, which is like a Jacuzzi except made out of wood and is usually filled with hairy men. Overall it was “great success” and it is sad that the American part of the company could not all be there.

Brilliant ideas are born out of necessity. Some smart man might have said that before or perhaps that isn’t really an accurate saying, but our new Tomas resolved an increasingly aggravating accumulation of unwashed cups in the office with a suggestion of ordering coffee mugs with employee names on them. My suspicions of rapidly replicating semi-intelligent cup infestation aside, a group of men computer developers simply do not possess the superpowers needed to battle disorder and lack of cleanliness. We created the cups and decided to make it a tradition which will record a little bit of history about the company with each release.

Labels: devbridge, google

It has been a busy Spring here at DevBridge, and it doesn't look like Summer is going to go down quietly, either. We have launched a website for Sports, Cardiovascular, and Wellness Nutrition, a DPG of American Dietetic Association on June 1st.

The American Dietetic Association is the world's largest organization of food and nutrition professionals. DevBridge built a media rich and interactive portal for Sports, Cardiovascular, and Wellness Nutrition - a dietetic practice group of the ADA comprised of over 5,500 members.

SCAN (Sports, Cardiovascular, and Wellness Nutrition) needed a central location where the group could communicate with its members, offer value to members in the form of centralized resources, and share the knowledge and expertise of their registered dietitians with the public audience.

Read the full case study here.

Whether you’re a one man shop, designing and coding your projects all by yourself, or a small business with a pool of talent, you will always face a challenge: how much design and UI work is needed before the mockups are passed on to the developer? To take it a step further, how much visual work needs to be done to communicate the project to the client? In this article we’ll talk about best practices for clear communication, the tools used, and resource management on both small and large projects.

The Deciding Factors of Mockup Quantity

As an owner of a small business myself, I have watched our company grow from a part time, basement dwelling, under-the-radar operation to a small business with an office, chairs, desks, and staplers (aren’t staplers an indication of your legitimacy?). During this process of hacking out of our eggshell we have birthed a company culture, a set of best practices, and gained valuable experience in the field of web design and development. One of these nibbles of knowledge is the ability to save time and money by creating just the right amount of visual material to communicate clearly with both your client and your web developer.

I’m not even going to ask if you’ve ever had a project where you create a custom web application with an intricate UI and your client pretty much freaks out and tells you that it’s completely the opposite of what they’ve had in mind. And let’s be real – it’s not because they’re web infants who drool every time a flash intro pops up…it’s because you failed at communicating the project and it’s functionality.

Don’t get me wrong, your UI is probably slick: it runs fast, the scripts are minified, it uses sprites for all button and UI elements and from a technical and design standpoint – it’s as hot as the BMW MINI Cooper in 2007. What you have failed to communicate is that your client was looking for a pickup truck.

Our approach to web design and quantity of mockups is usually based on the size of the project. For the purpose of this article I’ll break projects into two categories: the brochure site (a content managed site about the company / individual / business, etc.), and the web application site.

A Brochure Site

For small websites I recommend that you sit down with the client and spend a good hour just learning about the business. Before this meeting all you probably had to start with was an email from your cousin saying something like “Listen, Mike over at Gadget Inc. wants a cool site that will be #1 in Google”. After this meeting, however, you will be amazed at the quantity of relevant information that your client will share with you. Don’t be afraid to ask questions – information that no one would share with you is a question away when you’re sitting in front of a person. Your inquisitive attitude will also get your client comfortable because it’s indicative that you’re genuinely interested in solving his business problem.

Now that you have a wealth of information you should be able to deduct what the client really wants (and it might not be exactly the same as you originally thought). You now should know the sites they like, the reasons why they like them, the colors, logo, and other visual cues that should help you get started on the design. If your client has not yet committed to the project and is waiting for a proposal, you need to decide if providing a single mockup with your proposal will be a worthy investment. I can guarantee you that on larger projects it is an absolute must, as clients get emotionally attached to this initial mockup and it is much easier to win the bid. This more or less sums it up for small sites – clear communication with the client will help you establish a good base to start work from and the quantity of mockups should be kept to a minimum if you’re good at listening. In case you get stuck on a minute detail that the client doesn’t like, you can always post up your mockup on ConceptFeedback.com and get some feedback from other designers. Most of the time, peer opinion will sway the client to your side if you know what you’re doing.

Web Applications

Larger projects or web applications are a completely different beast and should be dealt with accordingly. Your requirements for the project will arrive in a Request for Proposal gold coated envelope scented with the smell of money which will be put together by a project lead. There will be a committee of people responsible for the content, functionality, and goals for the site and all of their opinions will be slightly different. It will be the job of the designer and/or team lead to interpret and communicate the requirements between the client and your development team in a visual manner.

I have learned that written technical specifications are only as good as the person reading them. Your developers will understand it, but your client committee will interpret it in as many ways as there are people. It is your responsibility, then, to visually illustrate the project for both teams. All items mentioned in the small website section still apply, but in addition to that you will need to build an information architecture map, functional flow, interactions mockups, and more. As you’re working through these visual elements, you should consider using some of the tools available on the web to get feedback from a wider audience.

While detailed functionality mockups are a costly venture, they are simply the best thing you can do before a line of code is written because a visual illustration will set correct expectations for your client. As a web development company you are also very lucky if you have web designers who understand markup, limitations of AJAX, accessibility and readability implications, and more. We have had some curious interactions with designers who make fantastic brochures but can’t mock up a single screen of a website UI.

This approach might seem wasteful to you at first, but you will save hundreds of development hours when your application behaves and looks in exactly identical way to your mockups and clients expectations. Your established information hierarchy and functionality mockups will also allow your developer to work completely independently from the designer with minimal interruption and questions.

Recommended Tools:

• Concept Feedback for idea-sourcing
• Basecamp for project management
• Photoshop + Illustrator for mock-up creation
• Balsamiq for functionality mock-ups
• Gridding
• Using a grid as background
• Freshbooks for time tracking
• Paper & pen for initial mock-ups

Red Flags

Even if you are following these guidelines and wield a creative stylus you will have conversations or emails which should set off alarms ringing in your head. These types of communications usually start with "This is not as hip as I wanted it", "I was expecting something unexpected", and "we really want it to look social". There are a couple of problems with these types of statements, first being you having a limited budget and time frame set for the design and having already spent some of this time. The second issue is that those statements are as ambiguous as Ricky Martins sexuality (not anymore, huh?).

Well, just like with requirement gathering, your focus here should be to drill down to the bottom of those statements and find out exactly what is meant by each. A lot of times the work you have already done can be salvaged and the client wants nothing more than a different illustration, color combination, or font stack. I suggest approaching this with items that require little effort: start with small tweaks, send mockups; continue with medium complexity changes, send mockups; rinse and repeat. What you will find through communication and these small mockup adjustments is that sometimes the negativity expressed in their email is actually an over exaggeration of a small issue.

Lessons Learned

You can probably tell that the route you take to a successful project will depend on the size and composition of your team and your ability to communicate with your client. The more projects we complete the more strongly we believe in visual communication which lies strictly on the designer’s shoulders. It is also safe to say that a web designer is a mixed and intricate breed of a professional: an individual who must understand business, be able to read customers, stay creative and fresh with visual solutions, and be technical enough to understand web technology limitations and best practices.

I’m a skeptic when it comes to venture firms such as Y Combinator who help launch / propel startups, probably because of how much publicity there has been generated surrounding those organizations. I am a firm believer that a useful product or service will always find itself a niche market to utilize, however my recent experience with Excelerate has altered my perception of the value these companies and seminars may bring.

Just last week Andrew Follett rolled into our office bearing the news that Concept Feedback, our mutually birthed crowd sourcing concept feedback service, has been accepted for an interview with Excelerate. Excelerate is very much like Y Combinator in its core: an organization which puts you in contact with mentors, provides seed capital, and guides you through the process of start-up infancy. These services don’t come without a price, of course, as you agree to sign away 5% of your company shares to Excelerate for the participation in the program.

We were briefed that our meeting would take place at 9:30pm, on a Friday night.

As I receive these news a scene starts playing in my head where DevBridge & Andrew enter a drug den filled with shady characters, share our idea, and continue to get our faces blown off with shotguns in a dirty bathtub. Don’t all meetings at 9:30 in the evening end that way?

A short deductive reasoning session later we all agreed that the strange scheduling was probably due to majority of contestants actually having real jobs and doing this start-up thing on their free time. It made perfect sense that Excelerate would have wanted to accommodate their schedules.

The incredulity of this whole arrangement that lead to us not being prepared or coordinated as well as we should have been. We rolled into the meeting without a practiced pitch and with one goal – to find out how they could help us. We learned later on that 30 minutes of presentation time is a really short period of time in which it is challenging to fully express our passion and vision for Concept Feedback.

As a side note I wanted to mention that their office is freakishly awesome, with a huge kitchen area, stylish modern-industrial interior and recessed lighting. I told Martin that this is what our office should look like when we move at the end of this year. For a tech shop we really couldn’t be lower on the “stylish” scale with an office which:

• Floods the first year resulting in computer cases that are watercooled
• Gets leaked on from the roof this spring, messing up our book library
• Is constantly dusty because of this hundred year old air filtration system

Getting back on topic, we were interviewed by Sam Yagan who runs the Excelerate program and is the co-founder of OkCupid, an online dating site. A bombardment of questions ensued that ranged from our target market, pricing tiers, future goals and weaknesses. Some highlights in the conversation:

• We couldn’t figure out / answer if we wanted to raise funds
• I spent a good 15 minutes explaining to them the technicalities of our rating system
• Everyone agreed that we are not certain of our target market and the pricing of the service

Overall it was a very good experience that kicked us in the balls, in a way. Got us thinking about the important questions and made us realize that we actually want to be in this program and learn from these folk. The thirty minutes blew by in a blink and we finished the evening licking our wound s and discussing Concept Feedbacks future at a local pub over a pint of brew. The results should be arriving this week, keep your fingers crossed!

Who Needs Guns When We Have Armies

While it kills me to admit it, our fascination with first person shooters has receded much like the hair on my forehead after I climbed over 25. Red bull and pizza fueled LAN parties are now being replaced by hour long sessions of silence, framed by the soft murmur of chess pieces sliding across the lacquered skating rink of life and death.

Chess creates a much different experience of mind numbing tension. There are no twitch responses and hand eye coordination involved here: the game is all about calculated strategies and madman knights that move in death bringing patterns across the board littered with pawn carcasses. Kingdoms rise and fall, queens are sacrificed, and many swear words are uttered as Tomas annihilates competition with his finely tuned cerebral cortex. I can only hope that one day we shall return to Call of Duty and I get to knife someone in the face for the humiliation I now suffer on the checkered squares.

Gadget Heaven

It is safe to assume that with a job like mine I will have a certain predisposition to new gadgets and technology. It is also safe to assume that once a certain gadget does become available it is shortly going to be available to DevBridge, in one way or another. We recently celebrated Martin’s birthday and as we were consuming the cheesecake, chicken wings, and wine we were still undecided and confused about the present we were going to get him. Martin’s wife came to the rescue (as they usually do in times of peril and manly confusion with gifts) and we all pitched in to get him the new iPad.

I was one of the nay-sayers when the device was announced and I still see limited use for someone who is a power user and has multiple mobile devices (such as an iPhone / laptop / Kindle / etc.). I think of it as a mutated and disfigured supermodel laptop that is missing its legs. It looks fantastic, feels fantastic, you can tell it just got out of the fashion show in Venice but it’s also just as useful as a supermodel when you need to get real shit done. Then again, as the market of useless apps on the iphone has already proved, people love to waste their time so why not give them yet another shiny new thing to smear their little greasy hot pocket fingers over.

Don’t get me wrong, I want one just because it’s sexy, but my aging voice of reason keeps telling me I’ll be sorry for blowing that much money on a portable black hole of time. Martin, on the other hand, can now read emails and work the remaining 4 hours of the day that he’s not in the office.

DevBridge has recently launched a new website that sells office supplies, furniture and break room products called BisonOffice.com. We wanted to share with you the experiences and decisions that had to be made during the development of our own online store.

Our goal was and is to make this website well organized, easy to use and fast. By "Easy to use" we mean that the steps necessary to find products and complete a purchase are very intuitive and simple for the customer.

I would like to overview a couple of the challenges that we faced implementing the design and functionality of this website.

Site layout

Do we go liquid or fixed? We have chosen liquid, but limited its minimum and maximum width. Usually if the width is too narrow it cannot accommodate all the features that are present, if it’s too wide it becomes hard to scan and impacts readability. We also had to think if we wanted to show the products in a list or a grid. After some usability discussions we chose a grid and made it automatically adjust based on the browser width. This works well for products, but does not work that great for text. Long lines become hard to read and your eye loses focus while jumping from one line of text to the next. Therefore everywhere where we use a bigger block of text, we keep it narrowed down.

Product Search

Another area where we wanted to spend a lot of time was product search. Many commerce sites that have a large selection of products (we have 40,000+) often have poor search functionality that is more a burden than a blessing. Most common problems with search is that users often use different words or spelling in their search. It is big help for the customer to get suggestions of search terms based on what they are typing in the search box. Google does it, Amazon does it, and any other modern commerce site should do it.

Autosuggestion ensures that spelling will be correct and shows possible alternate queries for that keyword. It is also very important that pages load fast and search results are displayed almost immediately after user clicks search button. Study on page speed done by Google confirms that fewer searches are performed if there is a delay in page load time.

Things to come

Many things that customers would expect from the commerce site are already here: product search, product categories, filtering by brand, green product indicator, product specifications, shipment tracking notifications, order history and more. We have planned many improvements and innovations for the site and many of them you will see in the near future. One feature at a time, so stay tuned.

This post is dedicated to my fellow web designers and developers to share our experience of knowledge exchange between the developer and the client. Our field combines business development, graphic design, technology, and user experience design – a basketful of very different areas of expertise. When dealing with clients one does face a challenge of clearly and effectively communicating the goals and results of work performed in the mentioned areas.

We believe that our core purpose is to solve business challenges for our clients. No, I haven’t forgotten you Mac-loving-single-mouse-button-fanatic designers; a business solution includes an application platform, solid data design, and web design which makes the UI and the site approachable and easy to use (convert, transact, click on a monkeys butt, etc.). Your everyday challenge, then, becomes to successfully deliver the project on time while satisfying the clients requirements for visual, business, and aesthetic requirements.

You're Not as Smart as You Think

But Google Is

The challenge here is that I like to think I’m always right (boy, would my wife have a thing to say about this) and that becomes tricky when communicating with clients. As a professional in the field, I am able to detect patterns, usability issues, trends in the industry and other important issues that the client might not be aware of. On the other hand, I’m a complete idiot when it comes to semiconductor temperature tolerances, furniture preferred at pre-school institutions, or the importance of steel spikes in this year’s fashion of lederhosen. My client, on the other hand, is an Encyclopedia Britannica for every single one of those topics. What I am trying to say is that you need to remember that you're an expert of your field only and that you should prick up your ears when the client is telling you something.

We Can Both Win

Negotiating for a win-win result

So as you’re treading through your pitiful pixel pushing existence you need to be aware of things that might put your sorry developer/designer self in a position that is advantageous in getting those project sticking points negotiated through. Have you ever had a client who wanted a larger logo on their website? Maybe a logo which is made in flash and a little earth spins and then sparks!? All valid requirements, I’m sure, and so as you were slowly stabbing your quads with a pencil under the table in the meeting you should have realized that owners of businesses love their brands and have emotional attachment to them. Your response, then, should be based on a composite of research based facts (best presented as a link to a reputable source on the web), an explanation that is specific to their business.

Damage Control

Sometimes Bending Over is Part of Your Job

A successful negotiator (you are a negotiator; maybe not a gun totting hostage holding Samuel L. Jackson, but a negotiator none the less) delivers a solution that allows both parties to win. Your client is happy that their demands have been met by the responsive and well informed web developer, and you are happy because you didn't have to waste time in meetings. Hopefully, after you demonstrate the facts and reasoning for keeping the logo the same size, the client will change their mind and leave you drooling in ecstasy over being right and not having to go back for a fix. In the case that they don’t, you still don’t have to increase the size but perhaps reevaluate the white space and other visual trickery associated with that devilishly sexy design work.

Authoritative Position

Your voice has to be heard

As I’ve mentioned before, you do wield some authority in this line of work but so does your client in their business. I recommend that on every project you establish attainable and clearly defined goals, goals that will be measured by performance of the website and are supported by strict deadlines. If you or your client don't meet certain goals and deliverables by the designated deadline - you can still try to launch the site if all critical items are completed and then clear up the remaining items once the site is live. This strategy is used by major tech companies such as Google and achieves several important things:

• Forces you to deliver on time
• Forces you to focus on date based deliverables which makes the client easier to educate on “sticky” issues
• Forces the client to deliver content, stock photos, and their ideas to you on time because the resulting missing features will have to be paid on a consulting hourly basis.

As you’re working towards these goals understand that at a certain time your opinion and your decisions on the project is critical to its success – there’s no backing down or shoving your tail between your legs. At certain times you cannot negotiate and a client must understand that they are paying for this expertise you are providing for a reason - you know your stuff!

Keep in mind that your client also has authority and knowledge that might not be accessible to you at the point of negotiations. For example:

At the end of the day you are at the mercy of the client and need to deliver all requirements, but you need to perceive your value and be able to demonstrate it through examples, research, and logical arguments. Be responsive; ask a lot of questions to understand the client’s motivation. I endorse client education, but not to the point of losing the client and project. Remember that your client is a resource you should utilize and good communication will allow both of you to get the project finished in time to watch the mens figure skating competition.