Contact Us
Contact Us 1-866-sitelabContact UsFacebookTwitterRSS Feed

Blog

RSS Syndication

Archive for the ‘ Cool Websites ’ Category

A Designer’s Perspective

It was that time again. It was time to get our avocado groove on and submerse ourselves into the world of those wonderful green gems. Our partners at the Hass Avocado Board approached us with the task of refreshing their current site with a design that would align with their new re-branding effort. The new clean and modern look-and–feel was quite a departure from the previous authentically  “avocado” inspired design.  Furthermore, we faced the challenge of keeping the existing content and back-end structure while still presenting more relevant content.

 

User Focused Design

Aside from just updating the aesthetics of the site, the team here at SiteLab was equally focused on leveraging this opportunity to realign the Hass Avocado brand in the marketplace through a few key design initiatives.  During our research we recognized the need for content accessibility.  We needed to deliver relevant content to users in more meaningful and interactive ways. One method was through the use of Java Script based page elements.  With jQuery, we were able to utilize tabbed interfaces and collapsible page elements to bring more content to the user experience.

 

Iconography As A Visual Aid

The new logo mark that was developed for Hass Avocados contains a simple avocado icon that is unique and identifiable to just about anyone. The online team liked the idea of reinforcing the new brand mark by developing a set of icons that could also serve as navigational guides. The icons we created turned out to be visually interesting and effectively provides easy access to deeper content within the site.

 

In all, the newly refreshed site successfully integrates the clean aesthetics of the brand with useful, accessible, and interactive content for all the Hass Avocado lovers out there. If you’re feeling adventurous and not afraid of being a little hands-on, try one of the delicious Hass Avocado recipes on the site.

A little over a year ago, the creative team was tasked with redesigning our company site, www.sitelab.com. From a creative point of view we had a few key objectives:

  • Update the look and feel to a more contemporary look
  • Showcase our service offerings & portfolio
  • Take advantage of the latest CSS and coding techniques
  • Lead by example with a highly search optimized site that maintains high creative values

Before the redesign:

Old SiteLab Website Design

Through several meetings with the leadership team, it was determined that we wanted to pursue a very clean, easily scannable, minimalistic design concept. This would allow us to more meaningfully direct the user’s experience. In addition to the functional design aspects, we really wanted to bring the site to life with cutting edge animation technique.

For inspiration we looked to the unique work environment here at the beach in La Jolla shores. What more inspiration could you ask for?

After the redesign:

New SiteLab.com Website Design

The creative team took some time to reflect on how we could accomplish these goals. With several brainstorming sessions under our belt, we nailed down a concept of how we wanted to approach the look and feel. However, we kept getting hung up on defining exactly what those design elements would be, how they would animate, and what animation style would be feasible without taking forever to produce.

Getting Inspired

It hit me one afternoon during a break down on the boardwalk. We have all of these activities going on all around our office all the time. Kayaking tours to La Jolla cove, paragliding above Blacks Beach, scuba diving in the deep water trench off the coast, surfing at Scripps Pier and all things beach-related you can imagine. This was it, this was the inspiration we were looking for…this is what its like to work here and be a part of the SiteLab culture! Now we needed to capture this in a visual way and bring it to life with technology on a Web site (not so easy).

Cutting Edge Animation Technique

To do this, we developed a frame-by-frame animation technique, tracing video segments to create vector based animated masks. These series of masks would be put together in Flash to reveal backgrounds of beach related photography, which also match our brand colors. By making them vector, we had the ability to scale, manipulate and flip the sequences while maintaining edge crispness. The animations interact with the content, transforming a site that initially felt flat and 2-Dimensional, into a site with rich user experience, utilizing depth, dimension and personality.  You can see these Flash elements interacting with content on virtually every page of the site, including the Web Design Page (notice the lifestyle animations alongside and behind the text/graphical elements).

By masking out elements that reveal beach-related photography and utilizing the negative space around them, we had set the cornerstone of our new brand identity to grow upon indefinitely. We’ve since applied this concept across a wide range of mediums (See our Services Overview PDF or our Facebook Profile) and have been very happy with the results.

