Fresh

One of the most interesting things about working here at eROI is the variety of clients in which we deal with on a regular basis. On any given day we work with large national brands, and then turn around and help a start up company grow from the ground up. In both cases, it has become essential to have a comprehensive style guide for several reasons:

For the larger brands, it is a simple way for a client to communicate the essential elements and rules as they apply to their brand in a concise document. A large brand may have multiple agencies working on projects at any given time, and this ensures consistency across the board. This is especially important when working on projects with tight timelines; there is little time for brand misinterpretation. A good style guide will cover all of the major elements, which allows for a Creative Brief to be more focused on the project at hand.

For smaller companies, a style guide is equally important as it becomes the blueprint from which the brand evolves. A small company may not have the resources to employ a marketing/brand manager, and so a style guide needs to work that much harder.

While many companies are already familiar with brand guidelines that include things like logo usage and brand statements, I want to focus instead on what specific elements should be considered for the digital space and the screen.

(more…)

Recently, I walked around the office with my Flip camera and asked the eROI team about ecommerce sites. We talked about the ones that we liked, what could be improved, and what people should think about when creating an online shopping experience. Since we work in the digital marketing industry, it should come as no surprise that we’re highly critical of things like overall brand experience, way-finding, and ease of use.

Two things that are critical to address at the onset of any project are the measurable business objectives and analytic goals. In our design process at eROI, these things are kept at the forefront of every project; these two things guide our designers as they begin creating their web designs. By always referring back to the objectives and goals, and making creative decisions that strive to directly impact these things, we’re setting our clients up to succeed on those two fronts.

Our process helps to ensure that these things don’t get overlooked or forgotten about as a project evolves. I’ve visited other ecommerce sites before, however, where the functional and transactional experience is incredibly poor, and I end up leaving the site feeling disgruntled, confused, and/or frustrated. I’m sure that all of us have experienced a site that left us wanting more or saying to ourselves, “This site could be better if they’d only [insert awesome suggestion here].”

What are some of your favorite ecommerce sites and why?

Although I was sadly not able enough to attend An Event Apart Seattle this year, I was able to live vicariously through those that did attend, using a handy dandy Twitter feed tool created for the event: A Feed Apart. Clicking on the “Sessions” tab gives you all the Tweets tagged with “aea” that were sent out during each of the event’s sessions – which gives you a pretty good idea of what the highlights were.  One session that seemed particularly interesting to me was “Mobile First!”, presented by Luke Wroblewski. During the session Luke W. convinced attendees of the importance of designing the mobile version of a site or app FIRST, before the “desktop” version.

How did he do that? I’ve decided to pick out some highlight Tweets from the session sent out by audience members, and then try to compile more information and resources to those points. Conveniently, Luke W. also wrote a blog post on this same topic last year, so I have a good place to start from. So even though I wasn’t there in person, I’m hoping to be able to come up with a good overview of his topic.  So let’s go!

(more…)

No. Not really.  As long as you include wireframing in your process, you’re “doing it right,” no matter the tools you choose or the process you use.

Well, that’s not very satisfying is it?  What if you’re new to wireframing and need some help and inspiration for getting started?  Luckily there are a lot of wireframe pros out there who are willing to share their process and some examples of their work.  The important thing is to not obsess over the details of how the pros do it: which tool they use (Balsamiq, OmniGraffle, Fireworks, HTML) or what the deliverables are (flat wireframes, clickable wireframes/prototypes, paper prototypes, STOP-MOTION paper prototypes, protocasts).

Trying to figure out which is the best way or the “right way” to wireframe before you even start is like obsessing over finding the best ergonomic pen and the moleskine notebook with the perfect paper weight and texture before you start writing your novel.  You just gotta start with what you have, and figure out what works best for you as you go.

That point was illustrated very well during a workshop I attended at SXSW called (wait for it) “The Right Way to Wireframe”.  Presented by Russ Unger, Todd Zaki Warfel, Will Evans and Fred Beecher, the workshop covered four different approaches to creating wireframes and designs for the same website redesign project: Lend4Health (read the backstory of this idea here, and about the process of choosing Lend4Health here).

