Visualizing UX: Wireframes & User Flows Across Projects

Wireframing is a crucial step in my UX process, allowing me to map out user flows, structure content, and refine interactions before high-fidelity design begins. This collection showcases low- and mid-fidelity wireframes from various projects, illustrating how I translate ideas into intuitive user experiences.

Project Overview

Wireframing is essential to my UX process, helping to define user flows, content structure, and interactions before high-fidelity design. This case study showcases low- and mid-fidelity wireframes from projects at Fat Brain Toys and Mutual of Omaha, including the Planning & Advice section. From e-commerce to financial tools, these wireframes illustrate how I designed intuitive, user-centered experiences.

My Contributions

Timeline: 2015 – Present
‍My Role: UX Visual Designer
‍Related Topics: Wireframing, User Flows, Content Structuring, Prototyping, Navigation Design, Accessibility, Mobile-First Design, E-Commerce, Financial Tools
Estimated Reading Time: 5 minutes

Hand-drawn wireframes provide a fast and effective way to capture initial ideas and concepts. This example includes both mobile and desktop layouts, showcasing the quick iteration process that helps refine user flows early in the design phase. Lo-fi hand-drawn wireframe for a lead generation form modal, designed for both desktop and mobile to ensure a seamless user experience while aligning with the design system.

Turning Ideas Into Concepts: Part 1

Lo-Fi Wireframes: Hand-Drawn

Sketching Ideas

Hand-drawn wireframes are an invaluable tool, especially in the early stages of design. I didn’t fully appreciate their value until a few years into my UX career, but I quickly realized they allow for rapid exploration and iteration of ideas without getting caught up in details.

This speed enables quicker feedback and helps refine concepts early on. Many common web design patterns, like navigation and grid layouts, translate easily into lo-fi wireframes. Their simplicity keeps the focus on the big picture, helping teams align quickly and efficiently on design direction without distractions.

Lo-fi wireframes bridge the gap between brainstorming and structured design, making it easier to experiment and adapt. By sketching out ideas by hand, I could quickly validate layouts for the agent page, lead generation form, and email before moving into high-fidelity design. This approach not only streamlined collaboration but also ensured the final designs stayed user-focused while maintaining consistency with the design system.

The Value of Lo-Fi Wireframes

Refined Structure & Consistency: Mid-fi wireframes establish layout, hierarchy, and user flow while maintaining adherence to design system guidelines for typography, colors, and components.
Experimentation & Iteration: This stage allows for testing multiple ideas, refining interactions, and making adjustments before high-fidelity design begins.
Proficiency & Speed: Using tools like Illustrator, Sketch, and Figma enhances efficiency, enabling rapid adjustments and seamless collaboration.
Bridge to High-Fi: Mid-fi wireframes serve as a crucial step between rough sketches and polished UI, ensuring visual and functional alignment early in the process.

Lo-fi hand-drawn wireframe for the Mutual of Omaha agent contact page, ensuring clear layout and functionality while maintaining the design system’s feel.

Early exploration of the Mutual of Omaha agent contact page on mobile, maintaining the design system’s look and feel while refining layout and user flow.

Even the lead generation email was quickly sketched using a lo-fi hand-drawn wireframe, allowing for rapid iteration and alignment before moving into high-fidelity design.

Early-stage wireframe of the EBIC product page template, using placeholder blocks with image icons to define layout and content structure. This lo-fi approach focuses on the framework before final visuals and details are added.

Turning Ideas Into Concepts: Part 2

Lo-Fi Wireframes: Digital

Sketching Ideas Digitally

Lo-fi wireframing in Figma, Sketch, XD, or Balsamiq is an efficient way to establish layout and structure without getting distracted by details. Using simple shapes like gray boxes for images and placeholder text helps focus on user flow, content hierarchy, and functionality. When a design system includes lo-fi components—such as placeholder images, text blocks, and buttons—it speeds up the process and ensures consistency across projects.

Working in blocks and simple shapes allows for rapid iteration and clear communication with stakeholders and developers. It also prevents premature focus on aesthetics, keeping attention on usability and layout. This approach was particularly useful for the EBIC section of Mutual of Omaha, where templated landing pages for different insurance products were designed first in lo-fi before moving to mid-fi.

Benefits of Digital Lo-Fi Wireframing:

Faster Concept Validation: Quickly map out ideas and get early feedback before committing to details.
Clearer Communication: Helps teams and stakeholders focus on layout and functionality rather than colors and fonts.
Efficient Iteration: Makes changes easy and fast without redesigning high-fidelity elements.
Consistent Design Approach: Using a digital design system with predefined lo-fi components ensures uniformity across projects.
Seamless Transition to Mid-Fi & High-Fi: Establishing structure first makes refining and adding details more intentional.
Scalability for Large Projects: Ideal for templating multiple landing pages, ensuring efficiency across similar designs.

Digital lo-fi wireframe of the EBIC affiliate homepage, featuring an enrollment notice and dynamic product cards that adjust based on the specific offerings of each affiliate.

Lo-fi wireframe of the Life Insurance product page, one of several product pages that can be customized for each affiliate based on their offerings.

