Rich Interface Design
As a UI art director for a digital transformation software editor, I was in charge of interface design for a range of products with different background stories - which meant disparate and often dated designs. My mission was to carry out a full redesign, ensuring satisfying user experience and consistent brand identity across products.
In collaboration with two UX designers, my part of the job covered every aspect of UI design : hi-fi prototyping including micro-interactions and animations, icon design, and in the long term building a design system.
The job often consisted in handling screens that are often viewed as necessarily dull and ugly. Users have to cope with them every day or week, though, so why not give them our best effort in terms of design?
I also had to defend choices that differed from those observed among famous competitors and often left unchallenged - for instance, in our messaging app, I made a point of constraining paragraphs to a maximum width, or allowing multiline in the discussions list to avoid truncated titles.
One of our products was a desktop client dedicated to electronic document management (EDM). Our UX designers decided to make it reminiscent, ergonomics-wise, of the Microsoft Office suite that our target users were familiar with. With those characteristics in mind - which set the product apart from our web-based apps - I ensured visual consistency through icon design, colors and typography.
I designed numerous screens, providing HTML/CSS/JS protoptypes - which appeared to me as the best way to ensure developement teams get an accurate view of the expected final design, including animations, interactions and responsiveness.
I also put some effort in such apparently trivial matters as error screens. It’s a way of making users confident that they won’t be left unassisted even in case something goes wrong.
With this kind of product, more than ever, UI design must encompass both an artistic approach and a scientific point of view. Beyond personal bias and aesthetic considerations, how do I make sure this button is identified as clickable? When is it okay to use an icon rather than text? Which cursors can I move in order to create a clear visual hierarchy?
These kinds of questions must be addressed with a rational approach, relying on credible sources and user feedback.