Each of the presenters (and their partners/teams) developed the wireframes and designs individually and isolated from the other three, so that they wouldn’t be influenced by what the others were doing.  So we get a pretty good idea of each person’s/team’s typical workflow. Plus,they decided that each would use a different tool to create their wireframes, so that we could see four different tools in action — and also see that they all get the job done pretty well.  They presented four different workflows, with four different wireframing tools, none of which are the “Right Way to Wireframe”, but simply “ways to wireframe”.

Here are the four videos presented in “The Right Way to Wireframe,” for your viewing pleasure:

Russ Unger | Tool: Balsamiq

Todd Zaki Warfel | Tool: Fireworks

Will Evans | Tool: OmniGraffle

Fred Beecher | Tool: Axure

You’ll notice that even though they use different tools and have different deliverables, they all follow a similar process: research and requirements gathering, creating personas, creating a sitemap, sketching, wireframing/prototyping and finally, designing the visual look and feel. So if there is a “right way” to be found in the act of wireframing, it is in the process leading up to it: research first, sketching ideas next (lots and lots of sketching) and THEN wireframing. But the act of wireframing itself can be approached from many different angles with many different tools. The way you do it is up to you based on personal preference, the requirements of the project, and what will allow you to communicate ideas best to the individual client or project owner.

I was chatting with a designer friend of mine recently who was telling me that he isn’t allowed to listen to music at work – not even headphones on. Apparently this office policy was created because employees need to be able to answer the phone by the second ring, and headphones would distract from that.

Okay, maybe I’m overreacting, but the first words out of my mouth were “you need to quit that job asap.” And maybe I’m just a snobby agency person, but I totally meant that. How is it possible to get through 8 -10 hours of working 5 days a week without music? As a designer? I don’t get it.

Now I work in account management, which traditionally isn’t a job that most would see as one that needs “creative inspiration” to do well, but on the contrary, I believe music is incredibly important to being successful at what we do. For me, music is the primary provider of motivation and inspiration. Now that’s not to say that other things don’t inspire me. Great creative work inspires me. New, exciting projects inspire me. Seeing a project through completion inspires me. But you must remember, most of an AE day is writing emails, managing schedules, writing proposals, putting out fires. That’s when I need that little extra boost of motivation. And for me, that motivation is something only music can provide.

(more…)

The word “launch” is such an intense word to describe the release of a new web property out into the world wide web. The picture that comes to mind is the glory of a space shuttle taking off into space with the companion footage of a simple countdown and the flip of a couple switches in the control room.  But no matter how a shuttle launch may look, we all know it takes a lot of teamwork, planning, forethought and monitoring to get that rocket into space.  There would probably be a hefty investigation if we found out the NASA launch plan was: cross our fingers, hit the button and wave goodbye. The same goes for a website launch. One might picture a guy sitting in the IT department waiting for the word “go” to push a button – and then we pop open the champagne and move onto the next project.  Hardly.

Like any kind of launch, there are many components to prepare for beforehand and to monitor afterwards. With a site launch we’re dealing with servers, DNS, domains, hosting, file access, operating environments, expected traffic, load time, content, quality assurance (QA), feeds, and the list goes on.

Launching is really a series of steps and several checks and balances between the teams working on the project.  It takes a village to raise a website, and the teams must really work together to get the thing working in one environment and on one day.

Is your site or project ready to launch? Ask these questions and don’t leave your launch up to crossed fingers and a lucky rabbit’s foot.

• Is the site complete?

  As in done, approved, signed off, finished?

• Do you have your domain and hosting set up?

  Have you established a relationship with a hosting company? Do you own and have access to the domain?

• Have the development tools been removed?

  Debugging output? Hard-coded development URLs? Any back-door access?

• Have you considered anticipated traffic?

  Do you know your available bandwidth? Do you have any data-heavy features (streaming video, large photos, etc.)? What is the expected amount of traffic to the site?

• Have all your forms and other components been tested in the live environment?

  Form results are posting and to the right contact? DNS is set and domain is pointed? All the integrated pieces are working together?

