"Diego totally nails the world of UX/UI. He is a strategic thinker with brilliant execution."
Manuel Gutiérrez, CTO
We know how difficult COVID-19 has been for everyone. Just as there were companies that were able to continue working remotely, there were others that were forced to suspend and even completely terminate their operations.
While working on DRUO's core product, this project was launched in which, through a mobile application, small and medium-sized businesses received orders for their products and services and could keep their operations alive.
Since we are forced to stay at home, we are focusing on orders and delivery.
- Sellers create an account.
- Sellers add at least one product or service - they add an image, price, description.
- Set their online store settings such as address, relevant links to display in the header and activate it with just one tap.
- The store is automatically created and they can share it through WhatsApp or any social media channel.
- Buyers get to the web-app (automatically created), add products to their cart and make an order.
I was in charge of the flows and the interface of the application and the online store.
This had to be completed in 10 days for developers to roll out for the rest of the month to launch quickly.
The main design challenges were:
· Maintain a clean design that will not generate any friction both for businesses to publish products and manage orders, and for customers to place their orders.
· In the context in which we live in, direct communication between the business and the customer is crucial and the product must show them a clear way to do so.
· The list of products and the details of each one should be very easy to read.
· Order management should be simple. This includes the change of states and direct communication between business-clients.
· I generally start projects by building navigation, usability and wireframes flows to study architecture and iterate. On this occasion, due to the short time we had to finalize the design, this was not possible. This forced me to make faster decisions based on hypotheses and taking delivery products that I knew end-users have used as references.
· At the development level, the application was built in ionic, so there were design decisions that were limited to what this framework allowed.
What we have right away are the orders that need immediate attention from the business.
We place three calls to action to manage the store in general: products, orders and configuration. This configuration allows them to add details that will later be shown in the online store that is created automatically.
It is very important for businesses to be able to share their store or individual products to their customers, so we put a green "share store" call to action that allows them to do just that.
It is very important for businesses to be able to share their store or individual products to their customers.
Whether you want to share the entire store or individual products, the application allows companies to have the option to share links with their customers to receive orders faster.
What they share is a link to the particular product that will direct shoppers to the online store.
The list of products and the details of each should be very easy to read. Due to business strategy and development effort, product details were limited to photo, name, description and price.
Keeping a list of products or services clean, with only a photo, a snippet of the description and price, was the solution to keep a quick reading of the entire catalog.
I placed the "+" icon in the upper right to allow adding a new product from the catalog view without a fixed button at the bottom taking away the visibility of a product.
The application creates the online store automatically. Sellers activate it with just one click. Through here, buyers can add products to the cart and continue to checkout to place an order.
After adding products to their cart, buyers enter their contact information and address so that sellers can get in touch and deliver the product or service with ease.
We made the decision to combine the steps of 'cart' and 'checkout' for greater agility in the creation of an order.
When orders arrive, sellers must take immediate action. Order management should be simple. This includes the change of states and direct communication between business-clients:
· Taking into account the number of statuses an order can have, we have quick filters in the order list to make a faster search.
· In the order detail, we place a blue call to action at the top with the next exact status of an order (for example, again -> in progress -> completed).
· Below this button, we have the option to "contact customer" to provide different channels of direct communication.