The e-commerce of the future (English version)

13 min readFeb 26, 2021

If you want to see this project in Spanish just click HERE!! :)

Nowadays, e-commerce is very important for our lives. Who has time to go to the shop during the week? We are very busy and we don’t have free time to go to the shops physically and even more so during the Covid-19. For that reason, entrepreneurs and companies are creating e-commerces in which the users can shopping without leaving home.

Currently, e-commerce offers us a lot of advantages against the physical purchases we are used to. If we add great advances in technology to this, can you imagine the possibilities to create e-commerce? Virtual Reality, holograms, AI… The world is open up in our eyes.

“Everything that you can imagine, it’s true” Pablo Picasso

THE CHALLENGE

The challenge has been to create e-commerce of the future, thinking about future technologies and applying them to our project. Such as UX designers, we had the first goal: improve the user experience in e-commerce, we wanted to give them comfort and usability, but thinking in the “commerce” idea: to sell products.

This project has been done with Design Sprint methodology and has been done completely remotely.

Day 1

Objective definition

First of all, we had to define a goal to work on it during the week. We realized that current pharmacies applications don’t allow selling prescription medicine and, that’s why old and sick people had to move to the pharmacy to get their pills. Finally, we decided to add an extra value to the current pharmacies apps, creating one to get in your home your prescription medicines, like a delivery app. That’s why our final users would be people older than forty because they are more likely to receive medication.

With our objective clearly, we each raised six Sprint Questions to raise doubts and possible problems that could arise throughout the creation process.

After having a clear objective, each one of us exposed six Sprint Questions to raise doubts and possible problems that could arise throughout the creation process.

Proto Persona and Proto Journey

To better know our potential users, we created two Proto Personas, with different profiles and features.

Antonio’s bio: Antonio was a Spanish History teacher but he’s already retired. Nowadays, he has diabetes, a chronic disease. He needs daily medication and he has to go to the pharmacy constantly.

Goals: His first goal is to have medicine every day, otherwise, it could be a risk to his health.

Pain Points: The pharmacy is far away from his place. He is taking care of his grandchild and he doesn’t have free time to go outside.

Personality: impatient, busy, irascible, thoughtful.

Ana’s bio: Ana is working in a clothes shop. Currently, she has flu, she needs medicine for this and orders them online.

Goals: She has to come back to her work as soon as possible so she needs to buy the medicines quickly.

Pain Points: She doesn’t like to upload her personal data in mobile apps and websites and also complains about the delay in-home deliveries.

Personality: kind, good-natured, cheerful, impatient.

We also created two Proto Journeys in the online co-working tool Miro to get improvement opportunities from the bad moments of the way.

Antonio is going to buy his medicines but the pharmacy is so far and he has to get around and leave his place. The pharmacy is full of people and he has to wait a long time and when it’s his turn they don’t have the medicine he wanted. He has to go to another pharmacy and that’s horrible. Finally, he gets the medicines.

Ana is searching for an online pharmacy. She doesn’t want to join her personal data on the website and neither the delivery data. The waiting time for the delivery is very high but, finally, she receives the medicines at home.

Through this method, we realized the user difficulties to buy medicines, online and physically way. Antonio had more difficulties because he is not used to using technology, so his effort is greater than Ana's.

When we already know the user problems to buy medicines, we turn these problems into opportunities by HMW questions.

We created a board in Miro split into four columns: I+D, before, during, and after and we arranged all the HMW. We used Dotmocracy to vote the most important ones

The two most important ones were:

How might we automate the process through electronic prescription?
How might we help the user to remember to take their medicines?

Day 2

Review of ideas and research

We started the second day analyzing the previous ideas and doing online research for inspiration. After finishing the investigation, we put all our new knowledge in common and we explained the most original ideas that we found to the team by Lightning demos. To get a visual representation, a colleague showed us her ideas, the rest of the team took notes through small Sketches.

Solution Sketch

We chose the most original solution and we did a final Sketch in a sheet split into three steps.

