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.

personas-pharmacy-katia-amaro


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  

Goals
Buy drugs and meds
– Likes to leave home

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

Frustrations
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

Goals
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;

Frustrations
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:

IMG_5977

IMG_5978

The results of the experiments consisted in 3 types:

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

experiencia-tradicional

ENTRY
Time to enter the pharmacy
ATTENDANCE
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.
PRE-WAITING
The customer is assigned a password by the employee who is with the tablet.
WAITING
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;
PURCHASE
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 …
GOOD BYE
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):

experiencia-selfservice

ENTRY

Time to enter the pharmacy
PHARMACY EXPLORATION
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.
PRE-WAITING
The customer is assigned a password by the employee who is with the tablet.
WAITING
Does not exist / short;
PURCHASE
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.
OUTPUT
The customer comes out satisfied because he quickly makes his purchases without delay.
3 – Experience with an App (Person 2):
experiencia-app
LOGIN
Login zone of the user with previous registration of the same.
UPLOAD OF REVENUE
Scan of the recipe, through the automatic application is associated with the user.
CODE
After the scan, the user receives a pickup code or can even pick up the order through the fingerprint.
INPUT
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.
WAITING
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;
PURCHASE
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 …
 
GOOD BYE
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.

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.

Screenshot_1

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.

1.http://mattkersley.com/responsive/
exemplo
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.

2. http://notloremipsum.com


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.

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

drafttdraftt2
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.
homeBudget-Toresults-favorite
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:

Icon creation – Surprise Me app

In follow-up to the previous post on the UI design of an application for iPhone, i come now show you the result of my work for the icon of the app.

Develop an iconic symbol it not easy at all. The big issue is how compacted our idea and the concept of an app in few graphics.

I already had the idea and the next step was to transfer it to paper and after to vector.
I knew I had to include the aircraft element, since it is an app to find flights. I also knew that the element of surprise had to appear, because the main functionality of the app was to find flights, whatever they were, but within a budget and in the dates that had available to travel. In short words, plane and surprise were the keywords to wokr to .

Here’s the first sketch I did for the icon. I mad in the first paper that  I caught… a post-it. It began with a plane profile and external elements around him, the same idea used in cartoon.

fotografia (7)

I could represent the “surprise” in various ways, such as a box of surprises, a splash element as is used in cartoons … But I preferred graphically something similar and did remember exclamation points.

These elements of surprise, also remind movement, speed and dynamism. As should be the app.

With the idea of drawing, I started to desing in vector … I already had in mind what colors to use, they would be the same as used in the own app design.

I build mentally a color range;

palete

From here i just to had merge harmonious colors and shapes within a square.

Up, down, right and left, the icon was taking shape, to get where I imagined. I also  thought tha was a good idea to create a lettering, besides an iconic symbol, to turn to some kind of logotype.

icon-process               icon-process-02

I used a simple, clean lettering, like i used for the app. Simple and straightforward.
And finally I finished Icon.

Here it is.

icon-web

My UX/UI Weekend

Last weekend I had the opportunity to attend a workshop UX / UI Design for Mobile app. In renowned digital school in Lisbon.

It was really great, get to know the methodologies and best practices to design a mobile app. Because drawing an app for mobile is very different to a  designing a website.
Over the next days, I will share with you some of that knowledge I have acquired and share to the exercise that I did.

app-surprise-me-katia-amaro

Some points to remember:
– The idea is critical and we need to know the concept and who will be the audience for the app;
– Do mockups on paper. Yes, despite to seem a little old school, it is important to organize the ideas and have a basis for designing to digital;fotografia
– Make digital mockups:
and test … test over and over till is perfect;

Well for now is all .. Wait for my next posts!

My creative process to create a logo or symbol

Sketches

Despite not having much time lately, I am currently a creative process to create a logo and / or symbol to a application for mobile devices. And I can say that I love the process! I like it !!

Before you start scribbling, a lot goes through my head …

Step 1 – Create and choose the name! It is not easy! I know the importance of a name may have and know that sometimes the name can decide whether something will succeed or not. Points to consider: short names or frequent use, funny names or taken from expressions;

Step 2 – Find what exists in the market. Either by type of business or by the association to the name. For example if the name contains the word “frog” and is a business of “cars”, do a visual search of the two and find what exists in the market. From there I begin to create in my head a series of images and combinations that will give rise to one thousand ideas.

Screenshot_1

Screenshot_2

fotografia (6)Step 3 – Time to sketches . The best part is here. I’m old school, I need to have a pen handy to first make some sketches on paper, before moving on to the action. ok, I confess I also use my ipad …
These initial sketches are the base for a future log soon. In this stage  i see if the ideas may have legs to walk or not.

Step 4 – Make a selection. After a thousand and one scribbles you need to choose the best to transform to vector. What are the criteria of my choice? Well, in addition to my personal taste, the most important is to see whether the logo is suitable to the public or business that you will serve.

This requires some analysis, “see” through the eyes of others, and if you have time, leave standing for some time, later to return to work on it, with a coolest head.

fonts31Step 5  Start drawing digitally. After choosing candidates, comes the stage of passing them to vector. In the past i used the freehand , but Illustrator is my beloved choice to create any logo. In addition to designing forms, choose the colors, the lettering is sometimes not easy to choose. From thousands of fonts to our choice, the choice of font is as important as the symbol. So we need to be sensitive the appropriate choice for a logo.

http://www.standingdog.com/blog/what-the-font-choosing-the-right-font-for-your-project

Step 6 – Some of them die on the way. Any designer knows that not all the sketches result in vector and sometimes are left with few have quality to continue.

Step 7  Before finalizing the proposals should be to test the black and white and various backgrounds to assess their good adaptability.