Service Design – Pharmacy Experience

I come here today to share my first experience in the Service Design area. The request came not from any client, but from an application exercise for a job, which was done about 2 weeks ago. Although the job offer no longer exists and has been extinguished, this exercise was worthwhile to take the first steps in this area that you can hear so much.
The goal was to design a digital experience for customers in pharmacies in Portugal. The exercise had to address some premises such as:

Customer recognition;
– The customer has access to digital technology;
– Exist self-service option;
– Contact with campaigns and promotions;
– Circulation by the pharmacy, allowing access to the products on the shelves;

Having these points to address, I first had to put myself in the shoes of the client and user to know what their goals, frustrations and fears might be. Nothing is better than defining personas to define the needs of the client / user. I defined 2 personas, one of them was an old person and another younger, mother of 2 children.


Although I know that older people are not the most frequent public told by statistics, I chose to move forward to be a representative of a more vulnerable group of the population.
The other person was a person of about 30 years who works and already has family responsibilities, that has more contact with the technology and has a more fulfilled life.
I then defined for each of them a profile associated with the experience in a pharmacy.

Persona No.1        

Name: Júlia Sousa – 73 years old

Characteristics:  Reformed  

Buy drugs and meds
– Likes to leave home

– Likes to have a little chat with the pharmacy staff;
– Likes to receive technical advice

You are afraid of being on your feet for a long time;
You are afraid of not communicating very well when you need an over-the-counter medication;


Persona Nº 2 Teresa Almeida  – 29 years old
Characteristics: Teacher, mother of 2 children

You must buy medicines regularly for your children;
Likes technology to make life easier
Likes services to be fast
Like advice to find the best products for your children;

You are afraid of taking too long;
He prefers to do the shopping alone, with the children he becomes more painful;
Sometimes he forgets his wallet;
He hates to walk with the receipts in his suitcase, until it is opportune to enter a pharmacy;


The personas defined goals and fears made it possible to create new ideas and concepts for a pharmacy experience. These data were based on my own experience in pharmacies and on the observation of other clients. Some research was done too, but it was not deep, nor data-based, since I did not have access to them.

From here I wrote some ideas on paper and did some schemas and some flows that helped me define the characteristics of my ideas.

FullSizeRender (1)

With the ideas on paper, I found it difficult to present the ideas clearly and demonstrate the sequences of experiences. I did some research and came across some online examples that helped me build and present the customer experience process.

I felt the need to represent them with images, accompanied by the description of each moment.

The result was this visually:



The results of the experiments consisted in 3 types:

1 – The Traditional Experience. (Person 1-2)


Time to enter the pharmacy
Clients are approached by an employee with a tablet who checks the customer through the name or fingerprint. This one allows for more accurate authentication.
Here the employee analyzes the request by scanning the prescription or indicating the drug or product that the customer is looking for.
The customer is assigned a password by the employee who is with the tablet.
While waiting for the turn the customer can circle the store or can sit in a chair while waiting. Probably the chairs will be used by more vulnerable users, such as the old people, pregnant women, people with motor difficulties or adults with children on their lap.
While waiting, there are televisions with presentations of promotions and campaigns;
At the time of payment, the customer can use the traditional method (money, card payment …) or associated with his account, the payment can be charged later digitally, with the account associated with the credit card, paypal …
In the act of farewell, the employee reinforces his attention to the user asking if he knows how to administer or if he needs some more advice.
2 – The Self-Service Experience (Persona 2):



Time to enter the pharmacy
Moment of exploitation of the pharmacy in search of the product. It will be more the zone of parapharmacy products. There would always be an employee who is circulating if someone needs support.
The customer is assigned a password by the employee who is with the tablet.
Does not exist / short;
At the time of purchase the customer makes payment through a self-service system. The employee who is circulating through the store can support the customer in the machine.
The customer comes out satisfied because he quickly makes his purchases without delay.
3 – Experience with an App (Person 2):
Login zone of the user with previous registration of the same.
Scan of the recipe, through the automatic application is associated with the user.
After the scan, the user receives a pickup code or can even pick up the order through the fingerprint.
After the scan, the user receives a pickup code or can even pick up the order through the fingerprint. Here you receive notifications on your mobile phone with the promotions and campaigns in effect at that pharmacy.
While waiting for the turn the customer can circle the store or can sit in a chair while waiting. Probably the chairs will be used by more vulnerable users, such as the old people, pregnant women, people with motor difficulties or adults with children on their lap.
While waiting, there are televisions with presentations of promotions and campaigns;
In the act of payment the customer can make the payment through the traditional method (money, card payment …) or associated to his account, the payment can be later charged digitally, with the account associated with the credit card, paypal …
In the act of farewell, the employee reinforces his attention to the user asking if he knows how to administer or if he needs some more advice.
In these 3 experiences I was able to cover the previous premises, giving the client a personalized, technological, proactive, fast experience without losing the best that the traditional one has.
I don’t think the ideas are too complicated to implement, perhaps the fingerprint issue is the most delicate in terms of keeping data and ethical issues.

