NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE
NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE

AIAIO: Our Blog

AIAIO: Our Blog

The pulse and reviews of Alexander Interactive

Archive for the ‘Design’ Category

Facebook Responsive Photo Gallery Plugin

It’s been way too long, but I finally got around to updating the Facebook Photo Gallery plugin for the terrific image gallery framework, Galleria.  The library lets you put Facebook album photos on your website using the Graph API.  Galleria has great support for responsive photo gallery layouts.

Facebook loves to change their Graph API without warning (and sometimes defying logic), and we needed to make a small tweak to the syntax for changing the default limit of 25 photos on a album to:

var url = 'http://graph.facebook.com/' + params['album_id'] + '?callback=?' + '&fields=photos.limit(' + this.options.max + '){images,source,picture,link,name}';

Enjoy the plugin, and take part in the discussion on the aiaio github.

Put Facebook photos on my website

Design

IRCE Focus: Digital Design

Righteous Recap for Rockstar Retailers

by Grace Paik

IMG_1768

Alexander Interactive recently attended the IRCE Focus conference on Digital Design in sunny Los Angeles, California. We had a booth on the exhibition floor, as well as a separate booth in which our Experience Director and design-wizard, Ed Samour, was able to provide in-person design consultations for conference attendees. Co-founder and pixel-whisperer, Josh Levine, enjoyed the limelight as the conference’s concluding speaker, sharing thought-provoking insights on how to incorporate social sharing in a site design along with some pretty killer anthro-animals. Yes, that’s a thing.

As exhibitors, we found the conference a fantastic opportunity to connect with existing clients and meet some new ones. By attending some of the seminars, we were able to learn what’s really on the minds of retailers big and small. What are their burning questions? What are the specific challenges they’re facing? What are some digital concerns that they hadn’t considered but should be prioritizing?

Many retailers were visiting the conference to find solutions for a specific pain point. Others were more interested in learning where the industry is focusing its efforts, both on an enterprise and small business scale.

Here’s some stuff we learned while we were there.

  • Agency-recommended SEO best practices are great, but retailers should drill into the ones that translate to actual sales. Look holistically at your business and focus your energy on those strategies that will move the right needles.
  • We’ve known for a long time that video helps drive conversions in e-commerce. Did you know that YouTube is the second most popular search engine on the Internet? Combining video with your SEO strategy is more crucial now than ever.
  • Buying and sharing should not exist in silos. Learn from social sharing – implement seamless favoriting and hearting on your site.
  • Customers are researching products on social networks where you might not have much control over those conversations. Have no fear! This content is gold – aggregating and integrating it into your site not only helps with merchandising, but also provides customers with more confidence in your products.
  • Know your audience. If your site sells beautiful jewelry, privilege visual social platforms over others (i.e., do you really need that Twitter share button?).
  • Speakers who invested in responsive design found that it did not increase their mobile traffic very much. But it did increase their mobile conversions – and their bottom line – in dramatic ways.
  •  A full 30% (WHAT?) of the top 500 internet retailers aren’t set up to be mobile-friendly, either with responsive design or with an m-dot site.
  • Google is changing its algorithm on April 21, 2015 so that sites that are not mobile-friendly will drop in the rankings.
Design

Ai Hosts a Design Roundtable with SheSays New York.

SheSays

On May 28, Ai hosted a Design Roundtable Event in partnership with SheSays .  SheSays is an award-winning, global creative network that organizes events and provides mentoring and recruitment services to enable top females in the industry help others navigate and advance in their careers.

The topic last Wednesday was one near and dear to everyone at Ai: BALANCING SPEED, EFFICIENCY AND DESIGN INTEGRITY.  It was an honor to moderate the discussion and hear from our impressive panel of speakers including Jenine Lurie (Found of Disruptive Experience), Jaclyn Burgan (Senior Interaction Designer at Turner Broadcasting) and our very own Design Lead, Christina Goldschmidt.

A special thanks to Amanda Jaskiewicz and Alessandra Lariu of SheSays! The energy, enthusiasm and perspective shared was incredible– and we met a lot of talented new friends too.

Ai

The 8 Principles of Design — How to Leverage the Power of Design and Turn Consumers Into Customers

Color, typography, placement, organization—even white space—are the visuals that can help attract shoppers’ attention, keep them engaged with the site and intrigued with the brand, and turn them into buyers—or they can turn off or confuse site visitors, detracting from the shopping experience and the brand.

Ai’s Chief Experience Officer and Co-Founder, Josh Levine along with David Workman, Manager, E-Commerce Operations at Delta Apparel presented this week at the IRCE Focus Design and Mobile conference in Orlando, FL. In their session, attendees learned how to master powerful design elements into a site design that works to their advantage.