Early-stage layout of the Benefit Calculator page, designed to guide users through their options and assist in making informed decisions.

This Planning and Advice calculator went through extensive mid-fi exploration, with over 20 versions in Figma testing different layouts and interactions. From placing questions above or beside results to experimenting with conversational forms and field arrangements, each iteration helped refine the user experience through experimentation and learning.

Refining the Vision

Mid-Fi Wireframes

Refining Structure with Visual Consistency

Early in my career, I used Adobe Photoshop for wireframing, which was great for basic layouts but limited in visual flexibility. At Fat Brain Toys, I switched to Adobe Illustrator for mid-fi wireframes, allowing me to focus on typography, brand colors, and visual hierarchy while refining layouts. This shift helped me emphasize the visual aspects of design while maintaining the functional framework.

At Mutual of Omaha, I adopted Sketch and Figma, which offered Digital Design System libraries with pre-built components and assets. These tools allowed me to integrate fonts, colors, and layout elements from the design system, ensuring visual consistency across wireframes while staying aligned with the brand.

This phase of design was where I spent most of my time as a visual designer, fine-tuning spacing, alignment, and visual hierarchy. It was essential for ensuring that the wireframes were not only functional but also visually engaging before moving to the final stages of design.

The Value of Mid-Fi Wireframes

Refined Structure & Consistency: Mid-fi wireframes establish layout, hierarchy, and user flow while maintaining adherence to design system guidelines for typography, colors, and components.
Experimentation & Iteration: This stage allows for testing multiple ideas, refining interactions, and making adjustments before high-fidelity design begins.
Proficiency & Speed: Using tools like Illustrator, Sketch, and Figma enhances efficiency, enabling rapid adjustments and seamless collaboration.
Bridge to High-Fi: Mid-fi wireframes serve as a crucial step between rough sketches and polished UI, ensuring visual and functional alignment early in the process.

Mid-Fidelity Wireframe Exploration – A Figma example showcasing multiple navigation concepts, each with pros and cons to evaluate usability and user flow.

Optimized Navigation for Seamless Exploration

As part of refining the Planning & Advice navigation, I collaborated with the user researcher, leveraging UX fundamentals, user research insights, and the design system to identify the most effective solution. We explored multiple navigation methods, weighing their pros and cons to optimize usability and accessibility before handing the final design off to development.

Method 1: Global Navigation & Persistent Filtering – Allowed navigation across all P&A sections with filtering always accessible. However, pre-filtering based on the previous page could lead to inaccurate results.
Method 1.1: Subtle Insight Page Integration – Reduced emphasis on insights to prevent distractions but introduced potential dropdown confusion.
Method 2: Clear Resource Navigation – Made resource navigation predictable but lacked global navigation, restricting users to category-based exploration.
Method 3: Right-Side Category Navigation – organized categories on the right, but visibility was limited compared to top-level navigation and wasn’t as effective as the left-nav filtering.

Final Solution: Left-Side Filtering with Secondary Navigation

‍We implemented a full left-side filtering system, enabling users to refine content dynamically across all resources. Secondary navigation below the main nav improved access to key sections. This final approach balanced flexibility, clarity, and usability for a seamless experience.

Final Navigation Solution: Left-side filtering with secondary navigation, providing a clear and flexible way for users to explore Planning & Advice resources while maintaining easy access to key sections.

Tools to Create

Wireframes & UI Design

From Wireframes to Prototypes: The Role of UX, Web Design, and CSS

Effective wireframing isn’t just about layout—it requires a deep understanding of web design, CSS, and front-end principles to create solutions that are both visually compelling and technically feasible. Using tools like Figma, Adobe XD, or Sketch, designers iterate from low-fidelity sketches to mid-fidelity wireframes, refining structure, navigation, and interactions before presenting high-fidelity prototypes.

Beyond aesthetics, usability and accessibility shape every decision. A strong foundation in CSS helps ensure responsive layouts, proper spacing, and intuitive interactions that align with real-world implementation. By mapping user flows and testing different navigation methods, designers create seamless experiences that balance clarity, flexibility, and engagement.

Collaboration with developers, content strategists, and accessibility experts ensures that every component—buttons, filters, typography, and touch targets—translates effectively from wireframes to live experiences. Peer reviews and usability testing refine functionality, making complex information more digestible and ensuring intuitive, well-structured navigation.

I combine hand-drawn wireframes with digital tools like Figma, Sketch, and Balsamiq to balance quick ideation with precision. This hybrid approach fosters creative problem-solving early in the process while ensuring user-centered design outcomes.

Key Visual Design Considerations

Every design choice was guided by usability, accessibility, and brand consistency to create a seamless and engaging experience.

Adherence to Design System: Followed brand guidelines for typography, colors, and components while refining for clarity and usability.
User Flows & Wireframes: Mapped out user journeys and created wireframes to validate layout, navigation, and content structure.
Illustrations & Icons: Created or customized vector illustrations to align with the style guide and enhance comprehension.
Accessibility & ADA Compliance: Ensured color contrast, keyboard navigation, and touch-friendly elements for an inclusive experience.
Collaborative Review & Testing: Worked closely with cross-functional teams, conducting peer reviews and usability tests to enhance usability.