This is how one designer used Justinmind to change the user experience of the Dominican Republic’s first online supermarket
UX designer and project manager Reymi Castellanos is the founder of Grupo Interactivo, a digital marketing agency based in the Dominican Republic.
He leads UX design projects from the ground up and recently played a role in giving the country’s first online supermarket the UX treatment.
In this post, we catch up with Reymi and uncover how he’s using Justinmind to create wireframes, user interfaces and high-fidelity prototypes for all kinds of clients.
Tools of the trade
Every great new design starts with something simple: a prototype.
For Reymi Castellanos, prototyping is what brings his ideas to life and gets stakeholders on board.
“Prototyping is the most important step in the design process. It saves time and lets us focus on producing the most relevant elements for the project.”
But before Reymi could solve design problems with prototypes, he needed a reliable design tool he could turn to when he wanted to try out an idea.
“We tried some other tools before we choosing Justinmind. Some offered great value features like stunning animations and transitions but what was missing were scenarios and on-device simulation.”
That’s when Reymi decided to go with Justinmind. As a busy UX project manager, Reymi understands that without the right set of tools, creating good design work is difficult.
“It’s a professional tool that blends high fidelity design and advanced interaction with data tables, variables and programming scenarios. We rejected other tools because they only worked online and had limited capabilities for our project.”
High-fidelity and offline prototyping? Reymi was sold.
Now with a robust design tool at his disposal, Reymi set about solving the design problem at hand. He and his team were involved in redesigning the website and app for the first online supermarket in the Dominican Republic. No small feat.
“AlSuper.do is the first online supermarket in the Dominican Republic but it was created many, many years ago. To create a stunning and usable interface, we had to do a redesign of the website and the mobile app from zero.”
Big projects like this one often run the risk of failure. Poor communication, lack of testing and zero research are a few ways good projects turn bad. How did Reymi get started?
“A design of an online supermarket UI is a large undertaking. We had to create a new unique shopping experience.”
This involved researching new and existing users, carrying out an expert analysis and propose several solutions for the client.
This meant Reymi needed to:
The best part? All of this is possible right inside Reymi’s design tool, Justinmind.
Why Justinmind was the right tool for the job
“We used Justinmind’s conditions to simulate access via a login. An error will display if a user puts in the incorrect details. We could also change the appearance of elements, like the shopping card icon, depending on whether items had been added or not.”
Conditions were a powerful element in Reymi’s online supermarket design. They provided the realism he was looking for. Before long, he was hooked on using conditions.
“The programming conditions simulate real event interactions. We used them in almost every screen of the project to define when and how the content or navigation elements appear to the user from simulating a shopping card to creating login behavior.”
Login forms are relatively simple to design but present a great UX opportunity. You can use placeholder text, useful microcopy and intuitive interactions so logging in is a dream.
“The behavior of the login was the easiest part to create because the definition of conditions is very intuitive in Justinmind.
We defined several users and passwords to perform usage tests as well as the respective conditions. Then we were able to give access to the following screen in minutes once we had all the UI elements in place.”
Adding interaction for greater delight
Justinmind enabled Reymi to recreate important design patterns for the supermarket UI.
“In Justinmind, we were able to create changing panels in one screen with its respective tab menu. I could create a sliding side menu and use logical conditions to show and hide buttons where needed.”
But what benefit did this have? It meant Reymi could show seamless and lifelike interactions. It’s one thing to show screenshots of your design but another thing to have an app that works like the real deal. It’s this sort of thing that makes stakeholders happy. How did they show their work?
“We presented this project in two ways. Initially as graphics (simple JPGs) showing the main screen style that we were proposing. Once it was approved, all presentations and revisions were made inside Justinmind, by hitting the Share button.”
A prototype in time saves nine
Not only could Reymi share his prototypes with ease but with useful conditions, templates and drag and drop widgets, he managed to gain one thing all designers are in short supply of: time.
“I saved time when designing. I saved time in the evaluation process when presenting scenarios to customers. I saved the developer’s time by having detailed documentation exported right from inside Justinmind.”
For Reymi, creating workable, high-fidelity prototypes that function properly coupled with the massive time saving means happy stakeholders and a smoother design process.
Reymi can successfully bring a project to life thanks to his prototyping tool. By choosing something that’s intuitive and easy to understand, he doesn’t need to spend hours learning. He can put his time to better use: improving the UX of mobile apps and websites.
“You’ll need a little introduction to Justinmind at the start. It makes sense – there are many useful features available to you. But it’s 100% worth the effort for the result you’ll achieve.”