Jacarandá Mobília Website
Role:
Lead UX/UI Designer
Project type:
Freelance
Year:
2025
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.
Challenge:
Jacarandá Mobília's project required a strategic pivot: creating a modern, premium experience while staying within a limited budget. This meant moving from a planned custom solution to a more streamlined, adaptable Shopify build. The core problem was maintaining design integrity and a premium feel despite a shifting scope and the platform limitations
My Actions/Solution
Designed fully responsive layouts in Figma, prioritizing the main 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.
Targeted Persona:
"I need a quick, elegant way to find the perfect furniture and show my clients exactly what it looks like "
*The persona was developed based on our direct insights from client interactions and sales data.
User's need:
Gabriela needs a quick, elegant way to explore high end furniture collections online without visiting the showroom, she has trouble finding the full collection in one page ( competitive audit )
Goal defined:
Browse collections quickly. Get accurate product visuals. Show furniture for client projects
Starting the design:
I employed wireframes that matched with the users' need and made the navigation easy, placing some collections with a button with " see all collections " as early as the second section of the website
Due to the main CTA button being on section 2, I've used a less highlighted button style for section 3
Researching on the competitors and newer websites, I've seen that the hero image was replaced by a video
Quick about us section
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, noticed that he had difficulty noticing that there was a full layout down the video due to the video's sheer height on mobile, so I reduced it, the layout was approved afterwards
Insights + Changes
This was basically the major change, since the layouts were already approved
Before
After
Color pallete:
Using an insight by Donald Norman’s Emotional Design book, I applied this palette for its sophisticated feel and strong visceral impact, colors that create an immediate emotional connection and elevate the user’s perception of quality, alongside the brand colors used for accent on button hovers to keep the design grounded on the brand
#FFF6EC
Background color
Choosen to avoid eye strain and create a sophisticated look
Typography color, avoids eye strain from pure black
#1E1E1E
#00DD00
Leveraged AI-powered tools for liquid code
I leveraged AI to generate a custom Liquid code for the hero banner and then refined it with AI-assisted corrections to ensure responsiveness. This process fixed zooming issues and delivered a fluid, modern layout optimized for different screen sizes.
The Final Design
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.