FarmaHome / Medical Bag / Paying by “the face” / MedPlus

Day 3

Final decision

During the third workday, we decided on the final idea to work on it.

Whit Dotmocrazy, we voted for the most interesting and innovative idea but we didn’t know the author of each of them. After that, we analyzed the Solution Sketch and we took notes and questions.

When we finished the analysis, the authors of the Sketches explained the idea and resolved the doubts. Finally, we decided to work with the “Paying by the face” idea, a SmartMirror app whit a facial payment method and we also took some ideas from interesting ideas from “FarmaHome”.

StoryBoard

We had to draw the idea to see the interaction between the SmartMirror app and the user.

Day 4

Prototype

We were ready to do the prototype! During the fourth day, we created a prototype to be tested the next day.

First of all, let’s make an Inspiration Board!

FarmaHome

The final app name was FarmaHome because it perfectly conveys the purpose for which it was created.

We are not used to SmartMirrors interfaces and we had a big challenge: to do a prototype as real as possible.

For this part, we assigned four roles: creator, gluer, editor, and compiler of sources and we decided the content of the app during the creation process.

FarmaHome is an app in collaboration with the Spanish Social Security through electronic prescriptions. The medicines are registered by the head doctor. Thanks to this the pharmacy could send your prescription medicines to your place!
The app would be turned on by a button on the mirror or voice command to be easier for old people and users with reduced mobility

Only the account user can log in to their profile because the access is by facial recognition one of the most interesting methods of the biometric recognition systems.
The user in the mirror is closed to the mirror at this moment, to emphasize this procedure.

We have five options in the main menu: shop cart, profile, calendar, first-aid kit, and parapharmacy. We had to have an MVP so we didn’t develop the profile and parapharmacy options.
Shop Cart: We can see if we add some products.
Profile: You can edit your personal data and the possibilities of the app, for example, the connexion with other smart devices.
Calendar: This is a diary calendar. You can see your diary medicines and program alarms to take your pills. You can also see how many pills are left of medicine, if you have a small amount of important medicine, the system alert you and you can buy it through a CTA or voice recognition. For the safety of the user, the CTA will be visible only if it’s completely necessary and approved by the doctor.
First-aid kit: This is your medicine inventory. We can see two menus “Prescription medicines” and “Non-Prescription medicines”. We can see all the medical information and the quantity. You can also buy the medicines from this menu.
Parapharmacy: The user can buy personal hygiene products and non-prescription medicines.

In the Shop Cart, we didn’t develop buttons to add medicines to avoid self-medication. If the user pulse the button “Seguir comprando” (Continue shopping) will take you directly to the “parapharmacy” menu.

When the shopping process is finished, we can see a map to follow the order and the exact delivery time. In this way, we avoid one of the most serious problems of e-commerce: the user impatient regarding the delivery of products.

Day 5

User Test

The last day we did a User Test, It was the moment to see the reaction of real people with our app!

Our users were between forty and seventy people. We put the user in a real situation and created some tasks to guide them.

Scenario

“A sixty-five years old man with a chronic disease gets up in the morning and goes to the bathroom. He activates the SmartMirror and does some tasks”.

Visual idea of the scenario:

Tasks

1 - Turn on the SmartMirror

2 - See the diary medicine

3 - Activate the alarm to take the pills

4 - Buy the medicine of which there are few pills left

5 - See the delivery time

6 - See the prescription medicines

7 - Turn off the SmartMirror

Let’s go with the user test!

While one of us interviewed the user, the rest of us took notes of everything: the fails and what seemed more or less intuitive to them.

We started speaking a little bit with them about life to create an atmosphere of confidence and we made sure they were comfortable. After that, we did the test.

Finally, when the test was finished we created a board with the interview results and the areas of improvement.

The most confusing task for them was the consult of prescription medicines. It wasn’t intuitive because they could buy medicines from three ways: first-aid kit, calendar, and parapharmacy. They also wanted more information about the icons and some features.

Our users were a great source of information. It helped us to realize what we had failed at and allowed us to further improve the prototype later on.

