PANA website
UXUI / Responsive Design / Design Systems
Role:
UX/UI Designer
Company
Panatech
www.panatech.io
Type
Company website
and online store
Project overview
web-based design system
for a multi-currency checkout flow
"How do you package and sell safety?"
PANA takes care of you
PANA provides attention during situations of risk, imagine your car breaks down in the middle of nowhere ¿who do you call?
It's an interesting premise but many rules are implied when pricing an communicating the scope of the service, specially in Caracas, a city with a high crime rate and an infinite variety of risk levels to cover (which is precisely what makes us valuable).
Our nature is similar to those of insurance companies, and we bought that reference into the table when trying to understand how people negotiate safety as a product. Insurance models are crammed with clauses and conditions, which often stalls the acquisition process because the pain of understanding it beats the joy of finally having it.
Responsive copywriting
We understood that narrative was key and that impact precedes detail, so we developed pieces of writing that shrank or grew depending on the format of delivery and used figma to put it together as a guideline catalog.
The User
From the data recovered from customer archives and qualitatuve research, we found out two important things: first, many want to acquire PANA for someone else, mainly mothers looking out for their family. Specially in foreign countries, there's a strong motivation to help and feel close to their relatives in Venezuela.
The Strategy
There were two main objectives: first, advertise our services and show the way it's packaged as a yearly suscription, second, build "gift-giving" as a main feature.
A UI concept was developed where a series of "cards" that cover each other up as you go through the payment process and other user flows. This allows us to focus the attention of the user on a few current elements without "erasing" your progress from the screen.
Fluidly Fixed
This was our first time learning about responsive design and we realized early on that card elements aren't too flexible. Therefore, we made a general decision to be fluid with static content, and on the other hand, to be rigid with a one column layout for interactive components.
A parametric component-based logic in angular was implemented by our devteam to generate modular UI pieces that shared sizes, colors, effects and animations.
The fun part
PANA's design team was composed of three architects with no prior experience in product design, so we did what archtecture school taught us to solve abstract problems, study a lot of reference, and reverse-engineer it to find out why it's made how it's made.
We learned how to build an atomic design system and organize it for production. This experience led me to learning basic frontend lannguages and building the exact site you're reading this on (:
