Spark

Subscribe via Email

Subscribe to RSS feed

Archives

STLUX Recap: Getting Started with Website Performance

Back again with another recap of the STLUX conference sessions!  My previous post in this series covered Practical Interaction Design for Developers, a session by David Ortinau.  Where that session discussed how developers can educate themselves about user actions and expectations in regards to the design, this session covers another aspect of a user’s expectations for your site: its performance.  Given by Duncan Jimbo, here are my notes from Getting Started with Website Performance.

What is website performance?

Website performance is the delay perceived by a user between an action and a response.  Your website’s performance is your business, because poor performance costs you money.

Nearly 60% of users expect a site to load in 3 seconds or less, and 71% of mobile users expect the same results or faster than its desktop counterpart. Read the rest of this post »

STLUX Recap: Practical Interaction Design for Developers

St. Louis had a user experience conference last month (yes, I am very timely) called STLUX, and I’m starting a series of blog posts to recap some of the sessions I attended.  Instead of the typical essay type of blog post, these will be a more in depth breakdown of my notes, which come in a bulleted format.  Enjoy!

It is the duty of the machines and developers to understand people and how they think. We can absorb the pain, so our users have a better experience.This is the first in the series, covering the session by David Ortinau called “Practical Interaction Design for Developers.”

  • Interaction design is defined as the structure, behavior and the meaningful relationships between people and products.
  • In interaction design, people are the focus, not the code.
  • EVERYONE (on the team) needs to be informed about what the design is trying to do.  Designers and developers need to work together.
  • Developers don’t know everything, and should constantly be questioning themselves and their solutions.
  • “How did I come up with this answer?” Question yourself. Your brain can often trick you with your first answer.
  • It is the duty of the machines and developers to understand people and how they think. We can absorb the pain, so our users have a better experience.
  • Bill Verplank’s Three Questions (for interaction designers to answer in regards to their users)
    • How do you do?
      • Push that button
    • How do you feel?
      • I messed up
    • How do you know?
      • Way finding
  • Don’t make your user figure out and understand how your product’s system works.  Your system should understand how your user thinks and expects the system to work, and your system should work accordingly.
  • Slow is a bug
  • Cognitive dissonance is a bug 
  • Cognitive dissonance is when the user expects one thing to happen, and something else happens instead.

All in all it was a great presentation.  I always enjoy listening to David speak, because he has a fantastic presence and passion for the topics he presents.

Stay tuned for my next session summary on fixing your website’s performance!

The Dynamic Customer

At the recent Adobe Summit in Salt Lake City, one of the most interesting presentations I saw was delivered by John Bollen of MGM resorts. As the Chief Digital Officer for MGM, John is responsible for supporting the guest experience through technology. During his presentation, John brought up an interesting challenge. At MGM, they realize that their guests are never the same guest twice. What that means, is that a single customer might visit an MGM resort multiple times under different circumstances. For example, they may visit on an outing with their friends, then again on a business trip with colleagues, and later on a leisure trip with their family. The key to delivering a great experience for each visit, is understanding which mode a guest is in, and providing the appropriate interactions. 

The challenge John described is what I refer to as The Dynamic Customer. While you may have a good understanding of your customer’s needs, behavior and motivation, you can’t expect them to engage with you in the same way every time. Customers are people. And people are dynamic. They are emotional, sometimes irrational and largely influenced by their environment. To provide the right experience at the right time, you need to take into consideration the customer mindset and provide interactions that are appropriate for the situation.

Take for instance, my experience with our local drugstore. I always seem to find myself running to the store with my kids to pick-up a gallon milk, a prescription, or whatever last minute item I need. However, when I have a sick child with me, the last thing I want to do is get them unbuckled, drag them into the store and then try to get them back into the car. On one such visit earlier this year, I was going to the drugstore to buy some Motrin for my son, who was with me in the car. I thought, wouldn’t it be great if I could just get the medicine that I needed through the pharmacy drive-thru window? Surely that makes perfect sense. So I tried to do exactly that. Unfortunately, my store did not offer any OTC medicine through the pharmacy window. Needless to say, I was not a happy customer that day. The drugstore did not consider my situation and provide an appropriate experience. On the other hand, all of their other customers did get to experience a sick, screaming child being carried through their store…

In this instance, it seems that my situation was not unique. The drugstore has recently added some of the most common over-the-counter medicines to drive-thru pharmacy window, including children’s Motrin. Now they’re thinking about The Dynamic Customer, and so should you.

 

Barbie’s Dream House: Engaging with Simple Design

