Creating a digital identity for a new brand
Yoo Beauty was a new entrant in the skincare space, aiming to establish a clean, trustworthy and modern digital presence. We didn't have any prior online foundation so the entire project started from a blank canvas. I didn't just had to create the interface but also the brand’s visual and experiential identity itself.
Defining the goal
The primary goal of this project was to design and develop a digital platform that captured the essence of the brand. We wanted to keep the website minimal yet expressive, mirroring the natural aspects of the products. Through the website we also had to establish Yoo Beauty's foundation We had to ensure that the customers could explore all the products, understand their benefits and complete the purchase without any friction.
Navigating new territory
As my first complete e-commerce project, I was presented with an entirely new set of challenges. Unlike previous design-only projects, this required me to handle everything - design, front-end development, animations and CMS integration. I had to translate every design choice seamlessly into functional code without compromising aesthetics or performance.
Turning vision into an interactive experience
The idea was to launch the site as soon as possible with all the products added along with functional payment methods. So, for this project, we followed an unconventional route which involved fast iterations and internal website testing.
Planning the website structure
We decided to use ClickUp as a collaborating tool and that is where I documented the brand direction, user needs, business objectives and content requirements. I used this as a task tracker as well that helped us to prioritze issues and have a clear timeline of additional feature launches.
Creating the first visual drafts
Rather than starting from wireframes and low fidelity designs, I started with mockups due to urgency. However, it also involved some elements of a low fidelity design. The idea of starting with mockups was mostly to provide a clear picture of how the final website was going to look like at a very early stage. So, I created the designs with placeholder contents. This helped the clients to understand the site structure, the IA and the important part, it gave them time to prepare the contents for the website.
Iterating on the initial concepts
To make the website as snappy as possible, I had to cut back on some animations from my previous design. We also decided to have our 'FAQ' page under 'About' page. This decision was taken in order to provide a better experience to the users by reducing page hopping just for small bits of information.
Bringing design to life
After the designs were verified, I started setting up the Wix Studio project space. This involved adding the typography, the color palette, brand assets and few product images. While building the site, I was simultaneously taking care of the tablet and mobile breakpoints as well for maintaining responsiveness. My process involved developing a page, making adjustments for other breakpoints, adding interactivity, testing and then moving to the next page. This helped me get an early picture of the animations that i'll be using for the rest of the pages and also helped the clients make any changes rather than waiting till completion.
Adapting to platform limitations
During development of the 'Product' page, I encountered a limitation with the Wix Store app. I wasn't able to customize certain elements to match our mockups. I conveyed the information to the clients and we decided to update those pages. The new 'Product' page designs were made while maintaining cohesiveness with rest of the pages. Once that was done, all the products and their descriptions were added to the store page and the payment page was also set up and tested.
Optimizing for performance and visibility
The final stage focused on preparing Yoo Beauty for a smooth, high-performing launch. I implemented SEO essentials including meta titles, descriptions, and structured data to improve visibility and ranking potential. Wix Studio already automatically optimizes the images to ensure faster loading times so all I had to do was verify whether it was working as intended. Along with this, we also decided to launch the brochure for it's physical stall which was highly appreciated by the customers.
Results and outcomes
After checking the website with the client, I connected their domain and proceeded with Lighthouse testing. This gave us information about the site speed, browser logged errors and some accesibility fixes that were resolved quickly. I added the clients as collaborators and walked them through the product page and some small CSS changes so that in the future, the clients could update their website by their own without worrying about breaking anything.
The launch of Yoo Beauty marked the successful creation of a complete digital presence for the brand. The combination of design precision and technical optimization helped Yoo Beauty establish trust and credibility as a new skincare brand with some impressive numbers to back them up.