December 15, 2017Comments are off for this post.

Creating Motion for Mobile

Prior to designing and producing mobile apps, I was a motion designer. So I am a big fan of using animation in my work.

A few years back I designed and produced a private Stoli Event iPad app that involved some 3d animation. Like the casino game craps, the user shakes the iPad to toss the dice. I used a 3d animator and it was a challenge to make a file sequence into a manageable file size to work on mobile.

Recently two products have emerged that make creating animations into native apps much easier and more manageable.

The engineers over at Airbnb developed a new open source tool, Lottie, that renders After Effects animations in real-time and allows native apps to use animations as easily as they use static assets.

Haiku is another tool to craft imaginative UI components that snap into any app.

I have not dug too deep into either tool but wanted to share since I am really excited about the possibilities of both tools.

November 8, 2017Comments are off for this post.

Perficient Digital uses Adobe XD to test early concepts with real LIDs customers

Early in the year I had the privilege of working on a project with Lids Sports Group. We used Adobe XD to wireframe and prototype early stage concepts to share with customers to validate features and interactions.

The prototyping process took four weeks and included a kickoff workshop, initial sketches, delivery of a mobile prototype, and securing both client feedback and input from actual customers in Lids stores. The last stage was determining how the mobile experience would work on a desktop.

Being a long time Adobe user it was great to use Adobe XD and really start to understand how this product can help me with UX Design and my workflow using Adobe Creative Cloud.

Adobe XD CC was light and easy to use, and the artboards helped us see how the interaction would work from screen to screen.

Perficient Digital is a SODA member so through a few conversations we started talking to the Adobe XD product team and they wanted to do a little write up about the LIDs project. Here is the post on the Adobe Blog.

Adobe provided a tool for us to show the client the vision for a low investment.

August 4, 2017Comments are off for this post.

Big Data in Praha

In early June I went to the Czech Republic and caught a great art show in Prague.

Prague is a great place to visit, it is affordable, easy to get around (most concentrated rail system in Europe), and deep with history. I did do a few touristy things but enjoyed staying in Prague 2 which was a bit less touristy than Prague 1/the old city.

I read about the Holevoice area (Prague 7) from a resourceful polish blogger “Kami” . It was like a Williamsburg NYC or South Congress in Austin, because it is across the river from the city. It was a bit more family friendly and funky.

If you take metro line C (red) to Vltavska. There is good wall art and graffiti around the station.

I saw a great show at DOX Centre For Contemporary Art. "Big Bang Data" was about how the information explosion is transforming our world. Data/information is disrupting the world first and then we are some how changing to accommodate the forced change.

Beyond the amount of data there is the ongoing theme of how much personalized information we give up in order to have the data at our finger tips.

Afterwards I needed some time to process so we went to a great vegan buffet.

If you are in Prague you should check out the DOX and Holevoice area. There is a great coffee shop / bar around the corner with pop up stores for local artists called VNITROBLOCK.

Last if you grew up on MTV then you remember the INXS video “Never Tear Us Apart” which was shot in Prague in the late 80s (88).

June 15, 2017Comments are off for this post.

WWDC recap/highlights

I was traveling when the conference was happening but I am happy to share a few highlights I thought were worthy.

  1. Siri-powerd Home-Pod: Watch out Amazon & Google

  2. AR (augmented reality) for iPhones (yeah!)

  3. Apple watch will have Siri, this is great! — Very excited about updates to Apple Watch.

Last Podcasting -
Audio is going to be big and only grow. Apple announced that it was finally going to provide comprehensive analytics about listener behavior to podcast publishers with the iOS 11 update coming this fall. Good bye traditional broadcasters, you need to rethink your business model to survive! Happy for the scrappy content creators to arise to the top!

What are your favorite podcasts? Mine are "WTF”, "This Week In StartUps”, I would love to hear about what you listen to.

October 29, 2016Comments are off for this post.

The harvest moon is here

Rarely do the moons align where I read an article that is directly aligned to what I am currently working on, or directly impacts a problem I am trying to solve. The last couple of weeks I have read and stumbled across a few articles that effected my work output. Of course I wanted to share what I learned.

I was working on a mobile peer-to-peer (P2P) payment app when I read this. The app was targeted to a less technology advanced type of user so it was important to be clear and concise on many levels. So this article highlights "16 things you should avoid in your writing”. Within the app I was designing there were a few screens that needed good copy to guide the user through an intensive signup process due to the nature of the app involving payments, credit, and banking.

Effective Writing For Your UI: Things to Avoid