I took my daughters to The Barbie Dream House Experience at Mall of America the last weekend. The experience is a 30,000 square foot life size doll house created with 20 pounds of glitter and 100 gallons of pink paint.

Barbie Dream House Experience
Read the rest of this post »

Posted in Design, UX

Adobe Summit: Building a Global Digital Marketing Platform

This session had a nice abstract that set some high expectations for a case study.

Creating a dynamic platform to support global digital marketing programs? PwC and USG developed a strategic plan and roadmap to deliver an integrated solution that enables local markets to take advantage of the global investment, from digital asset management, assets and product data, to developing country-specific workflows, while also ensuring brand compliance and consistent analytics and measurement. This scalable, Adobe Marketing Cloud based solution provides USG with the framework to target its marketing and optimize experience based on real-time data. Learn how USG and PwC collaborated to develop a cloud-based platform based on Adobe Experience Manager, Adobe Analytics and Adobe Tag Manager, and DAM. In this session: – Learn how starting with a Mobile First mentality drove the experience design – Discuss global analytics dashboards – Explore marketing automation platform integration, and hear how USG is leveraging the platform for their employee intranet This session is for digital marketers.

Data

  • 50 billion connected devices by 202
  • 2X the E7 GDP will double
  • Gartner by 2017 the CMO will spend more on IT than the CIO
  • eMarketer – just under 40% of marketing big data spending will go to software investment

USG is a building manufacturer. They had a large impact in the recent downturn and needed to deal with that plus making changes in how the company dealt with the market.  They had a lot of challenges including an outdated site, outdated technology, no clear user experience, no analytics or decent benchmarks. On top of that they were in the midst of going global

The old site was a bunch of links focused on their products and not much. It had little valuable information.

What did they do?

Read the rest of this post »

Adobe Summit: What’s Next for Adobe Campaign?

Thomas Boudalier, VP of Engineering for Adobe Campaign and Francois Laxalt, Senior Product Manager, both gave a session on where Adobe Campaign is going in the next little bit. While we saw some demos of a fully integrated Marketing Cloud including Adobe Campaign, we know it hasn’t been released yet.  Of course, those in the audience wanted to know about more than just a SaaS version. Marketing automation is seeing a lot of change so Adobe Campaign has more to show.

Trends, What’s Next for Cross-Channel Marketing

Francois started with a number of trends driving change in the industry.

Empowered Consumer

This is the era of the empowered consumer and you have to EARN their trust.

Stats:

  • 54% of consumers don’t trust ads they see. (Forrester)
  • 70% feel that your attempts at personalization are superficial

Consumers also want more options for privacy and how much you interact with them.

Channel Proliferation

With the digitzation of marketing, addressable channel have proliferated.  Large companies like P&G plan to shift their ad spend to addressable channels.  At the same time, legacy channels like TV are becoming more addressable.

New channels

  • Video game consoles and video games
  • Cars
  • Once cars become addressable then almost anything can become a channel

Content offer Optimization

You have a couple challenges

  1. It has to be real time
  2. You have to deal with lots of formats (format deluge)
    1. Many start in one channel and move to another to complete the transaction
  3. Contextualization
    1. Now you need to know where a person started, where they are now, and how to keep the exxperience moving.

Data Conundrum

All the channels, CRM, third party data, websites, and a marketing database gives you a lot of data.

Stat: In 2011 71% of CMOS said they felt underprepared to deal with the data explosion. Now that statistic is 80% (IBM)

First party data is king.  It delivers the best ROI, allows you to match anonymous and known data, and you own the data.

Automation and Orchestration

Adobe Campaign rides the cusp of this trend.

Adobe Campaign

Marketing is where the action is right now. They follow a couple of driving philosophies

  1. User Experience. Create applications for people not just engineers
  2. Digital Data Deluge – must handle large amounts of data
  3. Security – It must be a priority
  4. Integration and Extensibility. Make it all work together within the Adobe Marketing Cloud.  Allow for the use of the tools in new ways with open api’s
  5. Functional Features – in other words, deliver key functions like visual campaign, mobile support, an integrated customer profile, etc.

What’s Next

.Next is the next generation of Adobe Campaign.  Goal number one is to make it a first class member of the Marketing Cloud.  At the same time, they want to continue as a first class campaign product