Although I am exposing my ideas and the risks involved, I would like to present them to the world and contribute to the well-being of people and their experiences.
In an age when traditional buying is dying, we have to come up with new ideas to keep it alive!

When simplicity did not follow technology.

The Vintage fan

Good aspects 

  •    Easy to use;
  •    Intuitive;

Bad aspect

  • The indicators are clear, but are a little misplaced.The 2hours Timer label and Orientation label, should be in the top of the user interactions elements)

The modern fan

Good aspects:

  • Modern and atrative design;
  • New features

Bad aspects:

  • Mapping very confusions;
  • Icons meaning aren’t all clear;
  • The on/off buttons aren’t Highlighted with visual relevance;
  •  The labels of the hours, we do not know are related to which buttons;

Obviously we have to evolve more and we must be careful to keep things simple and especially to ensure that users do not have to memorize the instructions to use the equipment. Usable intuitively and with obvious affordances.

How a little detail can be very frustrating.

Today when I was trying to access my online bank and I came across a very unpleasant situation and extremely unfriendly.Despite being a satisfied customer with the bank in this case, they let me very frustrated.

Here’s what happened: In the course of an account unblocking request, once you have entered the required data you have reached the final part to “accept” the access conditions. I clicked the checkbox and nothing happened … I could not tell if it was active or not. (another problem).I thought it was strange but I thought it was a browser problem … So I tried on IE, Chrome and Firefox and nothing has changed.

Screenshot_1I had to do call the helpline … I called and I was surprised with what they told me … Do you see the red link, more prominently … So I had to click first, and then “read” the conditions,  and then close the window and yes after that, the checkbox appeared Active.

Oh … I had to take 4 actions to continue the action. I complain the usability issue to the person who answered me. I also decided to share this “huge bug” of usability and leave here a solution, which maybe with luck, someone is kind enough to correct.

– Many steps to follow up on an action;
– There is no indication, nor message to the user that should do a series of actions;
– The checkbox drawing does not indicate that is inative;

– Create a tooltip or other type of message object to indicate what to do;

ux-bug– When entering this page should have the text of the conditions soon and of course the user had to “read” and go to the bottom of the page where you have the buttons to accept. (See Google example);
– Or Finally, but not the best, in the text thta already exists, indicate what should be done;
In the end I click in the “Ajuda”  button, that means “help” in Portuguese …
But without success, the message says:
“User Help”
There is no help for this page.
Close Help.
(Very funny)!!

I’m CHOCOed with this package!

I would like to share with you an experience of using a chocolate package.
The first thing that caught my eye was: “Why the hell do you need a message with so much emphasis on” OPEN FOR HERE (spanish “ABRIR POR AQUÍ”) “?

Should not that be obvious? Is case to remember  a great design quote that says:
“Good design means never having to say “click here “… And the same applies in this package.

From my experience and any other person who opens that packaging, will used that opening that has a semi-circular cutout that tells us that is where we open.This type of facility is an affordance, the definition is: Situation where an object’s sensory characteristics intuitively imply its functionality and use.

But the most unbelievable thing is that the message indicated that it had to ripped a white part and that it made an opening similar to that previously mentioned.

So why have both? Was not the most intuitive enough?

I still try to opening through the two openings, but no … it just gets very hard to manipulate.

Moral of the story:

– keep it simple;
– Good design, means no text message is needed;
– take account of affordances;

One question remains … should I warn this brand of chocolate…? Only if they give me back chocolates…

How a children draw, can turns into a icon.

In the life of someone professional in design, we face us often with a lack of imagination, originality or simply for complicate  too much.

Sometimes it has to be someone with clean mind to teach us that we should be keeping the simple, obvious and concrete.

Not complicate! In User Experience it takes great discipline to not complicate. We thing that the right thing is  to show “everything” is the right thing. Sometimes it is not the case.

I’d like to share with you this drawing that made me wonder… Why? Because of its simplicity, being direct and devoid of any extra information.

Here a draw of a 4 years old boy.



The child has drawn a car in the rain.