We believe that good marketing sets a company apart from the pack. What are you doing in your marketing efforts to set your company apart? If you need some assistance contact us and we will make sure that you stand out from the crowd.

A Latte for your thoughts: As part of a best practice following our site launch, we are presenting a survey to site visitors to better understand their needs and how our site is aligned to meet those needs. We are giving away twenty (20) $5.00 Starbucks gift cards in a random drawing of survey participants.  Jump on over to http://www.sitelab.com and you will find the survey link on the bottom right side of every page.

Our Web site redesign project required us to take a fresh look at not only the look and feel of our site, but the technological underpinnings of it as well.  It was clear for all to see that the old site no longer represented our current brand, but what was not so clear was how to bring our look forward without handicapping ourselves in our choice of technology.

There are limitless choices out there for different technologies and different ways of programming a site.  However, not all of these technologies or combinations of technologies are wise choices to use for a website meant to (1) Attract qualified, relevant visitors and (2) Represent the SiteLab brand.

From the perspective of attracting qualified, relevant visitors, we have the impulse to create a site with maximum search engine optimization.  But often times that leads to a visually boring site.  From the perspective of representing the SiteLab brand, we are drawn towards visually pleasing technologies – like Flash.  But often times – like a billboard in a desert – this impulse leads to a site that cannot be found by potential customers.

Getting the Right Mix

Due to these competing strategic goals, we chose a hybrid approach for our Web site redesign.  This meant using each technology and programming methodology in a way that maximized its advantages without incurring the typical disadvantages associated with that choice.  In this way, we were able to design a website with a rich, impressive user experience that is also highly optimized to attract relevant, qualified site visitors.

Why doesn’t everyone design their site in the same way?  We’re not sure, but we are certainly happy they don’t.  Below are the tactical technological choices we made to make this site achieve seemingly competing goals:

  1. SEO-friendly Flash Implementation – You may have heard that using Flash in Web site development handicaps your SEO efforts.  Well…this can be true, but it isn’t necessarily true.  The problem with Flash is that it encapsulates your content in a file/format that search engines have trouble interpreting.  If all of your content is encapsulated in a Flash element, search engines cannot determine the relevancy of your site and thus internet users will not be able to find you.

    However, Flash offers design flexibility and user interactivity unmatched by other technologies.  As such, we developed a methodology whereby we were able to use Flash elements, but we did it in a way that our content was not encapsulated wholly within the Flash.  This means that search engines can find and read our content and direct relevant users to our site, while also creating a rich user experience that could not be achieved as well without the use of Flash.  Go to any page on sitelab.com, such as our Web Design Service Page, and observe the lifestyle animations that appear alongside and “behind” the text content.  By utilizing technology in a creative way, we were able to achieve the best of both worlds.

  2. Leveraging JavaScript for Clean Code and Interactivity – In addition to Flash, we developed methodologies to leverage JavaScript to further enhance interactivity, without harming our ability to attract qualified site visitors.  JavaScript is another technology which search engines have trouble processing, but used properly and creatively it can be leveraged to enhance  user interactivity by displaying content to users in a more elegant way.  Implemented properly, all content can be found and read by search engines as well, as opposed to content encapsulated within Flash elements.

    Not only does our use of JavaScript enhance the cleanliness and attractiveness of the website for search engines (and thus searchers), but it also enhances user experience by presenting information in a more stream-lined manner.  Check out any client-specific portfolio page to see our use of JavaScript in action, such as the Hass Avocado Board Portfolio Page.

  3. Placing the Website on the Cloud for Faster Loading and Increased Development Flexibility – Google is making a concerted effort towards speeding up the internet for web users through their “Let’s Make the Web Faster” initiative.  In fact, Google has placed so much priority on speed that site load time is now a factor in their algorithm for ranking websites in search results.  By moving our website to the cloud, we increase the speed with which our site will load for users through load balancing.

    In addition to speeding up site loading, placing the site on the cloud opens up our development options for the use of technology on our site.  In general, web servers are either Windows-based or Linux-based.  Depending on which type of server your site is on, you would normally have to develop your site in a particular technology.  Typically on a Windows server, Web sites are built in .NET; on a Linux server, Web sites are built in PHP.  By having the site on the cloud, we are able to use each technology strategically to achieve our goals.  You’ll notice that our blog is coded in PHP, whereas the rest of the site is .NET