It is the end of the year so people are making their predictions for 2017. SCROLLING will go mainstream in 2017! Hell Yeah! Let’s end those lengthy conference calls about “where the page fold is”. Also Storytelling, an important aspect of UX, will be moved by ANIMATIONS in 2017. My career will come full circle from my early days as a film maker/animator to a UX Architect. Here are a few great reads about Fintech, User Interfaces and User Experience trends to look out for.

Five Fintech trends for mobile in 2017

10 top UI trends for 2017

7 UX Design Trends to Watch out for in 2017

Being a music junkie I had to share this great mix from DJ Cheeba & DJ Moneyshot. Solid Steel had the idea of collaborating on a version of the Beastie Boys‘ ‘Paul’s Boutique’ album made entirely from the original sample sources.

December 31, 2015Comments are off for this post.

Trending in 2016

Similar to a DJ looking for new beats by digging through crates of records, I scoured the web to find some new trends for 2016. I wanted to share my top 5.

1. Empathy - "The Future 100 Trends and Change to Watch in 2016” by JWT and a few other reports I read highlighted “Empathy”. This word has be always associated with User Experience Design best practices. It is not a surprise but I am happy to see it noted in the media and advertising industry. As technology becomes more embedded in daily lives, we as product designers/app developers need to understand human behavior and emotion.

2. Healthy is the newest currency - Fjord believes the confluence of flat incomes, uncertain job prospects and rising healthcare costs will make health data worth money. Health monitoring for both leisure and preventative care, has decreased these costs significantly. Self-monitoring will only increase with the use of wearables.

3. Customer Experience is King. According to Solstice Mobile a new holistic view of Customer Experience will emerge. Human-centered design is now part of the enterprise. Customer interaction strategies will need to be multidisciplinary to bridge online, retail and home to meet customer’s growing expectations of the seamless experience. Leveraging analytics to optimize and personalize the experience through all channels is also important.

4. Multi-Sensory Storytelling - PSFK’s 2017 Forecast Report lists Multi-Sensory Storytelling which is "Combining traditional storytelling techniques with digital and physical experiences designed to engage a variety of sense.” The Avengers brand (see extends the cinematic experience with additional online episodes and wearable toys that sync and interact with each other. This is an area of big interest to me since it combines many of my previous work roles like motion graphics, film making, advertising and design.

5. Trigger Transformations - Number three on the Forbes’ list “5 Data-Driven Business Trends for 2016” is “Trigger Transformations”. In the new year we should see more data-driven triggers in mobile marketing. Audit those “Mobile Moments” by analyzing customers, catalog their Mobile Moments, identify the context and determine their motivations.This will help prioritize mobile moments based on their benefit to customers and their value to your company.

Artificial Intelligence and cognitive technology should make some good advances this year. Sensors, VR/AR Headsets, Amazon’s Echo and self driving cars will only continue to make in roads to the average consumer. I am optimistic and excited to see how 2016 evolves.

June 14, 2015Comments are off for this post.

Q2 Mobile Tweets & Links

April started with a week in Louisville for a HTML5 responsive animation project. Then I went to Charlotte at the end of April to start a project with a start-up to create an early stage product prototype for user testing. In mid-June I visited my old stomping grounds of Jersey City for another project.

So without much extra time I am going to just share some curated links from my tweets. Enjoy!

The Internet of Anything: How to Build Mobile Apps for Your DIY Connected Gadgets | WIRED

Why Web Design is Dead | UX Magazine

Is software eating the world? Or, is it really customers? | Perficient Spark

Dropdowns Should be the #UI of Last Resort | LukeW

March 10, 2015Comments are off for this post.

Animated User Interfaces

I recently did a presentation to my internal team on "Animated User Interfaces - improving user experience with animation." It went very well and I wanted to share some of the great articles and resources I found. There are some really great examples of forms and checkout processes on a mobile device.

Animated Interface Articles

Invisible Animation

Transitional Interfaces

Animation Principles in UI Design: Understanding Easing

Smart Transitions In User Experience Design

Using Motion For User Experience On Apps And Websites

Redesigning the Login Screen

Payment and Checkout

Improve the payment experience with animations

God is in the details

Making a Difference with Animation

Google - Authentic Motion


CSS Library


Animation Resources

Animation & UX Resources

November 28, 2014Comments are off for this post.

Goodbye Single Surface Apps

The mobile industry is already seeing a dramatic shift in how things are designed and built. Instead of building applications for a single mobile surface, a new generation of tools and infrastructure is being created to allow for applications to run across a wide array of devices, mediums and form factors — all at the same time. The arrival of wearable products like the Samsung watch, in-home cloud-connected appliances and wall-panel interactive displays is a big sign that the customer experience is being distributed across many different surfaces and devices.