• Are your social networking tools in place and hooked up?

  Twitter? Facebook? LinkedIn? ShareThis?

• Is it Friday?

  Unless you want to be a weekend warrior, you might want to wait until Monday.  Give at least 1-2 business days to complete the launch process.

On any launch at eROI we have a series of team members working on different pieces of what is more of a gradual ascension. The process usually takes all day, if not a few days, and requires many visits, conversations and status updates with the IT, Accounts & Development departments. But at the end of the day and hopefully after another successful endeavor you can brag over dinner how you launched a site into the great beyond.

If you’re one of the people out there pondering the ‘mobile’ question, then here are a few things to think about. Let’s start by answering question #1: “Should my website go mobile?”

Yes, you do need to optimize your website for mobile devices.

Year after year, mobile usage is growing and it is expanding to include new formats (Apple iPad, HP Slate and the much rumored Google Tablet). The way we interact with these devices will mature as the technologies and devices develop. For now, there a few simple things to keep in mind.

First, if you have a website, then you should absolutely invest in establishing the mobile version of that site. The key to creating an effective mobile site is in the strategy. A good mobile site isn’t just a tiny version of your existing site. A good mobile site needs to focus on addressing your core marketing objectives in a way that is in keeping with the brand experience of your website but is also optimized for mobile screens.

(more…)

Music and design, in my eyes, are inseparable. I get inspired to draw and come up with new designs when listening to music, and feel totally strange if I am ever designing without tunes blaring or earbuds jammed into my head. I am a design nerd, and perhaps bigger music nerd, and If I had my way, would never have one without the other.

Certain songs or genres of music aid me in different working scenarios.  Sometimes I find myself knowing exactly what song or album to play for my current mood or for the task in front of me. If I am on a deadline, if I am wireframing a new site, if I am working late, or if I am just plain old stoked on a design direction, zoned out, head down, gettin’ it done, I know what to listen to to make that task more enjoyable. There are songs for reading your RSS on Monday morning, drinking coffee, ramping up for your week, and there are songs for your Friday afternoon, winding down your open projects, and thinking about your upcoming weekend.

Here are 10 tracks, old and new, and the web-design/interactive dork scenarios in which they feel most appropriate, as those scenarios fit into a 5-day work week.  Try them out and tell me if they work for you too. Hell, you might learn about some new music, get way better at those deadline pushes, or at least grumble a little less to yourself when burning the midnight oil.

NOTE: These choices are based on a combination of the general pacing and mood of the songs, and their subject matter and lyrics. Sometimes more one than the other, sometimes a perfect balance of both. One thing remains consistent: It is all subjective jibba-jabba according to one interactive designer and illustrator’s listening habits. Take it or leave it.
(more…)

A never-ending battle has been raging since days of old about the virtues of custom, project-specific photography vs. stock photography. Each has its benefits and drawbacks and depending on your role in a project you could be on one side of the fence or the other. I am a designer with an extensive photography background. I have a bias, so if you’re looking for a true comparison as to which is better, stock vs. custom, look somewhere else. I have very clear views on the role of photography in design and how it can help achieve the goals of a given project. Achieving the goals of the client are always the top priority and finding the best way to do that is the responsibility of the designer.

(more…)

Because we have a team of developers here at eROI and a plethora of projects to build and maintain, it is more than likely that the code written by one individual will need to be edited by another developer at some point in time.  When an edit to a site comes in, the original author of the code will inevitably, at one point or another, be on vacation, be sick, or no longer work here (yes, it happens, sadly).  This is why it is so imperative for our team (and any development team) to follow certain guidelines to keep our code clean and legible, so that anyone can jump onto a project, easily see what the code is doing, and start making edits quickly.  Here are five ways to keep your code readable and maintainable:

1. Indent Your Code
   This is number one on the list for a reason.  No other thing you can do can help or hinder the readability of your code than the indentation style (or lack thereof).  Nested child elements should be indented one level more than parent elements in order to show a visual hierarchy.  Opening and closing tags in HTML should be on the same indentation level in most cases; items inside the opening/closing tags need to be indented one additional level.

   (more…)