The important point to take from this project is that different technologies offer different advantages and disadvantages.  Combined with that fact, strategic goals often times exist in opposition to one another.  By intelligently selecting technology to align with strategic goals, your Web site redesign offers you a chance to not only increase brand equity through enhanced user experience, but also empower your organization with increased technological choices to achieve those goals.

Tell Us What You Think – We’re giving away twenty (20) $5.00 Starbucks Gift Cards for simply filling out our 6-question Web site redesign survey.  We’ll be randomly selecting 20 participants as winners.  Don’t worry, all responses are anonymous and confidential and your contact information will only be used for prize fulfillment.

UPDATE 1/20/10 – Burj Dubai has made an official name change to Burj Khalifa.  Along with this name change, they have moved their website from www.burjdubai.com to www.burjkhalifa.ae.  Please visit the new Burj Khalifa website (formerly Burj Dubai).

SiteLab is pleased to announce the initial launch of the much anticipated new website for Burj Dubai, The Tallest Building in the World.  This is the first phase of the launch of the site with new features and site enhancements to be rolled out over the next few weeks.   Check out the new site at www.BurjDubai.com.

Burj Dubai (Tallest Building in the World) Website Design

We’re proud to say that the site has already attracted over 30,000 visitors, despite the fact that the site’s launch hasn’t officially been announced.

UPDATE 12/22/09:

With all the recent news about Dubai amid their credit crisis, a story was featured on the Yahoo home page, prominently displaying an image of Burj Dubai.  This led to over 30,000 visitors on that day alone (almost 90% search traffic).  Since launch the site has averaged over 8,500 visitors a day (with nearly 80% of this traffic coming via organic search).  Usage of the site has also been quite impressive with visitors averaging over 4 pages a visit and more than 3 and a half minutes on site.

We’re especially pleased with the site’s organic search performance as the former site was designed completely in flash, without any regard for search visitors.  The site’s new structure allows for visitors to enter the site through any one of the HTML pages designed to attract search traffic from highly relevant, highly searched keywords.  Not only does this provide a better user experience for search visitors (as they land on the page directly relevant for their search), but it also allows the site to attract more search visitors with content that is both accessible by and desired by search engines.  The previous site designed in flash had no indexable search content and made it impossible for search visitors to land on a page relevant to their search.

SiteLab Goes Bananas With New Chiquita Website

August 31st, 2009
by Matt Parisi

When Chiquita approached us to develop a new website appealing to health conscious consumers there were several challenges we had to overcome.

Challenges

  • Audience Fragmentation – Chiquita appeals to so many different audiences and demographics that it was difficult to determine exactly where this website would fit in to the whole family of Chiquita properties. Before we started we found that the most visible web property to consumers was actually on the corporate Chiquita.com website, which gave little attention to the fact that consumers would browse this information.
  • Creating Offline Results Online – Our efforts would have to result in increased sales at the store level, which is more of a challenge when stores typically carry one brand or another, rather than having two brand compete in-store. We would have to develop a plan where users either search out Chiquita grocery stores or get consumers to ask for Chiquita by name.

Goal

The goal was clear – develop an integrated retail and online program generating interest at the store level. Educate consumers about the nutritional value of bananas when compared to their low cost.

Solution/Outcome

  • Content Development – The first step of our solution was to develop a new website catering solely to promoting Chiquita Bananas to consumers. The new website, at www.ChiquitaBananas.com, addresses the void of banana-related information that was out there online. The new, fully search engine optimized website gives consumers usage ideas, nutrition information and general banana information, such as where bananas are grown and how to select the best bananas. There’s also a section devoted entirely to kids, where kid-related recipes are promoted to give parents ideas for incorporating bananas into snacks, lunches and dinners.
  • Consumer Incentives – We started a free recipe newsletter to serve as a way for Chiquita to start email marketing efforts with an attractive, no risk offer. Through the free recipe newsletter we will be able to keep Chiquita Banana top of mind for health conscious consumers. We also incentivized the website even more with calls to action inviting users to participate in Chiquita’s Tropical Getaway Sweepstakes, where consumers could win a trip to Costa Rica, a Chiquita growing region. As the final piece of the incentive puzzle, stores themselves are invited to participate in a contest where the most effective in-store displays are rewarded with one of several valuable prizes.
  • Integrated Offline Promotion – Even though the above is compelling, we felt strongly about integrating our efforts with in-store and offline promotions. As a result, a retail program was developed with in-store point of sale (POS) materials. POS displays showcase Chiquita Banana recipes and promote the sweepstakes that is running through October to supplement our online efforts. Coupled with the store contest encouraging in-store displays, this program has been warmly received.
  • Online Promotion – To encourage even more traffic to the site beyond in-store promotions, the site was developed with Search Engine Optimization in mind every step of the way. This allows the website the best opportunity to capitalize on existing search traffic related to bananas and other desirable topics, such as ‘healthy’-related searches. SEO sometimes can take a little time to develop traffic, so this was also supplemented with an integrated PPC campaign on Google to ensure that traffic would start flowing almost immediately.

Overall, we are still waiting to see the ultimate results of the programs that have been put into place, but this plan nonetheless represents a strong step forward for Chiquita in the online marketing space.

SiteLab\'s Chiquita Web Team

SDNN Site Design by SiteLab Interactive

San Diego news is going online with the San Diego News Network.  When the husband and wife team of Neal Senturia and Barbara Bry joined forces with Ron James, the former editor at signonsandiego.com to form the new San Diego News Network (SDNN.com) – SiteLab was tapped to provide the templates for the new site design.  Even though the final design templates provided by SiteLab (pictured) won’t be in place until the phased roll-out is completed over the next several weeks – we are proud to be affiliated with the new and improved way that San Diegans will be getting their news.

SDNN is a pioneering venture as a news site in that it will share ad sales and content with it’s partners.  In addition to licensing Associated Press news, SDNN is also taking stories from contributing editors, freelance writers and bloggers who will be paid based upon the popularity of their stories. These stories will also be tailored for each subscriber based upon their location and preferences making every subscriber’s news as targeted as possible.

In the coming weeks SDNN will introduce the city to their team of talented journalists and the rich and diverse content expected from a local news website.  Visitors will find new San Diego stories and features showcasing world-class reporters and editors. They may be the new kid on the block, but their editorial team has more than 500 years of journalism experience. In the coming weeks, they will begin rolling out our editorial sections on topics of interest and importance to San Diegans, ranging from health and the environment to entertainment, food and drink, and home and garden.

To complement the next generation of its video conferencing software, WiredRed joined with SiteLab Interactive to create Nefsis.com.   The new site offers a brand new, refreshed look and feel to go with the new brand name, Nefsis.  Using SiteLab’s proprietary website development process, the design of the site was driven by search engine optimization research to ensure the best possible mapping between user expectation and information architecture.  Competing against industry giants such as Citrix, Adobe and Microsoft, one of the major prerequisites for designing the site was to maintain prime real estate in search engine results pages without sacrificing design considerations.

The new site will feature a flash-based header to promote user interaction.  The header will rotate between six different screenshots and accompanying text that will expand and play a short movie upon a user’s click.  Upon completion of the movie, users can choose to continue to the accompanying page on the website, or he/she can choose to return to browsing.  Combining world class web design, a well informed information architecture plan, and interactive elements, SiteLab Interactive and Nefsis have united to release a site that is as enjoyable and useful to the users as it is profitable to the company.

About Nefsis:

Nefsis is a next generation, video conferencing service designed for effortless, business-to-business online meetings. It is backed by WiredRed Corporation and over 10 years of secure, real-time communications technology development, thousands of customers, and a team of professionals dedicated to advancing the state-of-the-art and customer satisfaction.

 Nefsis Corporation
4669 Murphy Canyon Road
Suite 108
San Diego, CA 92123

Nike: Breakfast Club

April 29th, 2008
by SiteLab

Nike is raising the bar in terms of integrating the product into the consumer’s day-to-day life.

http://www.nike.com/jumpman23/features/reg_builder/

K-Swiss Free Running Interactive site

April 23rd, 2008
by SiteLab

Interactive site from K – Swiss you just have to check out to experience it.

http://www.kswissfreerunning.com/EN/