Apple's new iOS8 and Google's new Material Design reflect this trend.


The new iOS8 ties everything together with "Convergence". Apple continues to improve extensibility by integrating seamlessly into services and devices. HOMEKIT helps connect your home, a protocol for the "internet of things" (IoT) & HEALTHKIT helps with the integration of wearable technology. iOS8 also includes the new programming language, "Swift", to help make Mac OS and iOS apps flexible and faster to build. Apple also beefed up its enterprise support with greater control over security of mail messages, expanded data protection for all major data types (Calendar, Contacts, Mail, Messages, Notes, Reminders), new productivity features (mail & calendar), and better device management tools.

Last June at the I/O conference Google presented their new Material Design framework. It may be old news to some but there are some great ideas to share from the Google’s approach. Before I was a UX/Interactive Designer I was a motion designer so I am delighted with the new possibilities and the use of animation.

Google worked together with Android, Chrome & across all Google create one consistent framework for mobile, desktop & beyond. Clear simple and intuitive to understand. What if pixels had depth & surface that can transform by touch? This new way of thinking is called Material Design.

Animation is used to delight and reward users with motion. Material surfaces can slide around with physics and respond to touch with subtle ripples.

Google also made it easy with tools and guidelines. They created baseline grids that work across all screens for designers to ensure consistency across screens. The guidelines allow for you to adapt the UI so users already know their way around your app no matter what screen they use.


For developers UI building blocks have been updated to include rich, animated touch feedback, so creating seamless animations from screen to screen is easier. You can also colorize all framework elements to match the theme to your brand.

As you can see the lines are disappearing quickly between devices and screens. The frameworks are in place to make development easier across surfaces & devices. In 20 years time, will we look back at 2014 as the sunset of single surface apps?

October 24, 2013No Comments

Responsive Solutions and the Experience Language

Recently I have been working on a redesign for a large media web site that needs to be responsive using a 3rd party Content Management System. Through some good research I found some great work processes I want share and build upon.

If you are a designer who has experience in systems then this should be a piece of cake but if you only have designed PSDs for a web site then you may have some old habits you need to break.

PSD-to-HTML is dead.
While this workflow served a purpose in the past it will not stand up with the complexities of responsive web design. This also changes agency/designer billing from a per page pricing to billable items accompanied with demo-able code.

The Responsive Process
Global Moxie recently redesigned Entertainment Weekly's responsive mobile website and their process was the most streamline I have seen. They avoided formal wire frames and emphasized blocks of content at very high levels of abstraction. The "big-picture" sketches evolved into defined repeating patterns across screens. The patterns were then converted to HTML prototypes.

Create Building Blocks (patterns not pages)
A true "Global Experience Language" includes building blocks that creates a system to render a "screen" on any device. Brad Frost has a great tool, "Pattern Lab" that allows you to collect & define core components.

Also check out his process. The idea here is to create global atoms, molecules, organisms & templates. This is the header/footer, headings/sub headings typography, lists, block quotes and all those things on a screen including social sharing etc.

The BBC did a great job defining & documenting their Global Experience Language. I reference this on numerous projects because it is a very comprehensive guide to designing across devices.

Constructed UI Widgets
(IA sketches & visual design happen parallel)
Color, typography, texture, look & feel, are used to create "Element Collages" to help define the design direction without doing full PSD designs. You then apply these visual aspects of the design into the prototype. The key here is to see how things actually play out on different devices (widths). Dan Mall details the process on his blog.

The advantage
is to get out of the deliverables business
Practice Lean UX - Act like a start-up "Build, Measure, & Learn". The process is as follows: Concept/Prototype/Validate Internally/Test Externally/Learn from User Behavior/Iterate.

Involve stakeholders sooner by getting into the browser quickly
Demonstrate designs across different screen resolutions. Let the client get a good sense of the feel of the design. Fix usability & how type renders on different devices quicker.

How do you make the next project into living code samples that are self-documenting style guides to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web?

Below is a list of a great starter list of responsive deliverables from Dave Rupert. Also check out this great PDF from the BBC it follows a similar methodology,

* Flexible grid
* Typography
* Navigation
* Accessible form controls
* Carousels
* Tabbed navigation
* Responsive tables
* Accordions
* Media lists
* Dropdowns
* Pagination
* Data tables
* Buttons
* Icon fonts

* Responsive images
* Responsive typography
* Accessibility architecture
* Legacy browser support
* i18n/l10n tolerance
* Performance budget
* Interaction/Animations
* Responsive advertising

* Homepage layout
* Subpage layout
* Article index layout
* Article layout
* Product index layout
* Product detail layout
* Sign up flow
* Checkout flow