Back to Portfolio
Product Design
Client
Methodology
case study
Design Thinking
2 weeks
Miro
Whimsical
Figma
Role
UX UI Designer Product
UX UI FOR
E-commerce
UX
Brief
A packaging family business since 1986 needs a digital challenge:
Have digital presence and leave the old style bussiness.
Be closer and more accessible to their costumers without physical presence.
Make profitable time, resources and unnecessary business trips.
Tools
The problem
Etimatic Packaging
Business model canvas
Research
Empathize
Research Question
Competence Benchmarking
From 128 survey answers and 5 interviews I found de following stats:
I made a research question to know more about the product, the company and the competence companies. Although some of these question seem obvious, they were useful for the investigation. I divided them into groups.
After research question I made a Benchmark to compare products, services, processes, and methods of our direct competitors to analyze what the difference is and figure out how could to improve the quality of our product.
When I had all this information I proceed to interviews. Company clients and costumer service, and company CEO.
The Users
Buyer persona
User Journey Map (from Buyer persona) we can see the process that a person goes through in order to accomplish a goal. Next, the timeline is fleshed out with user thoughts and emotions in order to create a narrative.
​
Also I made a story board from each user experience.
Definition
I found two types of users:
Young people using technology to buy and Older people aged 50 to 60, no technological and they like buy in person.
Service Blue Print diagram help to visualize the relationships between different service components people, props, and processes that are directly tied to touchpoints in a specific customer journey.
At this point, trusting the process and asking the right questions, I had already learned about the user, the environment, and the behavior. With which it was time to draw the conclusions of all the research previously carried out through different techniques.
​
Thanks to the research, I transformed the insights into functionalities and I took into account the most outstanding ideas and processes.
​
Is time to look for apportunities, so I turned Insights into How Might We Statements.
Insights to HMW
The solution
Ideation
After several design thinking techniques, I realized that not all of them could be effective for this project... because I had already defined what the final format was going to be, which was a website, but I had to develop more ideas that would be productive within this site. So after an itinerant brainstorming and hybridization exercise, and gather all these ideas in a matrix, in order to organize and decide which ideas may be possible in my project.
​
I felt the need to get more ideas, since I was quite lost and I felt that the project was not going ahead, so I decided to use another technique (belonging to the scrap system) Features (user stories) in which we basically decided which it is the user's objective, what he wants and what functionality we offer him, this was where I made an endless list of options and applied solutions.
Selection matrix
My value proposition was created in 1986, in this project the company is already defined... my job now, 34 years later, was to transfer its value proposition to a digital format. Through a storyboard I had to think how my idea was going to be applied to the website, in which we offer one of the solutions to our client's initial problem.
​
The main and final idea of this website to be developed is to create an easy and intuitive e-commerce, and at the same time have a wizard for the new customers can find their needs. Este fue el gran insight y el que me causó conflictos más interesantes, porque quería trasladar la forma presencial, al entorno digital, tratando de crear una gran experiencia de usuario.
User experience Story Board
How to carry out and organize this idea?
The answer is easy, flowcharts and architecture map.
​
The flowchart for our user is developed in a series of steps in order to offer you the products that best suit the needs of your business. To do this, enter as a new customer to buy a product for your company. The user goes to the targeted area, once again a customer, answering the successive questions that the process proposes, at the end of which they will be shown a series of products selected from the catalog so that they can purchase them directly.
​
This map is a representation of what our website will become, this part is quite important since it speeds up the process when creating the views.
Website architecture map
UI
The approach
Prototype
Wireframes Low - fi
Once the architecture is defined, the next step is to make sketches of the views that we have to define, a first idea of how our visual part can become.
Wireframes Mid - fi
The Design
I wanted the appearance of this website to be quite different from the competition, I want to be visual, easy to use and intuitive. The product had to be very important, so 3D will give it the representative fidelity that we so much need. Black and white are the two main protagonists, since the company's corporate identity is made up of these two tones. And playing with green as principal color, and the characteristic company color in 90s.
Moodboard
Style GUide
Wireframes (mockup) High - fi
Test!
Prototype
The 5 actions they had to carry out:
· You are a new customer and you have a clothing store, you want to buy a series of products but you don't know which one is best for your business, because you are new to the sector.
· Buy a high-quality custom bag for your store.
Enter the profile:
· Check last purchases.
· You want to make a package for the new campaign and you remember that they offered you a tutorial with the paper you bought months ago.
Repeat the same order that you made months ago.
​
The results were quite favorable, the users did not have much problem with the organization of the web, nor with any other element, just a few small changes to improve the experience.
Actual Landing page