There are drops (rain) water and the car floor.

The rain are diagonal risks, overlapping in the car.

The car is fine … is a car (obviously)!

And the water is on the floor and is blue.

Nothing simpler. I think it would make a great icon. I think that probably the icons do not make sense for any particular situation. I wanted to try and make some sketches.

Well … I still prefer the original design !

Imagining a purpose (for situations a bit exaggerated !)

Could be an icon for:
– Careful with the storm! . Do not drive !
– It’s rainning. Stay home !
– Careful with the storm , do not drive , there is water on the floor!

Here in vectors.


But it is a tip for learning from the little ones … ”
– Do Not complicate
– Be clear
– Follow your instinct.



Two usuful websites for webdesigner

Today we present some examples of 2 useful websites to use on the day in to design and desenvelop a website.

This site allows you to view quickly (without having to resize the screen) as a site behaves in terms responsive.
Presents in “Width” or in “device sizes”.
Resizes the following sizes: 240px, 320px, 480px and 768px.


For those looking to escape the Lorem Ipsum, this site provides preformatted text and targeted to various sectors and business areas.
Save yourself time and energy when we are still doing the construction of a website.

UX-What did I learn today?


What did I learn today? Today I analyze some mockups to a new platform. This time i didn’t do the design, just had the opportunity to review the desktop version and mobile version.
It was fun to see the other side of the design process, in which essentially try to find defects and flaws in the proposals of others.
Always as a constructively critical perspective, I realized quickly from failures in the design of the composition is that there were concerns in the area to take into consideration to put the buttons.

A very simple analysis, I came across these errors:

Buttons Quantity

– Do not over do the amount of buttons, in this case we had six buttons, an area that was too small.
Resolution: Eliminate some buttons, reducing to the maximum. Create a button on one of them includes more features. As the share button.


IOS Share button
Android Share Button






After clicking in the android share button, we can try open a screen like that:


After clicking in the IOS share button, we can try open a screen like that:

IOS Screens


Distance Between Button.

– Pay attention to the size and distance between each button. We can not forget that we have to leave enough space for the finger to click, without making the mistake of clicking another. Learn more here:

Distance Between points and items lists

– Leave space between multiple points and lists, once again, to not click on the wrong button.

Stop Scrollers

– Placement of elements “stop scrollers” that give the feeling to the user that is no more information on the page.
Solution: Add some indication that there is more information (eg: titles)


–  When designing for mobile, we need to sometimes give priority to some information that will appear only in the mobile version.
Can be the 
the case of the footer: When the footer have a lots of information, such as multiple menus, icons and text blocks, you need to reduce the material in Mobile. We have to define that are most relevant to the mobile version.
See example below. In this case the mobile proposal reduces the information, used only one menu block and the link to the social network.
In short,  choose content that the user can use on his device.




UI / UX process App Design – Part I

After choosing the ideia, the following is a the list of features that app will have. We have to know that more features y have the app, more tests will be needed and more setbacks and arrangements will be needed to do.

In this case, for this app you have the following features:
– Possibility to choose a date of departure and arrival (days that you have to travel);
– Possibility to choose the value of the your budget to travel;
– With these parameters the app will search all the flights that fit the profile fitted;
– The results are displayed in ascending order (from the cheapest to most expensive);
– Ability to mark as favorite some flights. (if at the time the research was unable to decide / arrange the trip);
– Ability to display the destination city  on the map;
– Possibility to see more information about the city, across the map;
– Ability to schedule the flight, going directly from app to app or website of flights agency or company (easyjet, Momondo, edreams, Ryanair, etc …);

Having established these features, you need to make a draft of the workflow.
It is a scheme, a storyboard sequences of screens, with the indication of how the app works.

This is a outline of how the app would work.
After and before moving on to the computer, I like to draw by hand, the sketch of what I have in mind. Quickly with the pencil or the pen, I can lay out my ideas

The phase that follows is the simplest UI design of App screens. In my case i drew in Balsamiq Mockups, that could quickly lay out and plan all screens of the app.
Despite being almost black and white, with some appoitments of color, at this stage we can already notice what will works and what does not. At this stage it helps to structure the workflow and also helps us to build visually
the app itself. We have already at this stage have a perspective of what works in terms of size and positioning of buttons and usability. I can also understand if some elements are to little, or are in the right location or is missing visual elements to create a good user experience.

In this phase we can also do tests to people that are external to the project. The best way is to export all screens, and make a prototype in the various apps available in the market such as POP, Marvel or inVision.

Watch the demo: