How to decide how deep your UX redesign should go

Everything is evolving, including hardware components, devices, business processes, branding guidelines, and even UI/UX design principles. Designers occasionally redesign their digital product interfaces based on these evolving factors to stay competitive in the software industry and serve users better. Redesigning digital products is possible from small UI tweaks to whole product reinvention, and choosing the right UX redesign level is crucial.

Designers can plan five redesign levels, aligning with the well-known five UX layers from the surface layer to the strategy layer. The redesign effort, time, and cost drastically increase when we go deeper into the UX layers, but deeper-level redesigns eventually deliver well-refreshed, up-to-date, highly usable designs by pushing the next redesign need in years. How to select the right UX redesign level that optimizes cost but delivers good results?

Let’s explore five UX redesign levels and understand how to select the right redesign level!

Why should you redesign digital products?

Having the exact same product UI design without establishing a single redesign process till a company decides to end the product is technically possible, but why do every tech company decide to redesign products at least every two years?

Redesigning a product interface is a technique to refresh a product by adhering to evolving design trends/principles, and it is also a great opportunity to solve design debt by fixing usability issues.

Here is the summary of UX redesign benefits:

• Increases competitiveness — A visual redesign, usually followed by a major business rebranding, is a great marketing opportunity to attract new users with a fresh look and compete with other similar products
• Improves business reputation and trust — Digital product interfaces gradually become outdated with new technologies, device usability enhancements, evolving UI/UX principles, and changing user expectations. A redesign helps an organization maintain its reputation and trust through refreshed, improved, modern product designs
• Increases usability and quality — Designers enhance visuals, user flows, and product structure with redesigns by eliminating accumulated design debt, so a well-planned redesign, regardless of its level, always guarantees better usability and overall product quality
• Improves customer satisfaction — A redesign is a great way to address changing user expectations. When you occasionally uplift your design’s feasibility to match user expectations, the overall customer satisfaction undoubtedly increases

Levels of UX redesign

Any digital product design can be divided into five hierarchical layers, known as UX layers, so UX redesign levels can also be mapped with these layers, creating five total UX redesign levels, as depicted in the following diagram:

Let’s explore each UX redesign level in depth to learn how to plan a cost-effective redesign process that delivers better results:

Surface redesign

Surface redesign happens only within the surface UX layer, which presents the final look of the digital product with colors, typography, imagery, and other visual aesthetics. Designers can use surface-level redesign to refresh the overall visual theme by adjusting only surface-level properties without changing the fundamental UI screen composition:

Examples

Medium often does visual enhancements and adjustments by keeping their core design principles stable. Here is how Medium’s design team refreshed the hero section of the homepage with a surface redesign by updating labels, some major styling details, and visual aesthetics:

 

Here’s another example. GitHub updated its intro section design in 2025 to reduce clutter and highlight primary call-to-action buttons:

 

Some other surface redesign examples:

• Using a futuristic, high-quality icon set by replacing the previous outdated icon set in an e-commerce app
• Fixing the blending color issues in the foreground and background colors of an online book-reading app to improve readability
• Updating logo, typography, colors, and business-related wording in a music player app after a major company rebrand

Advantages

• Lesser effort and cost — Surface redesigns can be done faster since the redesign process happens only within the top visual layer of the digital product, usually improving the visual look with better colors, labels, and imagery
• Refreshes without side effects — A well-planned, proper surface redesign can refresh the product without affecting usability, so surface redesign is a great way to refresh the product occasionally for users
• Marketing-friendly — Surface redesigns are usually associated with rebrandings or occasional visual refreshing, so the organization can use the visually enhanced digital product for advertising to attract new users

Disadvantages

• No significant usability enhancements — Surface-level enhancements can improve usability if the previous UI is poorly designed, but surface redesign on a well-designed product typically brings no significant usability enhancements, as it only refreshes the visual look
• May not satisfy all users — Surface redesign refreshes the product and gains user attention, but may not fully satisfy users who expect more usability enhancements. Besides, some users may not like the new look’s color selections and other visual properties

When to use