Demo time: Note that this was the alpha version.  It’s due out in Q3

  • New version reflects the Marketing Cloud look and feel. Black and white, simple interface
  • It’s web based, not client like previous versions
  • They changed up some labels, probably to match the labels of the cloud
  • Overview screen shows a dashboard of options
  • Customer profiles are part of the integrated customer profile
    • It’s an updated UI
    • Contains images, maps to location, all interactions with customer, by inbound and outbound
    • Includes a timeline
  • Audiences
    • Otherwise known as targets or segmentation
    • Shows a number of out of the box segments
    • Creating new audiences or segments has a simple UI to combine existing audiences, adding new filters, etc.
    • Audience now synchronizes with the rest of the marketing cloud.  So all your segmentation is usable by all the tools
  • Data Feeds
    • This other data section includes a nice interface to see your CRM feed, syncing with purchased records, etc.
    • It’s where the ETL tools are
    • The enrichment of data make them part of the master marketing profile (MMP)
  • Campaign execution
    • New look, based on cards
    • Completely updated UI. Very modern, no old Windows look
    • The same metadata is there of course
    • Editing tools for emails are embedded into the Activity, not separate
    • The program, campaign, activity hierarchy remains but with the clean card interface
    • One campaign may have multiple activities across different channels
    • The workflow UI is completely udpated although the icons retain some similarity with previous versions.  Queries, Splits, Email rules, etc remain the same.
      • As the workflow runs, it can accept data from other parts of the marketing cloud. That enters in the workflow stream for the “real-time” part of the marketing promise.
    • Made a reference to kicking Exact Target in the behind
    • Channels include (notice the new channel direct to other Adobe products)
      • email delivery
      • landig page
      • sms
      • social networks
      • adobe social
      • adobe target
      • adobe media optimizer
      • direct mail
      • Mobile notification
  • Calendar view
    • Shows all programs, campaigns, activities.
    • This functionality existed before but the UI is completely redone and now allows search
  • Reports are updated. The extend of reports looks the same but they show a dashboard now.
    • Dashboard is new, it shows key data on your running campaign
  • Mobile
    • Showed the tablet version live
    • Pretty much the same interface
    • Designed as “touch first”  so it works in the tablet in the same fashion as it would work on the laptop
    • Supports different orientation as well

Beta Program

They officially announced the beta program in the session.

www.adobe.com/go/acbeta

You can apply today. The program will start in May.

Other info

They now have the campaign management assessment tool. It’s at adobecampaignpro.com

 

Change Management – Are you targeting the right audience?

Change Management is more than sending out a few messages before go-live.  However, communicating constant and varied communication is a significant component of any adoption effort, and adoption is a critical component of any implementation.

So often, we fail on our projects because we send the wrong messages to the wrong people at the wrong times.  In their recent blog in the Gallop Business Journal, David Leonard and Claude Coltea address this specific issue.

Change Management – Are you targeting the right audience?The authors remind us that by over-focusing on front-line employees, who are inundated with many messages from many sources each day, our messages, along with many others, get lost in the shuffle.  While it is important to communicate with front-line employees at specific and critical points in a project, we’re better off directing a majority of our communications to the managers, whose primary job is the activity of their front-line employees.  These managers can provide an appropriate filter as they already have the front-line employees’ ears, are able to focus their employees on specific actions and are ultimately accountable for delivering on those actions.

Organizations today are challenged to do more with less.  While an overused phrase, the fact remains that more things are being hurled at employees each and every day, with change being but one of the many items that are being shot-gunned to end users.  However, change initiatives may be the most important (and hardest) of the items for employees to grasp, and so our communications must be powerful, comprehendible, and most importantly, simply received.  The importance of sending the right message to the right audience at the right time cannot be emphasized enough.

Do you find yourself in situations where your messages just are not getting through?  Are there times where, despite your best efforts, you find that awareness and action by your target audience is just lacking?  If so, this message may be an important one for you to consider.

 

HTML Prototyping – JEKYLL!

One of the daily & major tasks of a front end developer is to write HTML prototyping. And when it comes to writing reusable, editable and modularized html for a large enterprise application, we are often lost as to where the different fragments of code are and a small change made to a div classname in the footer of the html, needs to be done across all the html pages its included in.

One solution to solve this agony is to rely on PHP and use of its ‘includes’ for static html prototyping. But is that what we want to do ? All the filename extensions are then .php while it does not contain a single line of php code and we need to depend on either a LAMP, MAMP or an XAMPP server running locally and also on the server where the site needs to be hosted. Thing of the past. Enter JEKYLL – a simple,blog-aware, static site generator that takes a template directory and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. This post details about how easy it is to setup Jekyll on your local environment and convert an existing php based prototype or start writing a new html prototype based off the Jekyll tool.

INSTALLATION
Setting up Jekyll is easy and straightforward if you have Ruby and RubyGems installed on a Linux, Unix or Mac OS X machine. For details on installing Jekyll on a windows machine, please follow this link for instructions – Jekyll windows setup.