If you’re interested in creating a unique shopping experience that converts, check out Josh’s presentation below or download the full presentation.

Design

wEbVOLUTION Timeline

A history lesson and evolution timeline brought to you by Ai…

1993

The World Wide Web debuted to the public, for free, 20 years ago today. Yup, only 20 years ago. Here was the first website, which has been re-released by CERN for this occasion:

First WWW web site

1996

Our founder, Alex Schmelkin, made his first website for Hofstra University 17 years ago. Check it out:

Alex's first web site

2002

The year Ai’s created its VERY FIRST WEBSITE. The lucky client? DonorsChoose.org

Ai's very first web site

2003

We developed our first ecommerce website for FragranceNet.com. FragranceNet.com is ranked 153 on the Internet Retailer Top 500.

FragranceNet.com

2013

That’s now! This month we launched MyRingPop.com, with e-commerce and custom product configuration. Voila!

MyRingPop.com

Any guesses what websites will look like and what technologies will be important in another 20 years?

Ai

Redefining the Post-Mortem Meeting

Thinking back to my first time seeing the meeting subject title ‘Post Mortem for (insert project name that went horribly awry)’ pop up in my Inbox …I remember hitting ‘Accept’ somewhat reluctantly. My mind quickly concocted a visual of a mock funeral for said project, the people there didn’t really like the project, but they attended anyway…out of respect. Afterward they talked about a few good qualities, but mostly complained about it before going back to business as usual.

Yes, a little strange maybe, but that odd visual story in my head proved to be accurate for most Post-Mortem meetings attended in the years that followed. Different agencies, different projects, but they all usually played out in the same way. Typically, one of these meetings would be scheduled only after a project that was riddled with issues, blown budgets & missed deadlines. As for projects that went tremendously well? No need for a Post-Mortem, we’re awesome, go team!

Changing the Perception

Unfortunately, these after-the-fact meetings usually have a negative connotation attached to them. People attend with their backs up, ready to defend their role on the project, air grievances, and place blame elsewhere. Luckily, it doesn’t have to be this way. When it comes down to it, team members want the projects they take part in to be successful. Changing the perception of how a Post-Mortem is perceived is crucial to future success on projects with that specific client, and your company’s process as a whole. Enacting this change is done by focusing on the holistic view of how your company evolves its process over time, not just what they should have done in hindsight on that one project.

Below are the tenants that should always be top of mind for anyone planning on conducting a Post-Mortem successfully. If you stay true to these items, your team will start to view these meetings as a beneficial aspect of the project and you will see the improvements in future endeavors.

1) Keep the meeting structure simple

There are quite a few meeting outlines that exist out there, but they all really break down into five main components. At Ai, the following structure for Post-Mortem meetings has proven very successful.

• What has been working?
• What has not been working?
• What was painful but necessary?
• What did you learn about working with this particular client?
• Any recommendations that we should implement into future processes?

This breakdown requires the team to begin with positive aspects of the project, and end with forward-thinking process improvement ideas to help set an optimistic tone and shift the perception away from the negative. It’s tempting to gloss over everything but that pesky second bullet, but it is so important to make sure all aspects – good and bad – are discussed.

2) Ensure the attendees are prepared ahead of time

By nature, Project & Account Managers are organized. Keeping the client happy, the projects successful, and the team working efficiently is par for the course. This includes getting your Post-Mortem meeting outline in order. But these goals are not always the main focus of the team members executing the deliverables. They are focused on their daily tasks at hand, whether it involves getting a Strategy Recommendation out the door, or the third revision of creative done in time to hand off to Technology. Basically, people are busy and this could fall low on their list of things to get done.

To sidestep any probable delay in receiving feedback, send out a list of questions to the staff at least one week before the meeting. Put a reminder on their calendar, asking them to send responses by a specific date. This forces team members to really think about the answers. If you ask people to physically type out their feedback, you will find the content will be more pointed & specific. People will instinctively recognize in their bulleted list what is legitimate, and what is just whiny.

3) Time It!

The recommended time for a Post-Mortem is no longer than 1.5 hours. Sometimes this can be difficult, especially if there are too many missteps to count. The organizer can sidestep this by identifying overlapping problem areas received in the initial feedback and integrating them into one focus point. Each bullet point has a specified time allotted and, once you reach the maximum time for that item, assess whether it is necessary to schedule a follow-up meeting.

4) Introduce the Mini-Mortem