Surface-level redesign is usually mandatory after business rebranding to apply a new visual theme. Some product design teams do occasional surface redesigns to fix visual design debt (i.e., consistency issues), adapt to new UI design trends, or just to refresh the UI without a critical need

Skeleton redesign

Skeleton redesign happens within the skeleton UX layer, which defines the basic appearance and user interaction points of the digital product’s screens. Designers can effectively improve the usability of a single screen, multiple screens, or a specific product state by modifying the presence of UI elements by adjusting the skeleton layer. This redesign also affects the surface UX layer:

Examples

Meta did a major redesign of the whole Facebook platform in 2020. Here is how a skeleton redesign on its homepage simplified its UX:

Facebook homepage in 2021 (till now):

Some other skeleton redesign examples:

• Improving the product details page of an e-commerce website by adding a section that displays highlighted product details, i.e., screen size, resolution, display type, etc, of a TV, replacing the previous simple bullet list in the product description
• Improving the complexity of a form in an enterprise system interface by using better form-control grouping

Advantages

• Cost-effective usability enhancements — Modifying the skeleton layer won’t affect the entire product structure, so skeleton redesign helps designers improve the usability of selected individual screens without spending time on restructuring the screens of the whole product
• Good user satisfaction — Unlike surface redesigns, skeleton-level redesigns offer a chance for designers to improve isolated user flows in each product screen, satisfying users who expect usability enhancements
• Fair freedom to innovate — Skeleton redesigns offer the freedom for UI/UX designers to start again with low-fidelity screen designs and continue the usual UX process. Skeleton redesign doesn’t go beyond product screens to the whole product structure, but lets designers do fair skeleton-level improvements, considering cost and effort

Disadvantages

• Higher cost compared to surface redesign — Skeleton redesign typically involves re-creating low-level designs, so it requires higher effort and cost compared to the simple visual refresh in surface redesign
• Limited usability enhancements — Skeleton-level redesigns don’t involve updating the product structure, usually the number of screens, and navigation structure, so designers can only do usability enhancements by updating each screen’s fundamental interactive segments within the UX skeleton layer level

When to use

Designers can initiate skeleton-level redesigns to deliver identified usability enhancement requirements that don’t require product structure updates. Unlike surface redesigns, designers typically don’t do skeleton redesigns unless there is an identified user pain point in an existing user flow of a particular screen.

Structure redesign

In structural redesign, designers improve the structure UX layer, which defines a blueprint of the whole product with interconnected screens, navigation, and overall information organization. Structural redesign involves improving the whole product structure or part of the product structure with different low-fidelity prototypes, so it gives designers full freedom to fix major usability issues in accumulated design debt. This redesign also affects the skeleton and surface UX layers:

Examples

• In a social forum app, improving the registration and getting started flow by replacing the long, single-page registration process with a multi-page, step-by-step onboarding process
• Restructuring the official website of a digital product development company by adding intermediate pages for service types like software development, AI, and then creating separate pages for sub-services like mobile app, desktop development, Chatbot development, AI tool integration, etc.

This comprehensive article explains some structure redesign examples of popular helpdesk website designs.

Advantages

• Flexible usability enhancements — In structural redesign, designers have the full freedom to innovate new product structures or improve the existing product structure by adding/removing screens or navigation, so designers have higher flexibility to serve users better
• Higher user satisfaction — Updating information distribution and navigation fixes usability issues at the structural layer, the deepest UX layer that defines the final product surface, working as a blueprint, so product-structure level redesigns typically highly satisfy users with a better look and feel
• Higher innovation flexibility — Skeleton-level design innovations are limited to product screens, but structure redesigns touch the whole product structure, offering higher innovation flexibility to improve look and feel

Disadvantages

• Higher cost compared to skeleton redesign — Modifying the product structure requires running the usual UX process for creating new high-fidelity prototypes for a part of the product or the entire product, so structure redesign requires more effort and cost than skeleton redesign
• No product scope changes — The structure redesign offers full flexibility to improve a product from the look and feel aspects by improving existing user flows, but it doesn’t involve expanding or shrinking the product scope with new features

When to use

Designers can initiate structure redesigns to implement major usability enhancements that require adjusting the whole product structure, introducing new screens, removing excessive screens, redefining navigation, and improving information distribution across screens.

