Search Results for: identity
Commemorating Their 10-Year Anniversary, ERA404 Gets a New Identity
ERA404 Creative Group, a long-standing creative studio based in New York City, is unveiling the company’s new corporate identity this quarter. ERA404 (formerly era//404) has made the choice to update their 10-year-old mark, its supplemental iconography and palette, even the company name.Read More
HOW International Design Annual
“Many wine drinkers select wines in part because of the label,” says Creative Director, Don Citarella about his recent designs for the Brooklyn Wine Co.’s Feliz White and Red. “Our main goal was to entice customers to take that first sip. Afterward, the wines speak for themselves.”
To appeal to both Brooklynites and wine connoisseurs, the labels for two of the eight varieties, which will be released over the next two years, feature an image of Brooklyn’s iconic bridge.Read More
A few years back, era404 was written up in The Wall Street Journal’s online site, WSJ.com, for an experiment we ran concerning unsolicited email. The experiment was to test if those “Unsubscribe” links actually work. Upon creating a dozen brand new email accounts, we subscribed each to a dozen different online newsletters, contests, subscription services and mailing lists. Then, upon receiving the initial emails from those services, we clicked the “Unsubscribe” link.Read More
What every prospective online homeowner should consider before breaking ground
When we’re approached about beginning a new Web presence, ecommerce system, or online application, ERA404 likes to pose 10 questions to our clients. This not only stirs up ideas to begin the process, it also allows all parties to fully explore what the process of Web development entails.
1. What are three words you would use to describe your business in terms of focus, pace and culture?
Oftentimes, the description of your business is identical to your Web site. If your business focus is technology, customer relations, politics or health, your site should have a similar feel. Is your pace is dynamic and fast-moving (like an online service or new product) or conservative and rock-solid (like a bank or a law firm)? Your business’s culture (fun, friendly, approachable, professional, formal, methodical, meticulous) should also be represented in your Web site’s design.
2. What are the general purposes for your Web site?
Your site should have a primary and secondary purpose (and sometimes even a tertiary one). Purposes could be to increase sales and awareness, to assist in distribution of products or services, informational, educational, eCommerce, subscription-based marketing, customer feedback, ISO or employee intranet, employment postings, product support, entertainment or forums.
3. Will this site be part of an existing marketing strategy?
Does your business already have a marketing strategy in place with previous printed collateral material, web sites, or advertising campaigns? If it does, please send samples of these pieces to assist in ensuring the site works within the framework of your existing strategy. If it doesn’t, or if you’d like to deviate from your existing strategy, can you provide a description and/or examples of concepting for a new strategy? Would you be interested in working with ERA404 to develop this new cross-media campaign?
[ ] Yes, this site is part of an existing strategy.
[ ] No, this site varies from our existing strategy.
[ ] We currently do not have a strategy.
[ ] We’re developing a strategy in-house and will provide samples and a description.
[ ] We’re interested in working with ERA404 to develop a cross-media strategy.
4. What reactions (calls-to-action) are you hoping to achieve with this new Web site?
While this question hinges on #2 (general purpose), it’s important to outline your customer’s reaction to determine if the site is successful. If the site is information-based, this can be monitored with statistics. Other reactions could be: customer contact, online sales, forum/chat participation, increased customer retention, decreased phone, fax or email support calls, growth of marketing opportunities (mailing lists, newsletters, event participation and RSVPs), etc.
5. How do you plan on maintaining your site?
ERA404 provides a number of maintenance opportunities including an online content management system (CMS), maintenance contracts and on-site/telephone tutorials for manual site updates. If you plan on updating your site at regular intervals, which opportunities interest you?
6. The Competition
a. Do you have direct competition?
Providing ERA404 with links to competition sites enables us to gauge what your competition is doing, how they’ve been successful, how they’ve failed, and what makes your business different. Please list some links to competitor sites.
b. How are you different from competition?
If you have direct competition, please list why your business is different and what you do that makes your business unique. What do you do that is different from these other businesses?
7. Which existing site designs appeal to you?
Existing site designs do not have to be competition, nor do they have to even be in the same industry. List some sites that you feel satisfy your general purpose and embrace your company’s focus, pace and culture.
8. Aside from your calls-to-action, what are your short-term and long-term goals for this site?
Do you expect this site to grow, to have new sections, to have new features? Will this site work in tandem with other sites that your business may have? Do you expect changes in offerings, strategy or functionality?
While ERA404 designs all sites to be flexible, we believe pre-planning and preparation can assist in ensuring your site is cost effective and successful at attaining short- and long-term goals.
9. What additional materials do you have to assist us in providing you with an estimate and timeline?
Before beginning design and development, ERA404 provides site Mechanicals (wireframes) and Information Architectures (IAs) to describe site layout, pages and functionality. Do these materials already exist? Can you provide us with sample page content, photography, identity pieces and artwork? What is your estimated budget and site launch target?
[ ] Mechanicals
[ ] Information Architecture
[ ] Design Storyboards (GUIs)
[ ] Digital Content
[ ] Digital Identity
[ ] Artwork/Photography*
[ ] Budget: _________________
[ ] Launch Target: __________
[ ] Copywriter*
* If you do not currently have a copywriter or photographer, would you be interested in working with ERA404 to provide these services?
10. What are your expectations to deem this Web site a success?
For More Questions or Information
Contact ERA404 for more questions to get you going or for design and development estimates by clicking here.
Click the link below to download our “10 Questions” survey. The file is a PDF, so you must have Adobe Acrobat Reader installed to view it. You’re also able to fill-out the form using Acrobat by simply clicking a form blank and entering text or clicking checkboxes. When finished, email or fax the completed questionnaire to ERA404 or print it for your records.
Download the PDF: ERA404_10_Questions
Entrepreneur Works with ERA404 to Promote Brooklyn as a Culture
Adam Goldstein is pioneering a strong community in the heart of Brooklyn’s Park Slope—bringing together neighbors by sponsoring local events such as wine tastings and classes. Red White and Bubbly (www.redwhiteandbubbly.com) has generated a remarkable following by appealing to city dwellers with busy schedules and a broad spectrum of interests beyond their core product catalog. When it came to the online presence for this cultural phenomenon, Adam came to ERA404 Creative Group to design, develop and launchredwhiteandbubbly.com.Read More
Transitioning from Website Interface Design to Application Development
In the Spring of 2002, I was hired to design an application for an events producer interested in sending out online invitations to events for the fashion industry. My client and I sat down and discussed the framework for the service that would eventually become an online contact and events management system. While I’ve had significant experience developing graphical user interfaces (GUIs) for Websites and portals, this was my first design for an online application or click-and-mortar business.
My assumption at that time was that it wasn’t much different from designing a Website GUI. An application, like a site, would need to feature information architecture (IA) that was both intuitive and easy-to-use. The design strategy should take into consideration user tasks and functionality to stovepipe from general to specific. In my mind, I imagined the design to be similar to the IA of a site, where navigation items give way to sub-menus for the very same purpose. Afterall, all we are really trying to do is trap their mouse, attract new customers and sell new ideas.
The original branding of the application, called Reserve-U, was based on the 1930s era Automat. My client and I discussed that an application like this would empower users to take control of their contacts databases and sort and slot data for their own purposes. The design strategy evolved to use zeitgeists of the time—vivid, though muted colors, clip-art icons derived from magazines, and plastic and chrome graphic elements similar to those on malt shops and drive-in theatres.
Stemming from this foundation of a branding campaign, I moved forward to design the application as I traditionally begin Websites. The Homepage of the application presented users with two options: contacts and events. Upon clicking in, the user was brought to a sub-section where a dashboard of links allowed them to navigate to specific functions. The entire design was characteristically driven by grey and green tables with headers similar to the layout for popular social networking sites, such as Friendster and MySpace. The links, designed in an orange accent color, drew focus and urged the user to proceed through the various tasks of the application.
Reserve-U was launched later that Summer and PR firms and Events Producers contacted us about the application to replace patchwork systems built using FileMaker Pro, or the array of customer relationship managers (CRMs) and mailing list tools that they used. Their main interest was derived from their desire to use an application built to encompass all their industry needs and designed the way they work. Because of this interest, I had no reason to doubt my new-found skills as an application GUI designer.
As clients began to lease the application, however, some negative feedback also surfaced. Naturally, as many designers might be inclined to do, I dismissed the criticism as user ignorance. “These people aren’t really Web-savvy and don’t understand online applications and the limitations of the Web.” My ego intact, we continued to lease the application and wait for the voices to die down.
It took another year of client reactions to realize that I might have misjudged their pleas for a better application. Designers thrive on critiques. While positive feedback is always nice for a good ego-stroking, the negative criticism is really what enables us to excel, to grow and to learn from our mistakes. I’d stubbornly ignored a valuable resource for education and forfeited my opportunity to create a tool that was intuitive and easy-to-use. This realization led me to begin collecting the criticism that clients had willingly provided and even to send out questionnaires to pinpoint flaws in the application. My analysis of their comments revealed that the issues centered on the following three problems.
As Reserve-U began to grow, new application functionality was added to existing screens, patched into intermittent pages and band-aided on functions with previously-different purposes. The workflow of the application that had once been so function-driven was now a beehive. Users were forced into sub-sections of Reserve-U to perform tasks that weren’t intuitively part of their parent category. A logical process required them to click three levels deep into one section, re-route to a different section, and find the results redirected in yet another. New functionality added to one table was either ignored in another, or applied differently. Clients couldn’t find functions to perform the tasks they needed and, when they could, were unable to predict the results.
Workflow vs. Dashboards
My initial intent for Reserve-U was to mirror the Automat theory by creating a landing page for its different sections. This enabled the user to perform as many tasks as possible with the least amount of mouse-clicks. The thought process was to direct the users by using the accent color on the links. These dashboard pages ended up more of an eyesore as the orange links increased and took over. The tasks were arranged based on their time of inclusion and not intuitively grouped or listed by common use.Originating from the aforementioned extensibility problems, tables became unruly messes, squeezed into a hard-coded width and linked to unpredictable functions.
Essentially, users found themselves bombarded by links that didn’t define a logical workflow. In my effort to list functions at user’s fingertips, I lost regard to organizing them by use frequency and speed, thus trapping mouses from performing relatively simple tasks.
As the technologies for Cascading Stylesheets (CSS2), AJAX and DIV-oriented site design grew, the site was pigeon-holed into using hard-coded values that obstructed its aesthetic. Each page had a content-area (defined at 600px) and a help area (squeezed into 200px) to assist users with smaller screen resolutions. My logic of focusing on the least common denominator and allowing help to be consistently present was derived from working with corporate clients afraid of losing visitors. I hadn’t realized that application development could allow for two key differences:
Application Service Providers (ASPs) could:
1. dictate required specifications for optimal use (browser, plug-ins, resolutions)
2. train user practices instead of rely on worst case scenarios
Even worse, I had used my experience as a pretense to misjudge client aptitude. Why present help on every page, taking valuable real estate, when I could simply train users to toggle its visibility? Why not offer a help section in a different area, rather than context-sensitive assistance on each page? If a user prefers 800×600 on Internet Explorer 5.0, must my application cater to their preference?
Furthermore, many Reserve-U clients were fashion show producers or PR firms that represented fashion designers, so aesthetic was significantly more important than it would be in traditional sites or applications. While this isn’t to say that color palette and branding elements are unimportant for your average Websites, their impact is elevated among clients that deal with aesthetic on a day-to-day basis. The industry equated form with function. While the site may have been designed well, it didn’t feel trendy. In my target audience’s minds, it isn’t a far leap to believe it didn’t operate well, either.
Further digestion of this analysis proved that a redesign wasn’t only suggested, but crucial to the application’s success. Mouse-clicks were lost, users felt trapped, and confidence was sacrificed. If I was interested in truly building an application that made it easy for events producers and PR firms to work, I would really need to start from square one to build a better mouse-trap.
In Summer 2005, Reserve-U was reborn as Lyrek. The application was redeveloped from the ground up to embrace our clients’ valuable feedback and introduced a whole new IA, interface and technologies.
Information Architecture (IA)
The IA was redesigned to focus on client workflow, rather than the dashboard mentality. Hallway pages were excluded and extraneous mouse-clicks were removed. Navigation was simplified and focused on common tasks.
The workflow environment allowed us to add information prompts to drive users in order of necessity with messages like “You must create the invitation for this event before you can invite attendees.”
The branding of the circa 1930s Automat of Reserve-U was abandoned for Lyrek’s tranquil water lotus. The concept was derived from growth, peace and a natural “human” element with our target audience in mind. Where Reserve-U’s identity was built on technology, Lyrek focused on empowering people. Now, the organic element showed that humans were the heart of the system, not machines.>Lyrek’s color palette was actually suggested by a client (“berries and ocean” rather than Reserve-U’s “peas and carrots”). The accent color was reserved for context-sensitive help buttons and important warnings and confirmations.
Graphical User Interface (GUI)
The help area was removed and replaced with a separate section outside the application process. In some cases, context-sensitive help remained, but it was rebuilt in DIVs to be activated on-hover so it didn’t consume valuable application real estate.
Tables in Lyrek were used solely to display data results as was their intended use before self-taught graphic designers crossed over to start pushing pixels and bastardizing XHTML. Otherwise, the application employed DIVs and Floats to flex with user browser resolutions.
AJAX was incorporated to suggest responses to further predict mouse-clicks, making the system smarter and shifting more of the labor to the application, not the user.
We switched to the Amazon.com tabbed navigation architecture, but only for the sub-navigation to not get into the same situation Amazon.com found themselves in years ago. style=’mso-spacerun:yes’> The tabs were built usingA List Apart’s “Sliding Doors” technique to be scalable, quick-loading and stackable.
Lyrek also included a Flash animation to show the progress of the mail engine. The pages with the movie incorporated Jeff Stearn’s SWFObject to take advantage of the new technology. While we consistently recommend that PC and Mac users browse Lyrek with Firefox, we don’t want to limit them from using Internet Explorer (as Reserve-U had done) if connecting from an event venue or remote location where they were unable to install or specify a different browser.
Most importantly, we didn’t want to repeat our past mistakes. This meant that Lyrek would need to be built to grow over time to incorporate new features. These features must follow the same logical workflow, where they would be found intuitively and operate predictably.
The site was also built to enable users to select a different color palette and customize certain table results. If the palette is really that important to clients, we might as well allow for them to select their own. And down the road, other industries interested in Lyrek may embrace a palette different than the water lotus theme. Or they may want to lease a completely skinnable version designed with their own identity in mind. Hard-coding the stylesheets would simply be duplicating a previous oversight of Reserve-U.
Application Design vs. Website Design
So how is application design different from Website design? I learned that while there are many similarities, especially in technology, there are a few key differences that must be taken into consideration.
Application designers can assume the audience is smarter and more web-savvy than Website audiences for the sole reason that ASPs often allow developers to train them. This means that you can take advantage of specific browsing options, force the installation of plug-ins, and request preferred browser sizes. With this pre-trained and specialized audience, a lot of design limitations are lifted.
Contrary to most Website design, where the aesthetic is based on the company, product or services, the design of an application should be focused on the industry it targets. While Reserve-U’s automat theory was perfectly fine for an application of its core functionality, closer examination of this industry easily revealed that it’s not the optimal solution.
If you’re designing an application for a certain industry or demographic (such as a job placement application or an online store with a target audience), research what they value as far as color palette, type treatment, grid and layout. If you’re attempting to attract users that don’t fit into a general grouping (like a social networking or dating application), consider creating a design that allows the users to change some of the aesthetic to suit their needs.
Since its release, Lyrek has widely been received as a brand new application. The feedback I received from my clients truly helped me to build a smarter, faster and more sellable application, and while I feel somewhat more comfortable defining myself as an application designer, I know I’ll one day look back at this article and think of how little I actually know. I certainly don’t regret the mistakes I originally made when designing Reserve-U, but there’s no question in my mind that I had, and still have, a lot of growing to do.
The most important thing to take away from this experience is that I should never again ignore the precious feedback that comes from clients. Afterall, if you build an application for them, why not put the ego aside and let them teach you how to better trap their mouses.
For more information about Lyrek CEMS, click here.