Open up a terminal window and enter sudo gem install jekyll.

Now navigate to the folder where you want your new prototype to be created and enter jekyll new test-site

Go the test-site folder and type jekyll serve. The Jekyll server stars running, open up a browser and go to http://localhost:4000/. You will see a page that says ‘Your New Jekyll Site’. Congrats! You have setup your first Jekyll site.

PROTOTYPING WITH JEKYLL
We will now take the example of creating a static html page containing a header, footer and some content in the body.

Open up the test-site folder. Create an _includes folder inside your test-site folder. You may delete the _posts folder as we are not using Jekyll to create a blog site. Now, create four html files, header.html, footer.html, styles.html and scripts.html inside the _includes folder. Enter the html code relevant for these four components of our site- header, footer, styles (all the css includes go here) and scripts (all js includes go here). We now have all our includes ready!

Inside _layouts folder, create another html file called home.html and its contents would be a standard html document as below (click on the image to enlarge):
jekyll layout
We have our layout html ready which now can be included in any html file.

Inside index.html of the test-site folder, include the home.html layout at the top of the file as below:
---
layout:home
---

And then write any html that has to go inside the body of index.html here.

Restart the Jekyll server and you should be able to see the new index.html for test-site at http://localhost:4000/. Sweet!

Any changes can be now done to the _includes and _layout folders without making any change to the actual html file they are included in. To avoid starting the Jekyll server after making each edit to an html file, start the Jekyll server using jekyll serve --watch. We need not restart the server every time an edit is made. The server automatically detects the changes and refreshes the browser page with the new changes. All the compiled code goes into _site folder, whose contents will go for deployment into the production server.

We now learnt how to create a static html prototype using Jekyll and how easy it is to make changes, with the different html components modularized and residing in their own space. More details on Jekyll and its features can be found on its site -http://jekyllrb.com/

Put in a comment below if you find any issues setting up Jekyll or if you used any other html prototyping tool and how different that is from Jekyll.
 

Adobe Summit | Laying Out Your Digital Experience Game Plan

As a B2B marketer with a previous organization, I was tasked with consolidation of websites for my division. My CMO set the goal of having a unified brand experience for the entire company and my division was the first to adopt the “one-company” brand.  To provide a bit of context, my organization was a large company that had grown through acquisition. We had 20 websites to consolidate for my division — some of which had not been touched for several years. It’s also hard to admit this, but we had no meaningful plan to effectively engage with our online customers. This is something that’s a big “no-no” in marketing today!  I needed help building a game plan – something that would provide the strategy and technology processes I needed to drive success – but I didn’t know where to find that. Fortunately there are some options for marketers today.

Adobe Summit | Laying Out Your Digital Experience Game PlanAt Adobe Summit this year, the Perficient booth will be focused on building compelling marketing “Game Plans” for both prospects and clients. The goal is to find those key components and critical next steps that clients must take to enhance their digital marketing initiatives – whether they are focused on customer experience or on the technology that glues the experience together.  As a marketer, I find our solution expertise unique. Our in-house digital agency and web content management practice work in concert to help marketing and IT stakeholders work effectively together. We accomplish this by providing these stakeholders with key insights and analysis which supports the creation of digital marketing solutions that enhance customer engagement and drive revenue across all channels and touch points…something I could have used several years ago!

Robert Sumner our WCM practice director said it best, “If marketers want to truly understand who their customers are, what those customers want from the company and how to provide value, aligning their digital marketing strategies with their customer experience management strategies becomes crucial to achieving solid ROI results. We’re pleased to have the opportunity to participate in the Adobe Summit as the desire to address this evolution is native to Adobe’s approach with its Marketing Cloud solutions, and specifically with their Adobe Experience Manager solution.” Read more here.

If you are at Adobe Summit, I invite you to join us at  booth 208 to help layout your digital experience game plan. We’ll have our experts on hand to demonstrate how we’ve helped our clients to create a more compelling, personalized digital experience across touch points including legacy websites, mobile sites, social networks, customer transactions, and in-person or contact center interactions. Visitors to the booth can learn how best to integrate the right digital marketing tools with traditional web content strategies, including Adobe Experience Manager.

See you in Utah!

Language based CSS solution

HELLO in eight different languages

Creating universal solutions is the goal, but in the global internet we all have different needs. Some languages need more space than others for all the characters to convey the message. A good example of this is the English phrase “Gifts and Apparel” in German “Geschenk- ind Bekleidungsartikel”, 32 characters compared to 17 for english, almost twice as many. As you can imagine there is a need for more space. Read the rest of this post »

Posted in UI implementation