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.

August 28, 2013No Comments

Connected UX – insight on how to use data across your organization using smart tools

If you are like me and are always looks to optimize processes then you need to read this insightful article from A LIST APART

"Connected UX" is a great article on the challenges of managing customer feedback. It discusses the pitfalls of the "data avalanche" but also delivers a remedy to "bring all teams together" & make "everyone a researcher" by implementing simple tools like Evernote to encourage access to learning scenarios, in which people in all departments browsed through the research and stumbled upon insights they never knew existed. Last giving everyone access to the data via email (MailChimp) eliminates all barriers to participation to gets lots of people involved.

August 19, 2013No Comments

UX Process

Frustrated from inefficiencies of working for large organizations, I developed a process. It is nothing new but a hybrid of thought leaders, books and a few past work associates. My UX process is more of a practice. I have great guidelines & practices but every client and business is different.

When sharing with C Level Executives I try to keep it high level and focus on 4 key components:
Discovery/Design/Develop/Future Release

For internal teams I use the full playbook to help build the project plan from 1 through 8.

I am a goal-orientated designer so a “Build-Measure-Learn” Lean UX Strategy is near and dear to my heart. The goal is to minimize project risk, get teams building quickly and learning quickly by using rapid prototypes to test market assumptions and user feedback. This methodology also reduces documentation and design deliverables to a minimum.

01 Discovery
Analytics Review
Competitor Analysis
User Research/Usability Reports
Stakeholder Interviews

02 Ideation

Personas Development
Task Models
User Journeys
Content Requirements

03 Strategy
Information Architecture & Site Map
Content Weighting
Wireframes
Funnel Diagrams
Final Project Requirements & Functional Specifications

04 Visual Design
Framework & Design Language
Detailed Design & Patterns
A/B prototyping
Storyboards

05 Production/Development
Final Timeline
Build
Review Launch Plan

06 Testing
Alpha testing (core team)
Revisions
Beta Test (internal client)
Beta Findings & Revisions
Final Approval

07 Delivery
Launch/Delivery
Product Audit
Future Release Plan

08 Review
Product Audit
Usability Testing
Analytics Review
App Store Reviews

Older Posts