A few months ago, a PM was trying to see what she could do to correct a list of growing issues on a hectic project…then a light bulb went off. Why wait until after a project has come to an end to course correct issues and highlight achievements? By placing a ‘Mini-Mortem’ at the halfway point of the project, the team as a whole was able to identify problem areas and pain points before the project is over. By providing them a means to voice these concerns and call out things they feel are working well, it allows the Account Managers ample time to refocus efforts where needed. Again, it’s important not to ignore the positive aspects, this is a great time to leverage what has been working well and build upon it.

5) Apply Lessons Learned To the Next Project

When Post-Mortem meetings occur after a project, often times whatever learnings are captured tend to be quickly forgotten. The information shared between coworkers during these meetings is on some level remembered, and corrections of previous issues happen organically, but this isn’t enough. At some point people will roll off and new members will transition onto a piece of client business. If tangible steps aren’t taken to capture the valuable information shared during a Post-Mortem, the ever important ‘Next Steps’ will never be implemented. When mistakes aren’t corrected, these meetings tend to be viewed as a time-suck. Why bother meeting if management isn’t going to fix it the next time around?

When a new piece of work gets underway, make sure there is time allotted to review the previous Post-Mortem notes along with the Next Steps from that meeting. Below is an example of one item that showed up on the whiteboard of a Post-Mortem, and it’s Next Step:

Issue:
“ Having multiple work-in-progress meetings scheduled with the client each week was great in that we got buy in on our ideas throughout the process, but towards the end of the project we needed less meetings and more time to focus.”

Next Step:
PM to check in with the creative team each Monday, at this time we will assess what WIP’s are needed that week. We will also shift the 9:00am scheduled time to 5:30pm to allow creative to be ready.

A Happier Team

By implementing the steps above, you will begin to shift the overall attitude around how the Post-Mortem meeting is perceived by your coworkers. So start changing the perception, assign next steps and hold the team accountable. Next time a new piece of work rolls around, reserve a slot of time to refer back to the items that came up in the last Post-Mortem. Make sure to highlight the good and bad, although correcting mistakes is crucial…touching upon what the team excelled at will boost morale and remind everyone that ‘it wasn’t all bad’.

And lastly…can we please change the name of this meeting?

Business

Display Facebook Photos on Your Website with Galleria

UPDATE: June 25, 2015

A new version of the plugin is available on our GitHub page.

UPDATE: May 3, 2013

Finally! I pushed the plugin to our GitHub account so it has a permanent, source-controlled home.  The latest and greatest Galleria Facebook Plugin can always be found here:

Galleria Facebook Plugin on GitHub

In this release:

  • Published initial version to GitHub
  • Fixed &limit= to &photos.limit= in querystring arguments (thanks @RoelDekker)

(Note: I’m going to soon remove the old versions that were uploaded as a zip to this post to prevent people from downloading the older, out of date versions.)

UPDATE: April 29, 2013

UPDATE: December 12, 2012

UPDATE: August 29, 2012

  • Now supports Galleria 1.2.8
  • Fixed bug that caused missing thumbnails on Galleria versions 1.2.7+
  • Restructured portions of the plugin to be based on latest Flickr plugin in Galleria 1.2.8
  • Updated post below to include 1.2.8 documented way of loading themes (slightly different than the documented approach in 1.2.6)
  • Latest plugin: galleria.facebook.zip

Facebook provides an easy way for individuals to display photos from their profile using Facebook’s Photo Badge.  You download a small snippet of HTML, embed it in your website or blog, and et voilà.

However, there are a few drawbacks to the tool, most notably:

  • The Facebook Photo Badge does not allow much customization. If you’d like control over how your photos are displayed on your website, you will need another solution.
  • Photo Badges are currently limited to photos from an individual’s profile and do not support company Pages. If you want to display Facebook Page albums and photos on your site, read on.

Galleria

Galleria is a popular, open source photo gallery whose “aim is to simplify the process of creating professional image galleries for the web and mobile devices.”  Best of all, it’s free and comes with an attractive theme for displaying your photo albums.  You can purchase additional themes, though I’ve found the basic, free theme to be attractive and sufficient for most purposes.

Out of the box, Galleria does not currently support loading Facebook albums, but does have excellent support for Flickr and Picassa.  I adapted their Flickr plugin to work with Facebook.  You can see an example of the Galleria Facebook Plugin in action on The Gaga Center site.

Galleria Facebook Plugin How-To

Instructions on how to display a Facebook photo album on your website using Galleria.

1. You will first need to find the identifier for the Facebook album that you want to display. I haven’t yet found an easy way to do this other than looking in the URL when you’re viewing the album at Facebook. Navigate to the album in question, and copy down the album id that I’ve highlighted in red below (for your own album, of course):

http://www.facebook.com/media/set/?set=a.291489504249941.68160.249094895156069&type=3

2. Download and install Galleria:

http://galleria.io/download/

