Software Product Template

Designing a scalable and modular template

The product line owners for SEL’s software products needed a new product page template that could better support the varied content requirements across software offerings. Previously, software content was retrofitted into a product template designed for hardware, limiting flexibility and clarity. The new template needed to accommodate diverse information while maintaining a cohesive structure across products. As the primary designer, I conducted research, interviewed product line owners and program managers, created wireframes, and developed the final DEV-ready template in Figma.

Category

Category

Template Design

Template Design

Services

Services

UI/UX design & web design

UI/UX design & web design

RESEARCH

Competitive analysis and customer feedback strongly informed early brainstorming. We identified that new customers would arrive on product pages through social and digital advertising, while existing customers would navigate to support information via the menu, search, or product selector.

Key questions during the process focused on how supporting documentation, product information, and downloads should be presented, and how to balance detailed technical specifications with a marketing‑driven approach.

THE CHALLENGE

The marketing and sales strategy for positioning and selling these products evolved throughout the project. These changes directly impacted information hierarchy, the customer checkout flow, and overall content requirements. As a result, the work required a careful balance between advocating for UX best practices and accommodating the needs and priorities of key stakeholders.

APPROACH

We designed for two primary user types: existing customers seeking resources or support, and potential new customers evaluating the product. For existing customers, I introduced in‑page navigation to quickly direct them to the most relevant sections. Within the Details section, content is organized by type and structured for easy scanning, with high‑value items—such as Latest Versions and Resources—given visual prominence.

For new customers, the landing overview page focuses on key highlights and core product features. The use of in‑page navigation allows content to remain minimal and approachable, preventing users from feeling overwhelmed while still providing easy access to more information‑dense content when needed.

OVERVIEW LANDING PAGE

OVERVIEW LANDING PAGE

Provides a high‑level introduction to the product for potential customers, while offering clear pathways to more detailed resources for existing customers.

MODULAR DETAILS

MODULAR DETAILS

Designed to accommodate the varied information needs of different software products. Flexible modules allow each product to present its content appropriately while maintaining a consistent overall structure.

A screenshot of a mobile view of the software details page interface with the tab navigation comonent open

TABBED CONTENT CATEGORIES

TABBED CONTENT CATEGORIES

Organizes all key product information into a single, visible interface. Competitive analysis showed that navigation patterns relying heavily on breadcrumbs caused users to lose context and struggle to return to relevant product content; tabs helped keep users oriented and reduced friction.

REFLECTION

During the project, stakeholders occasionally made decisions that appeared to affect only small aspects of the design but ultimately had broader implications for the overall user experience. As additional content was introduced, the in‑page navigation grew increasingly complex. In hindsight, more intentional content planning would have supported a clearer structure; I would have recommended a collection of related product and resource pages rather than consolidating everything into a single page with deeply nested navigation.

Additionally, the template remained under scrutiny for nearly a year before being officially released. If I were to approach this project again, I would advocate for a more iterative release process—launching earlier and refining the design based on real user feedback, rather than relying primarily on stakeholder input. This approach would have allowed for more informed improvements and reduced long‑term friction.