Manuel Diaz Law Firm is an award-winning legal practice based in Texas with multiple offices across the state. They specialize in personal injury, criminal defense, and family law, proudly serving both English and Spanish-speaking communities. I was engaged to craft a modern, intuitive website that would mirror the firm’s professionalism and trustworthiness while also feeling welcoming to users. The project’s aim was to translate complex legal services into a user-friendly online experience that instills confidence in visitors. The end result was a polished, accessible website built in Framer – one that invites trust and makes it easy for potential clients to reach out.

View the website here

Manuel Diaz Law Firm’s previous online presence did not fully reflect the breadth of their services nor their client-centric approach. The challenge was to design a site architecture that could organize a wealth of information – from numerous practice areas and attorney bios to FAQs and multiple office locations – in a clear and navigable way. The firm’s audience is diverse, so the website needed to cater to both English and Spanish speakers seamlessly, ensuring hablamos español wasn’t just a slogan but an integrated part of the user experience. Additionally, it was crucial to convey a sense of trust and warmth through the design, as many visitors might be anxious potential clients seeking legal help. Finally, the site had to be fully responsive and accessible, recognizing that a large portion of users would interact via mobile devices and that accessibility best practices would build trust with all users.

To address these challenges, I designed and developed a completely new website in Framer, focusing on clarity, accessibility, and approachability. The solution features an intuitive navigation and information layout that highlights the firm’s core practice areas, attorney profiles, FAQs, and contact options in an organized, digestible formant. I implemented a bilingual site structure with an easy toggle between English and Spanish, so content is accessible to clients in their preferred language (the site loads in either language and prominently displays “Español/English” options) Visually, the design balances modern professionalism with warm, inviting elements – using a clean layout, friendly typography, and a calming color palette to make visitors feel at ease. An interactive locations section was built to showcase all the firm’s offices across Texas, allowing users to quickly find contact information for the Dallas, Fort Worth, Denton, San Antonio (and more) offices. Throughout the site, trust signals (like client testimonials, credentials, and the firm’s 800+ 5-star reviews) are prominently displayed to reinforce credibility.

The result is a digital experience that meets rigorous business goals – informing users and driving conversions – while also conveying the firm’s human touch and dedication to service.

Clear & Accessible UX: A clean layout with straightforward navigation makes it effortless for users to find what they need. Key sections (Practice Areas, About the Team, FAQs, etc.) are immediately visible and logically organized, both on desktop and mobile. High-contrast text and ample white space were used to ensure readability and accessibility for all users.

Bilingual Support: The site is fully bilingual, with content available in English and Spanish. Users can switch languages via a prominent toggle, and critical info (like the “Call 24/7 • hablamos español” hotline) is visible on every, ensuring Spanish-speaking visitors feel equally catered to.

Interactive Locations Section: To highlight the firm’s statewide presence, I built an interactive office locator section. Users can select any of the firm’s locations (Dallas, Fort Worth, San Antonio, Denton, etc.) to immediately see the address, phone, and hours for that office, making it easy to find local help. This feature visually reinforced the firm’s geographic reach and accessibility.

Responsive & Mobile-Friendly Design: Knowing many clients find legal help via their phones, the site was designed mobile-first. The layout adapts seamlessly to smaller screens, with a simplified menu and touch-friendly components. Performance was optimized in Framer to ensure fast loading and a smooth experience on all devices.

Trust-Building Visuals: The visual design carefully balances authority and warmth. I incorporated the firm’s existing brand colors and imagery in a polished way, and included elements like award badges and real client success metrics. For instance, the homepage showcases over 800 four- and five-star client reviews alongside notable case victories to immediately build credibility with new. Subtle motion design was added (e.g., gentle hover effects and transitions) to give the site a modern feel without distracting from content.

My process for this project was iterative and highly collaborative with the client, ensuring the final product aligned with their vision and needs:

Discovery & Research: I began by meeting with the Manuel Diaz Law Firm team to understand their goals, brand values, and content. I audited their existing website and several competitor law firm sites to gather insights on what could be improved. Together, we identified key content to feature (like practice areas and free consultation calls-to-action) and set the tone: professional yet approachable.

Information Architecture & Wireframing: Next, I organized the site structure and created low-fidelity wireframes. This step involved mapping out how to present the numerous legal services and offices without overwhelming the user. I sketched layout ideas for the homepage and inner pages (Practice Area pages, About/Team, Contact, etc.), focusing on intuitive flow. We reviewed these wireframes to ensure all essential information (e.g., attorney bios, FAQs, contact forms) had a logical place.

