A website to translate a complex product
Datamorf operates in a crowded automation market with a technically complex product. The website needed to make it immediately understandable to two very different audiences: technical evaluators and non-technical decision-makers. I designed and built it end-to-end in Framer, from brand direction and messaging strategy to SEO architecture and final implementation.
Context
Datamorf Website
What is Datamorf?
Datamorf operates in a crowded, technical automation space. The website needed to do something deceptively simple: make a complex product feel immediately understandable to two very different audiences: technical evaluators and non-technical decision-makers like CMOs and sales leaders.
My role
UX/UI Designer & Framer Developer. I was responsible for the website end-to-end: brand guidelines and visual direction, information architecture, messaging strategy, Framer build, and SEO implementation.
Challenge
Translate a technically complex product into clear, outcome-driven messaging for two distinct audiences. Define Datamorf's positioning in a saturated market, structure information so both visitor types find what they need quickly, and build a scalable foundation that drives demo requests and early adoption from day one.
Research
Datamorf Website
Before designing anything, I focused on understanding the product, the competitive landscape, and the people the website needed to convert.
Competitive Audit
The automation market is crowded with tools competing for the same audience. I mapped the landscape to understand how competitors were positioning themselves, how they structured their messaging, and where they were failing their visitors. One pattern emerged consistently: nearly every competitor organised their solution section by user role or job title. I noted this as a direction to test, not necessarily to follow.
Audience Analysis
Although the product is highly technical under the hood, the primary buyers are non-technical: marketers, sales teams, and CMOs who evaluate tools based on outcomes, not architecture. Understanding this gap (between how the product works and how its buyers think) became the central design challenge. The website couldn't speak like a technical product. It had to speak like a business outcome.
User Flow Mapping
With the audiences defined, I mapped the key visitor journeys: how a CMO lands on the site and decides whether to book a demo, and how a technical evaluator navigates to validate capabilities. These two paths needed to coexist without creating friction for either, and understanding them in detail was essential before deciding where anything lived on the site.
Information Architecture
With the flows mapped, I built the site's information architecture from zero, defining the full sitemap, content hierarchy, and what information lived where and in what order. Having the user journeys already defined made this process evidence-based rather than intuitive: every structural decision could be traced back to how a real visitor would move through the site.
Synthesis
Translate technical complexity into clear, outcome-driven messaging
Define and communicate Datamorf's positioning in a saturated market
Structure information so both technical and non-technical visitors find what they need
Drive demo requests and early adoption
Build a scalable foundation for future growth
Ideation & Prioritisation
With research complete and the architecture defined, I moved into early ideation — translating everything learned into rough concepts before touching any design tool. From hand-drawn sketches, I moved into low-fidelity wireframes in Figma to test content flow and page structure before committing to any visual direction.
With the full scope mapped, I ran a prioritisation exercise with the founder. The landing page and pricing page were the clear priority: one because it was the first thing every visitor would see, the other because it directly influenced the decision to book a demo. Supporting pages were scoped for a second phase, once the core conversion journey was validated.
Hand-drawn wireframes of the website.
Iterations & Testing
Datamorf Website
With the structure validated, I moved into visual direction, defining the brand identity directly in Framer: logo refinement, colour palette, typography, iconography, and illustration style. A UI system was built from the ground up to ensure consistency and scalability across all pages as the site grows.
The most significant structural decision came early: the competitive audit suggested organising the "Solution" section by user profile, a pattern common across the market. After additional user interviews and strategic discussions with the founder, we pivoted to organising by use case instead.
This shift improved clarity significantly, visitors could immediately identify their pain rather than their job title. It was a strong early reminder that industry patterns aren't always the right starting point.
Final Design
Datamorf Website
Framer website
The final website was built entirely in Framer, using reusable components to maintain consistency, responsiveness, and performance across all pages. Beyond design and development, I implemented a foundational SEO strategy to support long-term growth: keyword research aligned with product positioning, SEO-optimised page structure and metadata, a blog setup with content architecture, LLM-aware content optimisation, and technical SEO best practices within Framer.
The result is a website that doesn't just present the product, it actively works to attract and convert the right visitors as the company scales.
Impact
Within the first 30 days post-launch, the website attracted 328 unique visitors and 619 pageviews with no paid acquisition, driven entirely by organic search and early brand visibility. An average session duration of 3m24s confirmed that visitors were engaging meaningfully with the content, not just landing and leaving. Google was the top traffic source, validating the SEO and content architecture decisions made during the build.
Reflection
The biggest lesson from this project was about the limits of benchmarking. Leading with competitive patterns felt logical, but it nearly produced a website that looked like every other tool in the space. The pivot to use case-led structure came from listening to users, not the market, and it made the final product meaningfully more effective.
If I were to continue developing the website, the next opportunity I'd pursue is a community section. A space where users can share workflow templates, offer implementation services, and exchange best practices around the product. Beyond the obvious value for users, it would create a compounding growth engine: every template shared is a reason for a new visitor to land on the site, every service listing signals that real people are building real things with the product. Community done well is the most sustainable form of marketing there is, and for an early-stage SaaS, it's also one of the hardest things to replicate.