Scope redesign

Scope redesign modifies the scope UX layer of the digital product, which creates boundaries for the whole product’s strategy. Designers initiate scope redesigns to adjust the product scope by adding or removing new major features that go beyond the initial scope of the product:

Updating the product scope can trigger updates for the existing product structure and other outer layers or introduce new isolated product extensions (e.g., a module in an ERP system) based on the modularity of the product and the nature of the scope layer modification.

Examples

Patreon recently introduced a new redesign with a new promotions module that lets creators manage offers, discounts, and gifts under a scope redesign:

Moreover, Patreon also did a scope redesign in the post creation section by letting creators sell products using the same post creation area:

Some other scope redesign examples:

• Extending a manufacturing-focused ERP system by adding a fully-featured HR management module
• Adding a short video sharing feature for a photo-sharing app

Advantages

• Competitive advantage — Scope redesign with new, attractive features helps the organization compete with other products and cover niche user bases using the same, extended product without investing time building separate products
• Increased conversion rate and revenue — Newly introduced competitive features can attract visitors and turn them into lifelong product users, increasing the conversion rate and product revenue
• Opportunity to simplify products — Adjusting the product scope is not solely about adding new features; designers can improve products by removing unwanted features and enhancing existing major features, too
• Innovation flexibility, higher user satisfaction — Working outside of the current product scope creates room for new innovative ideas that eventually lead to higher user satisfaction

Disadvantages

• Higher cost compared to structure redesign — In most practical design scenarios, adding a new major feature requires redefining the whole product feasibility with new scope extension designs, adjusting, refactoring, or even rewriting underlying product development codebases and extending architectural components, so the scope redesign effort and cost grow higher compared to structure redesign
• Instability in the original product image — Scope redesigns change the product feasibility, so users can get different answers for “What this product can do?”, “How does this product work?”-like questions during the product lifespan, creating instability in the original product image

When to use

Product design teams can invest in scope redesigns if the new design requirements go beyond the current scope of the product, or when they identify feature overflows to reduce excessive features by prioritizing and grouping major ones.

Strategy redesign

The strategy UX layer is the topmost layer of every digital product, which puts the foundation for the entire product by defining primary goals:

Designers can do strategy redesigns by modifying the fundamental project idea and reinventing the digital product by literally creating a brand new product with a different UX for the same or a different user base. This redesign affects all top UX layers.

Examples

The Atom Shell project initially implemented fundamental features, including native UI segments, especially for the formerly popular Atom code editor. Earlier, the Atom shell was a fundamental component hiding behind the Atom code editor:

In 2015, the development team changed the Atom Shell project’s strategy by taking it out of the Atom editor, inventing the most popular cross-platform desktop app development framework, Electron:

Some other strategy redesign examples:

• Turning a less-popular simple calendar app into an agenda app under a different design, but using the previously developed component library
• Turning a dying but formerly-popular standalone content writing software into a web-based file hosting and content writing platform under the same brand name

Advantages

• Product reinvention — Strategy redesign offers full freedom to do anything in the redesign process, even changing fundamental project goals. Designers can reinvent a brand-new product with a strategic redesign to replace the previous product fully
• Beneficial to the business — Strategy redesign works better than scope redesign from the revenue generation perspective  —  product teams can effectively adjust the product strategy layer to save organizations from product failure consequences
• Marketing-friendly restart — Strategy redesign helps restart the marketing process with new marketing strategies, so the product marketing team can explore new ideas and opportunities, and create a fresh journey for the new product, usually getting rid of negative feedback received for the previous product

Disadvantages

• Redesign option with the highest cost — Since the strategy layer modifies the whole product, including the primary purpose, designers have to re-run the entire UX process for a brand new product, starting from the UX ideating phase, so the strategy-level redesign comes with the highest redesign cost
• Userbase changes — Adjusting project goals with strategy redesign changes the purpose of the digital product. As a result of project goal changes, the existing user base of the previous product may exit without using the new product
• Affects brand, business image stability, and business reputation — Strategy redesign usually discontinues an existing product and introduces a new product for users. This process can negatively affect user trust and business reputation, and the stable business image that the previous product created

When to use

