A year at Smartling
A powerful localization software for websites and mobile apps, that was Smartling before I came in, and still is but it was in dire need of a extreme makeover. It had what I now call the Engineer Overflow Syndrome, which is what usually happens when products are focused on adding feature after feature but without a clear sense of usability, hierarchy and flow, the result of having too many developers and no voice for the product design. Sure the service was in need of a UI clean up but it was the workflow what required the deepest change, the Smartling solution was too big for their design, I took the task of not only rearranging and basically starting from scratch, but also building something that wasn’t going to be overgrown by the avalanche of new features that the team surely was going to came up along the road. In short, a future-proof design.
So while I was defining the visual design with the CEO Jack Welde at the same time I was getting familiar with the Feature Set and wireframing a new and more logical arrangement for the features with the Product Managers. Defining the basic layout and the look and feel took a lot of time, and a lot of itineration which I’m thankful that Jack had a product mind and knew how the process went and was well aware of the time that takes, so we kept polishing and polishing, evolving the design until we got a design that was pleasing and efficient at the same time.
Because of the amount of time one spends with each design, I’ve always had a thing for naming designs and this particular one, considered the final one at some point, was named the Toffee of the Candy family. Toffe being this specific design variation and Candy the overall look and feel of the design. One that I really tried to sell but never got traction within the team was the Salad designs, one in particular was the Ceasar Salad design, this approach was super clean and it would be super trendy nowadays since it was a flat design.
But at that point, in the Candy Designs we had a winner, and kudos to Jack who agreed not to keep anything from the old app 1.0 and instead do a U-Turn and focus all the resources on the new design. But then we decided to change it once more, not only remove unnecessary chrome specially on the sidebar, which commanded to much attention; there the fault was mine, since that little sidebar was the first thing I did for Smartling and helped me get the design position, I added too much sparks there. So with a refresh in mind of the redesign, I also took the opportunity to insert into the mix the final wireframes of the whole dashboard, in other words, we now were working on a definite layout which had in consideration not only the screen I was designing but the whole solution giving me way better context in the design decisions. And after some more designs and remixes we had a new winner, which after more than two months of design started it’s implementation and now nearly two years later still is the design of the Smartling Dashboard.
You won’t believe the amount of user clicks that were cut from a lot of the interactions, features that felt complicated, became the easier ones to interact with. Not everything in the design was implemented right away but in time we got there, I was super impressed with the speed and quality of development that happens at Smartling, record time I would say. All that power and speed of development had one downside for me, being the only deisgner of the team, most of the time I even haven’t started designing and I was already behind the project. Time never was my friend but that’s when joining the right team makes you happy, good design takes time to marinate and a good PM knows that, and I can point that both Eric and Andrew had it.
The List View, the part of the Dashboard shown above was the key part of it, it is where the most of the activity happens it is also where most of the most features live, and yet the design stayed clean. I create a couple of key design guidelines to keep it that way. First, horizontal space is critical, anything that can be done to maintain it as long as it doesn’t compromise the integrity of the design should be done. Second, the core actions which were present on every string and that used to be always present were hidden, hovering the strings will make them visible for the user to take action. Third, all actions that aren’t part of the core belong to the Actions Dropdown, which when was coupled with my inventive new Checkmark Dropdown make this solution not only a clean one but a powerful one as well. Fourth, visual sorting and filtering goes to the upper right corner of the List View.
Of course those key concepts of the Dashboard design were accompanied with nice thoughtful design bits that only come from working full time on a project (one of the big advantages of working full-time on a single product). Like how the Publish button was also a status indication of the string when it wasn’t ready to publish, how this Status Button get a red stroke when there’s an Open Issue that stops the String from moving forward in the translation process, or a blue stroke if that string has been Pre-Publish, or how hovering that Status Button actually makes it a Pre-Publish button. All simple touches that are obvious to the user in practice but not so simple to came up with, or to sell them to the Dev team.
Basically my job was to gave to the design the same love and effort that the development team have give to Smartling but it wasn’t translating into the final product, because of the lack of love towards the design, something as simple as a loading icon can say a lot to the user about how well done and polish a product is.
As time passed by I started spreading some love to other pixels, and once we met the original design we started pushing new features, big and small, we even had on the shelf some big sideprojects.
And so it went, feature after feature but all had a place to fall, my initial design proved that it had the ability to expand and still stay simple. New pattern matching, new search function, assign words per translator, selective pre-publish, comments, translate apps, websites, documents, anything that any translator individual or company, anything that any client willing to get localized could want Smartling has it, but by far the crown jewel of the service is the contextual translation, which recieved a bigger change than what the Dashboard had, but I’m going to have in the future an individual post just about designing the Smartling Translation Interface.