August 4, 2017 — Comments 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, 2017 — Comments 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, 2016 — Comments 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, 2015 — Comments 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 playmation.com) 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, 2015 — Comments 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, 2015 — Comments 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

Mass/Weight

CSS Library

Animate.css

Animation Resources

Animation & UX Resources

November 28, 2014 — Comments 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.

ios8screen

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.

1010_materialdesign_v4.006

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,

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

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

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

September 5, 2013No Comments

Flat is Back – Less is More, Reduction of Thinking…

With Sept 10th just around the corner Apple is releasing it's much anticipated iOS7. There has been a ton of chatter about this new release and the 360% flip from a skeuomorphic interface to the flat interface style. The skeuomorphic patterns in the early days served a purpose to create analogies to the physical world on a single device but users behaviors have become multi-screen so a simpler, cleaner, content-focused interface makes sense.

Some may call it reduction of thinking, less is more, seamless, transparent, etc. but the there is a key historical take away from this manifestation. The Bauhaus (my favorite) movement comes to mind with it's reduction of thinking (less is more) & group collaboration (the sum is greater than the individual parts).

Ironically Smashing Magazine posted a wonderful article about "Authentic Design" highlighting the Modern design movement as the pivotal movement to curb the ornamental excess of the 19th century. Are we are at the cross roads of rejecting skeuomorphism for simpler, cleaner, content-focused design?

Authentic design aims to pierce through falsehood and do away with superfluousness. Authentic design is about using materials without masking them in fake textures, showcasing their strengths instead of trying to hide their weaknesses. Authentic design is about doing away with features that are included only to make a product appear familiar or desirable but that otherwise serve no purpose. Authentic design is about representing function in its most optimal form, about having a conviction in elegance through efficiency. Authentic design is about dropping the crutches of external ornament and finding beauty in pure content.

Building designs around fake content only changes the focus to styling and decoration. Use real content in design to transform function into form. The key is to make the product easier to understand, perform better and make the most of its medium.

Did we forget this design fundamental or to be authentic? Maybe both.

September 2, 2013No Comments

Stoli Original Spark Video

I uploaded a new video case study for the Stoli Original Spark iPad app. I also added to my Vimeo channel a historical motion graphics & web site reel. I am currently working on a video case study for this year's CBS Sports Fantasy Football app. Once that is done I plan to create a new demo reel.

It is tedious and some what painful to write, design & produce video case studies but they are far more engaging then looking at screenshots.

Stoli Original Spark Event App from John Yuiska on Vimeo.

Older Posts