On the kick-off call, I remember asking Poesial's Co-Founder Ling many questions about the company goals, what they had in mind in terms of visuals and why they are different from the other e-commerce that is out there in Singapore.

Poesial goal is to bring only selected high-end beauty products to the Singaporean market and have a close connection with the community of people who are buying those products.

There are many e-commerces out there and creating something new and refreshing while maintaining the usability was an amazing challenge to tackle.

The foundation of every project is a well-organized sitemap to map all the screens and flows that will have to be created. For Poesial wasn't any different, the sitemap can be small but that whole project was no joke with all the requirements the client asked me to include like the ability to buy without having an account.

When we are talking about e-commerce you can't have one without inner sections like My Account, but for this specific project Ling only asked me to design the outside screens.

To get started with the wireframe, Ling shared a well-structured document with all the content I had to put on the screens. The wireframe took a few weeks to get done with all the back and forth we had to do so all the screens and flows were perfect to move to the UI.
‍
Poesial is based in Singapore and I'm based in Brazil, and being 11 hours behind in time wasn't a problem. I worked on the project in the afternoon and waited for feedback the next morning. For the things that weren't easy to understand via text, we relied on Loom to record videos and used Zoom for scheduled calls.
‍
Ecommerce is a type of project that I don't usually do so I had to do some research and look at some references to solve some requirements Ling had with this project like the ability to buy without an account.
‍
Poesial is the type of store that sell expensive products and clients are buying 2-4 at a time, with that insight to solve I had to restructure the shopping cart in a way that look easy to use and looked well designed at the same time.

I used a lot of white space to make the products stand out as much as possible.
For this project the main goal of each page is to delight and sell high-end beauty products so the design had to be the supporting star on every page.

I spent a lot of time on the wireframes to get all the content blocks and user flows just right so when I get to the UI it was a lot easier and faster to add colors, photos and custom icons.

At the beginning of the project, they only had a logo and simple color palette created by Helena Stretovych. I used the logo style to expand the color palette and have a wide variety of colors to use across the project.

I also expanded the text and chose 3 type faces to be used as titles, text and pricing.
I don't usually use more than 1 typeface per project but on this case I felt that was necessary so the text would be aligned with the logo Helena made.

For every project that I work on I'm always creating custom icons and for Poesial wasn't any different. I created over 50 custom icons to identify many states, skin types and other content across the project.

I used a 2px stroke on all the icons so they are all cohesive and part of the same pack.
There's a beauty in designing custom icons that you can't get when picking them from an icon pack and the custom aspect makes them tailored specific from that client you originally created.

Depending on the features and functionalities of a project it can be challenging to convert everything to mobile without losing any important aspects of usability. For this project, I had to make some compromises because of the long content pages and at the same time being easy to scroll and find the content the user needs.

The hardest part of this whole experience was to make the shopping cart as easy as possible to use when buying new products.

Since this is a big project a style guide was a no-brainer to be created so the styles are all organized, and scalable and I don't need to create the same button over and over again. The style guide was created using Figma which allowed me to easily update when I had to and to give the client the ability to scale this project even if they decide to hire another designer to work on it.