Over the last 12 months we’ve radically evolved how we go about designing the user interfaces for the products we develop.
Our clients, be they a big brand or an up and coming startup, all share a belief with us; that the user interface is a product’s foundation, and is key to the wider user experience.
I want to share with you five steps we’ve taken to evolve how we design our user interfaces and position ourselves beyond other product development teams.
1. Invest Heavily In Prototypes
Although this is not an evolution in itself, along with wireframes, rapid prototyping is an important way that we focus our designs with our client and users.
We’ve worked hard to optimise how we produce wireframes and prototypes. The key motivator here is that we need to reduce the amount of labour involved. The less time we spend pushing pixels, the more time we can spend understanding and iterating our interface.
What we’ve experienced is quite interesting. Before anyone even picks up a laptop, we can now get pretty extreme with analogue wireframing. Have you see POP?
Here’s a thought; a designer now no longer needs to actually draw the interface. With a little guidance a client, and even a user, can do it themselves. That may seem like a step too far for some designers, but it’s worth considering because it totally breaks down those communication barriers – a picture says a thousand words.
2. Say Goodbye to Mockups
We’ve turned our backs on the days of the Photoshop mockups. We used to send them on to developers to be chopped up and pieced back together as a living, breathing product.
What was wrong with that? Well, Interfaces aren’t static anymore, they’re fluid and animated. We need to design those aspects too, and creating a fixed canvas, static mock up just doesn’t tell anyone enough about how an interface behaves.
3. Eliminate Waste
The way we did this was by applying a value to each step of our UI design process. Sure, we iterate our UI designs, and inevitably that means we produce many designs that never see the light of day. But those designs are stepping stones on the way to a brilliant UI. They aren’t waste, they have value.
However, some of what we were doing didn’t generate enough value. Those mockups we mentioned in number 2, for instance, were simply ways to bridge the roles (see number 5 for a more radical solution to that). We phased those mockups out by working smarter in other ways. Then we instantly freed up time that we could apply elsewhere, and created yet more value.
So eliminating waste generates exponential returns. It’s a habit that’s become part of our creative culture.
4. Ban Pixel Gymnastics
Beautiful interfaces are not always the best interfaces. The old design adage “form over function” is the downfall of many a pretty interface. Showing off with interface artwork is just designer vanity; it’s pixel gymnastics, and that doesn’t bring much value to a product.
We’ve deliberately stepped away from this by focusing on wireframes over artwork, and constraining the time we have to create those branding elements of the interface. So now we don’t hyper focus on the aesthetics, and certainly never to the detriment of the most important bit; the user experience.
5. Create Boundaryless Roles
This is perhaps the biggest step we’ve taken.
We’ve worked to blur the boundaries of the designer and front end developer. This came from a belief that everyone is capable of coding, and that encouraging designers to implement their own front end designs is the most efficient and effective way for them to bring their ideas to a product.
But this change has a wider positive impact too. It means that one person can apply themselves to a product in whatever way, and at whatever time is best for that product. If at one stage a designer can bring most value to the product by coding, then they can decide to do that.
The concept of boundaryless roles is at the heart of contemporary agile methodologies. People have found it really hard to implement at scale, but perhaps this blurring of the creative and technical roles is where the easy wins are.
One thing we’re experimenting with at the moment is dropping wireframes totally. Why would we do that when part of our UI evolution has been to heavily invest in them?
The power and ease of implementing designs through CSS/HTML along with boundaryless designer roles makes wireframing feel optional. We’re asking ourselves if it might be leaner and more valuable to the product if we applied functionality to an ever iterating interface right from the start of our product design process.