Creating better UX experiences through rapid prototyping
At EmpathyBroker we focus on creating joyful customer experiences, helping our clients to select, mix and adapt our search engine functionality and features which are then completely integrated into any design or technology they may use.
Traditional app or web prototyping processes involve 4–5 iterative stages, each requiring a lot of interaction, and inevitable delays, in trying to achieve a consensus before moving onto the next step.
Using this approach clients are able to check the look and feel of their future site through a set of static mockups. However, this often falls short as it doesn’t allow them to really “view” how the experience is going to be perceived when it’s live. As clients are left having to imagine the final result this can lead to high expectations in the navigation flow that, once deployed, are not fulfilled. The result can also mean that the project needs to go “back to the drawing board.”
Search is great but, can it also be a cool experience?
One of the first questions we often hear from potential clients is if we really are capable of delivering “cool” AND useful interfaces? Can we genuinely make it different? The answer, unsurprisingly, is a big YES! And, the way we demonstrate this is by not just telling our customers so but by showing them what we are capable of producing for their brand.
As our clients provide us with their brand information (colour, typefaces, etc.) we can skip the low fidelity wireframing phase and step directly into the mockup design stage with high fidelity quality.
The solution HAS to be mobile first with no degrading issues in either performance or functionality compared with their desktop counterparts.
Thanks to our approach, based on tested and custom developed components we can simultaneously design and develop in both realms, mobile and desktop, without any compromises.
This way we can quickly and easily make revisions based on client feedback as we have a complete set of modular and adaptable graphical components, made in Sketch, that are easily combinable and customizable to create any required design or layout.
It’s alive!
Although the phrase a picture is worth a thousand words may seem a big cliché, the truth is that nothing is comparable to showing movies and an interactive high fidelity prototype of what the whole future app is going to look like and how it will behave.
As all of our features are built in a modular way, every component of our APIs and services has its design counterpart, and that’s not just in static mode (WF/mockups) but also with a full set of customizable animations.
We’ve created a process that’s therefore able to skip multiple steps from a traditional approach to rapid prototyping. This allows us to easily adapt and remix elements to fulfill our client’s goals and dreams.
We’re therefore able to solve, in fact anticipate, changes and modifications, all using the power of motion. We use Principle & After Effects to show, in a clear and comprehensive way, how the final product is going to behave and “fill the perception gaps” where clients need to imagine what the real site or app looks like.
Success is about feelings
We think in terms of experiences, not features. We believe that what’s important is not the what or the how, the features or the tools, but the way they’re perceived, the form rather than the function, the feelings they generate in the users of the site.
We ask ourselves questions like:
Is it a fashion site?
How can we make it more visual? How will users find products with vague descriptions? Which is the easiest way to suggest appropriate products and their complements?How technical should we get?
Should we give search a boost with filters and advanced search tools to be able to drill down contents as fast as possible? How can the results be shown in an attractive way?
and so on…
As each online shop is unique with its own characteristics and customers the interfaces HAVE to be adaptable to offer the best look and feel and, as we don’t believe in a “one shoe size to fit all” solution, our flexible system is different in this way to a more static approach.
Cool, but how do you really do that?
First of all, our Empathy X product is designed in a completely modular fashion (our X teammates use the gluons/quarks… analogy to refer to the hierarchy and modularity of their components) so we can “plug and play” in a very conceptual model focused on WHAT we want to offer by the experience instead of HOW we are going to do it.
This means that from a look and feel perspective our UX team has a “clean canvas” and a thorough knowledge of what’s feasible and viable following current standards (HTML/CSS…) and, most importantly, how to give a continuous and transparent experience to the users.
Our UX department receives an internal brief with a list of features and personas (users) of the search similar to this:
As experts in search we differentiate between the search box (the input) and how it reacts and interacts with the queries/users and the final results and tools to process that information.
From this brief, we can generate a complete set of compositions with real world examples showing the look and feel of the future site, something like this:
From the static mockups, we create a set of animations at different levels to eliminate any misconception or erroneous ideas that may be inferred from the static comps. The idea is to show a “what you see is what you get” in motion that leaves no room for misunderstandings. The animations also show clearly and accurately what the transitions look like:
The combination of static and animated mock-ups achieve a very high approval ratio and, when modifications are needed from the client’s feedback, we’re able to respond quickly to provide changes in both versions, due to the modular and reusable nature of the design.
The power of feedback
Our product is “alive” in a sense it grows with our clients, search users’ feedback and the data that we retrieve from user habits and new, never seen before, means of interaction required from clients to interact with a product catalogue, that’s a story for another day.
The full modularity of our solutions and how the UX solution is done in parallel with the front/back development means we don’t need complex development and we’re able to shorten the development cycle which also means we can add more and more possibilities to the product.
The take away
With a very precise and minimal prototype tool set (sketch + principle + common sense) we can rapidly develop custom solutions for any client. Being able to provide real world use cases of the site in motion and with high fidelity samples of the micro interactions is not only powerful but vital to present a real picture.
It also means we can quickly respond to any changes and provide our clients with the confidence and peace of mind that the results they see will be aligned with not only their business goals and their brand but also their ideas and expectations. It really is a win-win!