Improving the prototype

We improved the prototype individually. I based on the Jakob Nielsen Heuristic Principles and the fails in the test stage to get better our work!

I created a logotype and centered the interface. I put the text on the left part of the mirror instead of in the face of the user. And I put the on/off button in all the views because in the other prototype it wasn’t in.

The main menu usability wasn’t clear at all. The user needed more information about the icons and they wanted don’t feel lost during the process, that’s why I have added labels that tell us what each of them is.
I also deleted the parapharmacy’s icon because the user didn’t recognize it and I decided to mix it with “Mi Botiquín” (First aid kit), we will see it after.

When the users entered their medicine schedule they wanted to see a clear calendar. In the old prototype, we had a daily schedule and it wasn’t very usable. They wanted a monthly calendar to organize their monthly medicines. That’s why the calendar is monthly now and, besides, it will be possible to set alarms for the medicines prescribed for that day.
On the other hand, the arrow to return to the main menu has been replaced by an “x” and positioned at the top right because in the old prototype it wasn’t intuitive.

There are more changes in the “Mi Calendario” (My calendar) menu. If the user touches the day, they can see in detail the daily medicines. Now, they can see what time they should take their medicines and set an alarm. In addition, I have added an explanatory label to the emergency icon for medicine shortage, as in the previous prototype, some users were confused with that, they thought that icon could mean “dangerous medicine”.
Another explanatory label was added in the arrow to return to the monthly calendar.

In the previous picture there had five pills, that’s why we can see the “Comprar” (Buy) CTA. It’s important to note that if the medicine is not in short supply, the CTA is disabled to avoid irresponsible self-medication or over-purchase of medicines.

I also changed some things in the “Mi Botiquín” (First Aid Kit). In the first prototype, we could see two menus: “Medicinas con receta” (Prescription drugs) and “Medicinas sin receta” (Non-prescription medicines). It was very confusing for the users so I changed all that menu and now, we can see only our prescription medicines.
I had merged the Parapharmacy with the First Aid Kit, in this way, if the users enter in “First Aid Kit” they can see two options “Mis medicamentos” (My medicines) and “Comprar en parafarmacia” (Buy in parapharmacy)

If the users pulse “Mis medicamentos” (My medicines) they can see the prescription medicines that they have in their places. I have added an explanatory text to know where they are and I added a touch scroll on the right to see more medicines. This menu can be edited only by the doctor. We can also purchase the medicine when there is a shortage of pills.

If we return to “Mi Botiquín” (First Aid Kit), we can see the “Comprar en parafarmacia” (Buy in parapharmacy). The users can buy non-prescription medicines and personal hygiene products. I also added a voice search engine, to avoid a keyboard in the mirror.
I realized a study because I wanted to change the “Comprar” (Buy) CTA for “Añadir al carrito” (Add to cart) but in most of the pharmacies people only buy two products maximum so I decided to put the “Buy” CTA.

If the users pulse the product they can see the PDP and other users' opinions.

In the purchase details, an informative sign has been added just below the CTA indicating that the payment will be made by facial recognition.

We had problems in the old prototype with the information tracking. The users couldn’t find the map to see where their order was going. That’s why I added a small text in the top right “¿Dónde está mi pedido?” (Where is my order?).

When the user has finished with the app, they have to pulse the ON/OFF button at the bottom right and the SmartMirror would return to its original mirror function.

SOCIAL MEDIA ADVERTISING

This challenge has been very difficult and, at the same time, very rewarding. We had to think about the e-commerce of the future and we decided to take a risk creating a SmartMirror interface, an object that we are not used to nowadays.

We worked hard as a team for five days and were able to come up with an MVP to be tested. In the test phase, the users gave us a lot of information and we decided to get better the prototype individually, as a result, we obtained a much more intuitive and minimalist interface.

We don’t know yet what’s about technology in the future but I’m sure that technology should evolve to help humans live betters lives and projects such as FarmaHome will be able to contribute whit this.