Diego Valencia
Designer

Instant E-commerce

Create an online store and receive orders for free.

"Diego totally nails the world of UX/UI. He is a strategic thinker with brilliant execution."

Manuel Gutiérrez, CTO

Freepik.com

Freepik.com

Challenging times

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.

Building the product

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.

Design challenges

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.

Interface design

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.

Instant E-commerce
Share links

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.

By pressing the upper button

By pressing the upper button "share store" or to an individual product, the operating system action will be displayed to share these links by the means that best suits them.

Catalog of products and services

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.

Instant E-commerce
Online store

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.

Responsive version of the online store

Responsive version of the online store

Order management

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.

Instant E-commerce