Yooddle
Brand Restyle, Product Website & App UX/UI
- role
- Product UX/UI Designer
- year
- 2024 — ongoing
- focus
- Brand Restyle · Product Website · App UX / UI
deliverables
- Brand restyle strategy
- Product website redesign
- App UX flows
- UI design system
- Component library
- Ongoing product iterations
An ongoing B2B/B2C SaaS product spanning brand restyle, product website and app UX/UI — evolving a web-based platform for brand content creation, approval and amplification.
challenge
Turn an MVP product with a youthful, expressive identity into a credible, scalable SaaS tool while maintaining creativity and energy throughout the ecosystem.
approach
Restyled the brand to better align with product usage, redesigned the website around SaaS conventions with clearer product explanation, and began end-to-end app UX/UI design flows in Figma.
outcome
An evolving SaaS brand identity that supports product credibility, a website that explains the value proposition clearly, and app UX/UI flows designed for content creators and brand managers.
milestone · rock in rio lisboa 2026
yooddle at rock in rio lisboa 2026 — smart city of rock
Yooddle was part of Rock in Rio Lisboa 2026, inside the Smart City of Rock programme, putting the platform in front of thousands of festival-goers with no prior experience of the product.
People who had never used Yooddle before produced on-brand festival content in seconds — a live, high-pressure validation of the UX flows, the template system and the approval logic designed for the product.
87%
registration completion rate
1,291
pieces of content created from only 10 templates
≈12.9×
content multiplication factor
latest updates
what's moving in the product right now
Yooddle keeps evolving. These are the most important product milestones shaping the platform — from live activations to new feature rollouts.
Rock in Rio Lisboa 2026
Yooddle joined the Smart City of Rock, onboarding first-time users at scale. The activation delivered an 87% registration completion rate, 1,291 pieces of content created from 10 templates, and a ≈12.9× content multiplication factor.
Brand restyle live
The new SaaS-oriented identity is now applied across the product website, app UI and marketing touchpoints — clearer, more credible and ready to scale.
App UX/UI in progress
End-to-end flows for content creation, approval and amplification are being designed in Figma, focused on speed and clarity for both creators and brand managers.
01 Overview
Yooddle is a web-based platform designed for B2B and B2C ecosystems, enabling organisations and their communities to create, approve and amplify authentic brand content — quickly, consistently and with privacy-first logic.
Currently in MVP stage, the project spans multiple layers: brand repositioning, product website and app UX/UI design. This case study is structured in three parts, reflecting the evolution of the product and its ecosystem.
02 The Challenge
Yooddle initially launched with a more youthful and expressive identity. As the product matured, it became clear the brand needed to evolve to better reflect its positioning as a serious, scalable SaaS tool — while still maintaining a sense of creativity and energy. The need for change emerged directly from the product design process, ensuring alignment between brand and product experience rather than treating them as separate tracks.
- Transition from a playful identity to a more product-oriented, credible SaaS brand
- Maintain a sense of creativity and energy without losing credibility or trust signals
- Align the brand with a digital tool / SaaS environment and user expectations
- Ensure consistency across brand, website and app UI as the product scales
03 The Approach
Brand Restyle
From expressive identity to product-driven SaaS brand. The restyle wasn't about making the brand boring — it was about making it fit for purpose as a serious tool. The visual evolution introduced a more structured and intentional identity, with a cleaner system that feels more aligned with technology and product usage, still approachable and creative but without feeling immature. The redesign introduced a vibrant gradient-driven palette and a typeface that enabled the creation of a distinctive symbol, reducing visual noise while increasing clarity and recognisability.
- Redefined color palette with vibrant yet controlled gradients
- Selected typeface enabling a distinctive brand symbol
- Brand system designed to naturally integrate into UI environments
- Reduced visual noise, increased clarity and recognisability
Product Website
The previous website did not clearly communicate what Yooddle was or how it worked. The redesign transformed it into a clear product-focused platform aligned with SaaS conventions. The content strategy involved a full rewrite explaining what the product is, how it works and key benefits and use cases. Wireframes established a product-first narrative with structured sections around features, flows and value, introducing clear CTAs such as demo requests. The clean, modern SaaS aesthetic uses micro-interactions and product visuals to support understanding.
- Clear explanation of product offering, features and benefits
- Structured storytelling aligned with product logic
- Strong hierarchy and rhythm across sections
- Micro-interactions reinforcing product engagement
App UX/UI (In Progress)
The Yooddle app is currently in development, with UX and UI being designed in Figma. The scope covers end-to-end UX flows for content creation and approval, a UI system aligned with the new brand, and a focus on simplifying complex actions into intuitive interactions. The approach follows product-first thinking with strong emphasis on usability and speed, designing clear interaction patterns for both content creators and brand managers. The status is ongoing — the app will be added to this case study once publicly available.
04 Technology
The product website was built in WordPress using Elementor, while the app UX/UI is being designed in Figma for ongoing iteration and development collaboration.
Stack: WordPress · Elementor · Adobe XD · Figma
- Fast iteration cycles during MVP phase
- Cross-functional collaboration through Figma
- Established brand system reusable across touchpoints
05 Brand & Visual System
The brand system was designed to support both brand expression and UI usage — flexible enough for marketing, structured enough for product interfaces.
- Visual Identity — Modern, tech-oriented and flexible — designed to live across product, marketing and UI contexts.
- Color Palette — Vibrant gradient-driven system balancing energy and control, suitable for both brand expression and UI usage.
- Typography — Clean, modern type system with strong role in both branding and interface design — supporting clarity and scalability.
06 The Outcome
The brand and product now evolve in step rather than apart. The restyled identity clearly communicates product maturity and purpose, with strong alignment between brand and digital product. The website has improved communication of features and value, positioning Yooddle clearly as a digital product ready to support growth, demos and investor interest.
- Brand and product now aligned at visual and strategic level
- Website clearly explains the product offering and value proposition
- App UX/UI flows being designed for content creators and brand managers
- Flexible identity system ready for scale and continued growth
07 Key Takeaways
- Brand and product must evolve together, not separately
- A strong SaaS brand requires balance between clarity and personality
- Product websites must explain, not just present
- UX decisions should inform brand evolution, not the other way around
next project