3. Download and install my Galleria Facebook Plugin:

Get a copy of the plugin: Galleria Facebook Plugin

The Galleria library has a directory called plugins/.  Unzip galleria.facebook.zip and place the facebook/ folder directly in the plugins/ directory so the file layout looks like this:

galleria/
  galleria/plugins
    galleria/plugins/facebook

4. Load jQuery, Galleria, the basic theme, and the Galleria Facebook Plugin in your HTML page (this assumes you’ve put the basic Galleria files in a js/ directory):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/galleria/galleria-1.2.8.min.js"></script>
<script src="js/galleria/plugins/facebook/galleria.facebook.js"></script>

5. Add the following snippet of HTML to your page, setting your album_id (gathered in step 1), height, and width:

<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
 facebook: 'album:291489504249941',
 width: 745,
 height: 550,
 lightbox: true});
</script>
<div id="galleria"></div>

6. You can explore more Galleria display options and fun tweaks in the Galleria Documentation.

An Example!

See the Facebook Galleria Plugin in action on The Gaga Center website.

Finally, do consider purchasing additional themes as the developer generously donates this photo gallery to the world and I’m sure would appreciate it! (we have no connection to them) The gallery has great support for mobile and tablet, including native swipe gestures.

Design

Creativity and Organization from a Junior Designer’s Perspective

As a junior designer the thought of “creativity” and “organization” even being in the same sentence seems counterintuitive. But I learned early on that you cannot be an unorganized designer at Ai.

If you don’t organize your work, your designs will suffer. You can’t afford to lose things or forget tasks or client requests. Every missing document or lost bug assignment is time lost. This sometimes can be a difficult task when you have four project managers approaching you at the same time.

Prioritize 

One thing I’ve learned at Ai is how to prioritize. There is never a task too small, but some are more urgent then others. At the beginning of the day I take a moment to gather myself, prioritize my tasks and let all the project managers know where my priorities are and when they should expect their tasks to be completed. It’s always better to let a PM know they might not get their design change till the afternoon than to leave them hanging. (Their jobs are hard enough.)

Make a List

Once my projects are prioritized, I make a to-do list. Now don’t get me wrong; I love the internet and all it has to offer (just look at where I work) but I love the simple joy of Post-It notes. Call me old-fashioned, but there is nothing better than a good old pen and paper for making a to-do list (and the satisfaction of crossing things off).

It doesn’t matter what you use for your list as long as it works for you. Besides Post-Its, I personally find the Action Pads really helpful. If you find it easier to organize your to-do list on the computer, there are lots of programs. A favorite of the Ai design crew is Teux Deux, a free minimalist web-based to-do list.

Name Consistently

Now my workload is assessed, my day is prioritized, and my handy Post-Its are in sight – a to-do list is useless if it falls beneath the pile of papers on your desk. The same applies for your digital organization.

When working on tasks, you should have a consistent way of naming files and folders. I use concise but descriptive names that can easily be found via search. Always use a numbering system so you can track which file is the most recent. This has been especially essential recently in our work with retailers whose products are changing constantly with the season.

Save, Save, Save!

Last (but certainly not least) the Golden Rule: “Save your files. Constantly.” Make ‘Command+S’ your friend. You can have the most organized file system and the best naming method, but none of that will matter when your system crashes and you’ve forgotten to save your last hour (or day) of work. I’m having a flashback of losing hundreds of resized images in a single computer crash.

Don’t let my nonchalance fool you. As a junior designer, I’ve had to learn some of these lessons the hard way. Organization is difficult work, but the more you work at it the easier it gets.

Tracking your tasks, prioritizing, keeping your workspace organized and constantly saving progress will give you peace of mind and save you precious time, allowing you to be more creative. While some new designers may think of the two as mutually exclusive, organization and creativity go hand-in-hand.

Design

Excitement for the Web

During an interview I gave to Alison Enright of Internet Retailer magazine about designing across an increasing variety of devices, and the topic of the current excitement in the web design community came up. It got me thinking about why exactly everyone is so jazzed about what’s going on in the web right now.

While the storm of talk about responsive web design and new technologies are definitely factors in creating a high level of buzz with design oriented techno-nerds like me, I found myself realizing that these things are just a small piece of what makes the future of web so exciting.

We are again at a point where designers and developers are equipped with both new devices and the technologies necessary to create truly exciting content for them. Five years ago today, Steve Jobs unveiled the very first iPhone. Since then we’ve seen smartphones (then tablets) go from newfangled to prolific.

Right now we are creating new patterns and trends that will shape and form the way the web is used for ages to come. The internet is evolving it right now, and we have the power to make it whatever we want. It’s a good time to be in the web industry.

Design