Redesigning
Use Your Interface
Back in November 2012 I began to notice motion being used on the
web to improve buttons, forms, loaders and other components of a
user interface.
I realised that by making use of movement, transitions and
micro-interactions, the overall experience could feel far more human
and engaging. (You can delve further into the whys and hows in this post
by Pasquale D’Silva.)
Pen and pad in hand, I scribbled down a few concepts of my own.
It wasn’t until I approached a coworker to share some ideas that I realised that sketching was hardly fit to communicate such intricate animations.
A seemingly simple task resulted in a lengthy conversation riddled with abstract noises and hand gestures — I thought there must be an easier way.
At this stage, I had two options:
- Prototype animation myself using a tool like After Effects
(however, this felt like too much work considering that I was mainly interested in putting together a quick motion mood-board.) - Search for similar animated examples.
I went with the latter, which turned out to be an incredibly time
consuming experience. By the millionth open browser tab I realised there was no ‘one’ place for the inspiration I needed. I asked myself, why can’t there just be a Designspiration for interaction design!?
That’s when I downloaded a GIF recording tool that I could use to capture each example of animated UI that I stumbled upon on my own.
The recordings looked a little like this:
I documented these animated snippets on a Tumblr blog that I named
Use your interface or ‘UYI’. Most UI inspiration was static and it
felt important to show how people actually interact with an interface,
also — in turn, how the interface reacts to user input.
After 6 months of collecting the best UI animations I could find and
posting them to Use Your Interface, I noticed some people talking about it
on twitter. Up until this point I hadn’t really considered that this collection could be helpful to others. I decided to focus on turning it into a resource for other designers and developers. Use Your Interface was now going to be ‘a growing library of transitional interface patterns to help people inspire and communicate their UI ideas with others.’
One morning, I noticed I had 60 new followers on Twitter overnight.
I could only guess that this was be in response to UYI, so I jumped on analytics and couldn’t believe what I saw:
Over 6k unique visitors had been through in a single day. Wow.
What happened?!
In short, Apple had just released iOS7, which sported a new interaction model making use of depth of field, physics and further emphasis on natural gestures.
This was making waves in the design community and UYI appeared to have piggybacked on the overnight hype, as it was one of the top sites that google ranked when seeking interaction design inspiration.
Twitter was going crazy, with mentions by Brad Frost, the Zurb Foundation, Adobe and more.
All of a sudden, my little hobby blog was recognised as a go-to resource for interaction design. Even Smashing Magazine and A List Apart were talking about it. Soon after, it was featured by Tumblr, appearing on every users dashboard in the world, resulting in over 10,000 new followers.
I felt a strong sense of validation that UYI could be a helpful UI library for the digital design community. Yet, also highly aware that the experience needed some serious TLC. The ability to search, discover and browse content on my $15 theme was hardly up to scratch.
It was time to let the redesi.. ermm.. actual design begin! I approached a couple of extremely talented friends of mine, Harry Bissett
and Theo Lampert to kickstart the process.
This is how we decided to handle things:
Harry Bissett - @harrybissett Design & front-end development
I recently worked with Harry on a project called Amplify, where I experienced his highly considered character and impeccable attention
to detail. I would consider him to be the perfect example of a next generation digital designer, with a skill-set ranging from ideation right through to development and implementation.
Theo Lampert - @Theolll
Full stack development
Theo’s talent is beyond me, apart from his international design experience and running his own design company, he is also an ace back-end developer. Theo is tackling the back-end of the site to help us nail the most important flagship features: Searching, browsing and discovering content!
Josh Davey - @jshdvy
Project management & user experience design
And lastly, myself: I had my first taste of product design by working on the international launch and re-brand of Australia’s largest creative network, The Loop. I haven’t looked back since, and am now a User Experience Designer at Neoteny — tackling large strategic and transformative projects.
I will be responsible for the product strategy, project management and overall user experience.
First and foremost, we decided to refine and focus the purpose
of UYI — placing further emphasis on the idea of a place
to discover and share moving interfaces.
We decided on a few core experience principles:
1. An approachable resource that leads you by the hand
2. It’s smart and delightfully engaging
3. Big, bold, polite, friendly and personable
4. It gets out of your way to let you find your stuff
We are deep into production and will announce the launch date soon. Otherwise, here’s a snippet of early development on the new home page!
Until next time!
JD, Useyourinterface.