If the scope redesign fails or the product design team can forecast no significant ROI from the planned scope redesign, the product team can initiate a strategic redesign to save organizations from costly product failure incidents, usually replacing a dying product with a new one.

Why should you select the optimal redesign level?

If you select the optimal redesign level, you can highly satisfy users and the organization’s expectations by optimally using the budget. Otherwise,

• If you select an outer UX layer other than the optimal layer, you’ll instantly face user satisfaction issues, and the suboptimal redesign triggers a need for another redesign soon
• If you select a deeper UX layer other than the optimal layer, you’ll overrun the budget, waste resources, and make the product unstable with unnecessary UX upgrades, affecting overall organizational growth

Based on the depth of the optimal redesign level, selecting the wrong redesign level either increases design debt or wastes resources. User frustrations, new design requirements, and rebranding needs should be solved at the right UX layer, ethically, optimally spending the product redesign budget, and effectively using resources.

Optimal vs. suboptimal redesign decision examples

Let’s understand further about the right and wrong UX redesign levels with practical redesign scenarios and the consequences of each redesign decision:

Scenario	Optimal redesign	Suboptimal redesign
Designers attempt to fix usability issues that spread across many screens of a digital product, e.g, productivity issues in choosing, customizing, and ordering a food item in a food ordering app	Plan for a structural redesign that reduces the number of screen shifts by rearranging information differently across screens Result: Improved usability in the particular user flow	Plan for a skeleton redesign to improve workflows within screens without changing the information distribution across screens Result: Accumulates design debt and fails to fully satisfy users
In a stable product that maintains a high usability score, designers need to represent the company’s new branding details, like the new logo, color scheme, etc.	Plan for a surface redesign with the new style guide, which was updated based on the recent rebranding details Result: A visual refresh for organizational rebranding under lesser redesign budget	Plan for a skeleton redesign by using a new component library Result: Selecting a deeper redesign level unnecessarily can overrun budgets and break product interface stability
An organization tries to save a dying product that has lost almost all users due to the lack of research in the initial UX process phases	The fundamental idea is failing, so plan for a strategy redesign Result: A new reinvented product that can start fresh with a new marketing strategy for a new user base	Planning a scope redesign to eliminate failed features and improve usable ones Result: Wastes resources for the scope redesign, and the majority of users abandon the product since the product image is already failed

Tips for selecting the right redesign level

Selecting the right redesign level for a specific design requirement or idea can be challenging, but you can do so with the following tips:

• Accumulated design debt and overrunning budgets have severe effects, so take time to properly study design requirements and identify related UX layers without rushing toward a quick decision. A good UX redesign always starts with a proper evaluation of user feedback and requirements
• Redesign doesn’t mean you’ll have to redo things. Designers can reuse existing components, patterns, style guides, and other design materials, e.g., using the same component library and patterns under a structural redesign process. So, consider the possibility of reusing design materials if you struggle to select the optimal redesign level due to tight budgets
• You are not limited to only one redesign level by freezing other outer layers. You can effectively and productively solve some design requirements by merging redesign levels, e.g., initiating a skeleton + surface redesign to improve grouping elements and modernize elements, scope + structural redesign to introduce new features, and also improve user flows of existing features
• Analyze competitors, always be up-to-date with new design trends, so you can fix usability issues at the right UX layer with up-to-date design techniques, e.g., doing a skeleton redesign to include a modern hero section
• Focus on three things while selecting the right redesign level: usability, cost, and side effects

Conclusion

In this article, we learned how to select the right redesign level that minimizes cost but highly satisfies user requirements and business needs (i.e., rebranding). The effort and cost increase when we go deeper down the UX layers, but deeper UX layer redesigns offer more design freedom and drastically improve usability. However, choosing a deeper design level for every usability enhancement requirement is not wise since unnecessary UX layer level modifications waste resources, makes product interfaces unstable, affecting the organization’s profits.

Choosing the right UX redesign level, focusing on usability, cost, and side effects, always delivers better results, satisfying users, organizational needs, refreshing products, and extending product lifespan.

The post How to decide how deep your UX redesign should go appeared first on LogRocket Blog.

 

This post first appeared on Read More