Visual Design: Once the structure was approved, I moved to high-fidelity design. I crafted a modern UI that incorporated the firm’s branding – using their blue and gray color scheme (conveying trust and stability) complemented by warm accent colors for calls-to-action. I chose friendly but professional typography for readability. During this phase, I also designed custom icons and selected imagery that would resonate with the firm’s clientele (including images reflecting the Texas community and justice symbols in a welcoming style). We went through a couple of feedback rounds to polish the look and feel, ensuring the design struck the right balance of authoritative and inviting.

Development in Framer: With the design in place, I built the site using Framer’s no-code web development platform. This allowed for a smooth translation from design to a live, interactive website. I implemented responsive breakpoints and interactions – for example, the office locations section has clickable tabs for each city, and the navigation features subtle animated transitions. I also set up a lightweight content management structure in Framer so the firm’s team can edit text (like adding blog posts or updating FAQs) easily down the line.

Testing & Launch: Before launch, I rigorously tested the site on various devices and browsers to ensure consistency. We conducted user testing with a few staff members (including native Spanish speakers) to verify that the bilingual content and overall UX were clear and effective. I resolved minor issues (like tweaking contrast for accessibility and optimizing load times for the media content). Finally, we connected the Framer project to the firm’s custom domain and launched the site in June 2024. I provided the client with a brief training on how to use Framer’s editor for minor updates, empowering them to keep the content fresh.

I served as the UI/UX Designer, Framer Developer for this project. In essence, I was the sole creator responsible for taking the site from concept to code (without actual code, thanks to Framer’s no-code tools). This meant I handled everything from initial UX planning and interface design to building out the functional website and adding interactive animations. Wearing multiple hats allowed me to maintain a cohesive vision throughout and ensure that every design decision was implemented with pixel-perfect fidelity. My background as a multidisciplinary designer in web, UX, and motion design was fully leveraged to deliver a site that is not only visually appealing but also smooth and dynamic in its interactions.

Framer – Used for high-fidelity design and no-code development of the website Framer’s interactive capabilities allowed rapid prototyping and implementation of animations (like the interactive location section and hover effects) directly in the final build.

Figma – Utilized during the initial visual design phase to create wireframes and mockups. Figma was helpful for quickly iterating on layout ideas and collaborating on design feedback before moving into Framer.

Adobe Photoshop & Illustrator – Employed for image optimization and creating custom graphic elements (e.g., editing photos for the site and designing icons or illustrations to accompany certain content sections).

Complete Website Design & Build: A fully designed and developed responsive website, delivered on the firm’s custom domain via Framer. This includes all key pages (Home, Practice Areas, Attorney Profiles, FAQ, Contact, etc.) in both English and Spanish versions.

Interactive Features: Implementation of dynamic elements such as the office locations section (interactive city selector), animated navigation menus, and call-to-action buttons with hover states, which enhance the user experience.

Design System & Assets: A mini style guide outlining the typography, color palette, and component styles used, to ensure consistency. I also provided all asset files (icons, images, illustrations) optimized for web.

Client Training & Documentation: A walkthrough session (and a short reference document) for the client’s team on how to use the Framer CMS/editor to update content like text, images, and blog posts. This empowers them to make minor updates in-house, ensuring the site remains up-to-date.

Prototype & Handoff Files: The Figma design prototypes and a backup of the Framer project were delivered for the client’s records. This way, if they ever need to extend or modify the site with another developer, they have all the necessary design files and project data.

The new Manuel Diaz Law Firm website has achieved a range of positive outcomes for the client:

Modernized Digital Presence: The firm’s online face now truly matches its stature. The website conveys the award-winning, professional reputation of the firm at a glance, giving visitors confidence in the firm’s services. The clean design and clear messaging have elevated the brand’s perception among clients.

Increased Engagement & Inquiries: Early feedback indicates that more visitors are engaging with the site and reaching out for consultations since the redesign. The intuitive navigation and prominent calls-to-action (like the “Request Free Consultation” banner) have led to an uptick in contact form submissions and phone inquiries. The firm’s staff noted that clients often comment on how easy it was to find information on the site – exactly the outcome we aimed for.

Broader Audience Reach: By providing content in both English and Spanish, the site now effectively serves a larger community. Spanish-speaking visitors can navigate the site comfortably, which has improved inclusion and resulted in more inquiries from that demographic. The “Hablamos español” approach is no longer just a phrase, but a tangible part of the user journey.

Sustainable Updates: The client is empowered to keep the content fresh without needing technical help, thanks to the no-code build. This means they’ve been able to post new blog articles and update office information on their own. The ease of maintenance ensures the site remains up-to-date and continues to be a useful resource for clients.

Strategic Asset for Growth: Overall, the website has become a strategic asset for Manuel Diaz Law Firm’s growth. It not only provides vital information (such as legal resources and answers to FAQs) which helps educate clients, but also funnels visitors toward taking action (scheduling consultations). In the long run, the firm expects the improved user experience and professional polish to contribute to higher client conversion rates and stronger client trust even before they walk in the door.