Project Overview:
Jacarandá Mobília needed a premium online presence. After analyzing competitors, I identified a gap in outdated aesthetics and poor navigation. I designed a responsive catalog site in Figma, then rebuilt it Shopify to meet budget limits. By leveraging AI and refining visuals, I delivered a scalable, modern website ready for future e-commerce.
Role:
Sole UI/UX Designer
Project type:
Client project (freelance)
Project challenge:
Deliver a premium Shopify site under tight budget and shifting scope.
Methodology
-
Designed fully responsive layouts in Figma, prioritizing the main “Ver tudo” CTA for stronger visual hierarchy while keeping secondary actions minimal.
-
Initially planned to transfer designs via a plugin, but budget limits required rebuilding directly in Shopify using its native responsive capabilities.
-
Used AI to generate both Liquid code and marketing copy, supervising outputs for accuracy and refining only code segments I could reasonably adjust with critical thinking.
-
Retouched and optimized all product images in Photoshop for consistent quality and faster loading.
-
Structured the site as a catalog, with the flexibility to transition into a full e-commerce store in the future.
Knowing our main persona
Persona and Pain Points
Persona: Gabriela Souza
Age: 38
Education: Graduate
Hometown: São Paulo, Brazil
Family: Married, 2 children
Occupation: Interior designer
Problem Statement: Gabriela needs a quick, elegant way to explore Jacarandá Mobília’s collections online without visiting the showroom
Goals:
Browse collections quickly
Get accurate product visuals
Show furniture for client projects
Frustrations:
Difficulty finding the full collection in one place
Starting the design:
I employed visuals that matched with the persona
I jumped straight into digital wireframes in Figma, designing layouts for desktop, then after for the tablet and mobile. The main CTA was highlighted to guide users to the collections page, while secondary actions remained subtle.
The Hero banner
Researching on the competitors and newer websites, I've seen that the hero image was replaced by a video
The Collections
The second section was dedicated to the collections, a quick way to lead the user to the collections
Section 3
Due to the main CTA button being on section 2, I've used a less highlighted button style
Informal research
Informal research
The informal research was conducted by myself, I just approached one of the stakeholders and showed him the video which was going to be on the hero banner and the medium fidelity prototype
About us page:
Collections page:
Custom liquid coding ( AI ) ( Hero banner )
I used custom Liquid code to integrate a video seamlessly into the hero banner, bypassing Shopify’s default frame for a cleaner aesthetic. The code also adapted video resolution for full responsiveness. Beyond the hero section, I developed additional custom code across other pages to extend functionality and maintain design consistency.
Adaptations
Rebuilding the site directly in Shopify required adapting several sections to fit the platform’s structure. Fortunately, Shopify’s native responsive features streamlined the process, allowing me to save time while ensuring a consistent user experience across devices
The final design
The final website design
Now one of the most important things about this project, or the most, the Takeaways
Takeaways
AI can speed up development while still requiring human oversight for quality and accuracy.
Budget changes can be an opportunity to simplify processes without losing quality.
Planning for scalability early ensures the design remains relevant as the business grows.