Michela Frecchiami

When your e-commerce site needs updating, the instinct is often to go big—to completely redesign the site and transform every aspect of the user experience. But is that always the right choice? Whether you're addressing performance issues, implementing new features, or adapting to market changes, the scope of your website update deserves careful consideration. 

This brings us to a critical question: Should you opt for a complete website redesign, or would a strategic refresh better serve your goals? The answer isn't always as straightforward as it might seem, and it rarely depends on aesthetics alone. Let's explore how these two approaches differ and when each might be the right choice for your business.

## The Difference Between Redesign and Refresh

A **website redesign** represents a fundamental transformation of your digital presence. Think of it as rebuilding a house from the ground up—you're not just changing the appearance, but restructuring the entire infrastructure, electrical systems, and layout to meet completely new living requirements. In the e-commerce context, this means reconsidering every aspect of your digital architecture, from your technical stack to user flows and business logic.

This solution can be considered when a brand's goal is scaling and it needs complex features that its current platform can't support.

A **website refresh**, conversely, is like a strategic home renovation. You're keeping the solid foundation and basic structure while modernizing specific areas to enhance functionality and aesthetics. For e-commerce, this means targeted improvements to specific aspects of your site while maintaining your core digital infrastructure.

This fits better when an online store is experiencing challenges with conversion rates, for example. In this case, efforts are focused on navigation and checkout flow optimization.

## When to Consider a Complete Redesign

Before diving into real-world examples, it's crucial to understand that successful redesigns depend heavily on meticulous implementation planning. A redesign requires careful orchestration, starting with less critical features, conducting thorough A/B testing, and maintaining rollback capabilities throughout. Content migration must be comprehensive, with clear strategies for URL restructuring and template testing.

Most importantly, timing is everything: avoid peak seasons, build in adequate testing periods, and maintain parallel systems until the new website proves itself.

These implementation principles have guided several successful transformations:

- **Business Model Shifts**: Take [Caraway](https://www.carawayhome.com/)'s expansion from cookware to a full home goods brand. This wasn't just about adding new product categories—it required rethinking the entire shopping experience, from site navigation to bundling options and product education. The shift demanded a more flexible e-commerce experience, ensuring that customers could seamlessly explore and purchase across multiple home categories. This called for a complete digital transformation to support their growth.
- **Technical Limitations**: MeUndies' [migration](https://nebulab.com/case-studies/meundies) from a custom platform to Shopify Plus exemplifies this scenario perfectly. Their existing infrastructure couldn't scale with their growth, necessitating a complete platform change.
- **Market Repositioning**: [Ritual](https://ritual.com/shop/multivitamins)'s evolution from a women's vitamin brand to a comprehensive wellness platform required a comprehensive redesign. Their platform needed to support multiple product lines across age groups and genders, integrate educational content, and provide personalized supplement recommendations—transforming their site from a single-product store into an evidence-based wellness destination that builds trust through transparency.

<figure>
	<img src="https://cdn.sanity.io/images/kqgmf0g2/production/9d2043572c625dd8b1bd225915ffacdb77894d2b-1600x1052.jpg?fit=clip">
  <figcaption>MeUndies' recent replatform supported its growth while uncovering new opportunities to enhance the user experience.</figcaption>
</figure>

## When a Strategic Refresh Makes More Sense

A successful refresh hinges on precise, measured implementation. The key is prioritizing changes based on impact versus effort—focusing on high-traffic pages and addressing known pain points first. Updates should be modular, allowing for independent testing and controlled rollouts through feature flags.

Throughout the process, analytics should guide every decision, with clear metrics tracking each change's impact against the baseline. Brand consistency remains paramount, with new elements seamlessly integrating across all devices.

Here are a couple of relevant examples:

- **[LAKE](https://lakepajamas.com)**'s approach to accessibility improvements perfectly illustrates these principles. Faced with compliance requirements, they turned a potential challenge into an optimization opportunity. Their focused refresh improved mobile usability and conversion rates without disrupting their core experience.
- **[Lilac St](https://lilacst.com/)**'s refresh follows the same measured approach. Rather than overhauling their entire experience, it introduced strategic updates like the gamification program that [increased its subscription revenue by 72.7%](https://www.magnetmonster.com/blog/10-dtc-brands-growing-subscriber-revenue-with-loop-gamification). The company incentivized bulk purchases with discounts, encouraging higher spending per transaction.

<figure>
	  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/7db895b078be1b2e0d65a3f4159bdf281d083af9-1600x1052.jpg?fit=clip">
  <figcaption>Lilac St.'s engaging interface allows users to create custom bundles while encouraging them to increase quantity for greater savings.</figcaption>
</figure>

## Making the Decision: A Practical Framework

Every e-commerce platform has its own mix of technical debt, business goals, and customer expectations. While there's no one-size-fits-all solution—budgets and timelines often dictate decisions—we can use a structured framework to navigate this critical choice.

### Step 1: Identify Objectives and Pain Points

Start by defining what you want to achieve with your website and ask these key questions:

* Are you aiming to enhance user experience?
* Does your brand image feel outdated?
* Is mobile responsiveness an issue?
* Are conversion rates lower than expected?

Leverage user feedback and analytics to identify underperforming areas. Your audience's needs should drive your decision—if the current site no longer aligns with their behavior and expectations, a redesign may be necessary.

### Step 2: Analyze Current Performance

Conduct a thorough audit of your website, focusing on:

* **User Experience (UX):** Navigation, checkout process, and friction points
* **Mobile Responsiveness:** How well does the site function across devices?
* **Content Effectiveness:** Identify high-performing pages vs. drop-off points

At Nebulab, we know how crucial design audits are in this process—we conduct them regularly as part of our services. If you're looking for expert insights into your site's performance, [we'd be happy to help!](https://nebulab.com/contact-us)

If only specific elements need improvement, a refresh might be enough. If multiple areas underperform, consider a redesign approach.

### Step 3: Test and Implement Changes

Finally, whatever path you take, adopt a structured implementation approach:

* If opting for a redesign, outline the project scope, budget, and timeline. Prioritize changes that impact user experience and business outcomes.
* If choosing a refresh, focus on quick wins like visual updates and small UX improvements.
* Run A/B tests before implementing major changes to minimize risks and ensure that decisions are based on user behavior, not assumptions.

By following a standardized process, you can confidently decide whether a refresh or full redesign is the best path for your e-commerce site.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/91bfb81b07113b772fa1f02cd5745be38aa34beb-1600x1052.jpg?fit=clip">
  <figcaption>These cards contrast when choosing a refresh vs. redesign. Timelines are indicative and may vary based on project scope.</figcaption>
</figure>

## Execution Is Key

Whether you choose a redesign or a refresh, success lies in thoughtful execution. For redesigns, phased rollouts, rigorous testing, and smooth transitions are key. For a refresh, focus on quick wins like visual updates and small UX improvements while maintaining clear measurement protocols.

Ultimately, your decision should be guided by business objectives and data, ensuring that changes improve both the customer experience and performance. A successful transformation isn't just about making your site look different—it's about making it work better.

If you're unsure wheher your site needs a redesign or refresh, [feel free to reach out!](https://nebulab.com/contact-us) We'd be happy to hlep you navigate this decision and follow through!

Website Redesign vs Refresh: A Guide for E-commerce Brands

Davide Di Stefano

In July this year, we [announced Sprout](https://nebulab.com/blog/announcing-sprout), our product gifting app.

Sprout allows brands to efficiently run product gifting campaigns without going crazy: rather than spending days buried in Instagram DMs and spreadsheets, brands can just connect their Shopify store, set up a gift link, and share it with the influencers they want to partner with. Influencers can use the link to select the product(s) they wish to receive and enter their shipping information, and an order appears in the brand’s Shopify dashboard, ready to be fulfilled by the brand’s team. It's as simple as that!

After beta testing our MVP with some customers for a few months, we got to work on our public launch. We had a pretty ambitious goal: we wanted to have a brand and website ready to go in just two weeks so we could start marketing the app to the general public.

In this article, we’ll show you how we met our deadline by following a strict design review process and using the right tools.


## Solid Branding Means Fast Execution

Branding is much more than having a good-looking, distinctive logo. For us, branding is about capturing the identity of a company or product, and then translating that into a visual foundation that can be used across the product’s properties. **A solid brand allows you to move quickly and confidently,** no matter what kind of digital or physical experience you’re working on, and it makes you immediately recognizable by prospective and existing customers.

As always, we started by defining a compelling positioning statement and researching Sprout’s target audience and competitors. Our goal in this phase is to understand what the brand stands for: is it a disruptor, fun and playful? Or is it the real deal, serious and professional? How does the brand relate to consumers? How does it relate to its competitors? Once we had defined and finalized all these elements, we began translating them into a visual identity.

For the visual identity, we vowed not to exceed three iterations–our goal was to have the final version ready in one week, and then move on to designing and implementing the website.

In our first round, we developed four brand directions, exploring different logos and mood boards representing various archetypes or styles.

![](https://cdn.sanity.io/images/kqgmf0g2/production/8b77501dac7372a712734a4fed12462044b4ed42-1600x1052.png?fit=clip)

This was super helpful in defining the visual communication we wanted to adopt, including the color palette and font combinations.

In the second round, we mixed and matched elements from the different proposals, settled on a logo and overall mood, and then started exploring different color palettes and font families.

![](https://cdn.sanity.io/images/kqgmf0g2/production/579f077aec483366d857b9cd0380336eae5ad380-1600x1052.png?fit=clip)

In the final round, the work was nearly complete, and most of the decisions had been made. The rest was a matter of refining a few aspects of the color palette, typography, iconography, and overall visual style so that we could more easily reference them in our subsequent work.

![](https://cdn.sanity.io/images/kqgmf0g2/production/8f86d558e7b993531331a848a5f6ab070a051197-1600x1052.png?fit=clip)

At this point, we had established a brand identity and created a style guide to guide us while implementing the brand. We could finally focus on our website.

## Going From Figma to Finished Website in One Click

Figma has been our design tool of choice since its release, so it’s no surprise we also used it for Sprout. We created a quick landing page showcasing the product’s capabilities and most common use cases and allowing brands to request a demo. **Because we had defined the brand’s visual identity and UI fundamentals in advance, the original website design only underwent minimal modifications before being approved for publication.**

After finalizing the design in Figma, we typically hand it off to the engineers, who build it using whatever frontend stack has been adopted. This process leads to highly polished and sophisticated UIs but also takes more time as the engineers need to translate the designs into code and test and deploy the result.

With our two-week deadline, we needed a radically different approach: ideally, we wanted to go from Figma to the final website in one step. We also needed the ability to quickly make visual and content changes to the website after the initial publication to accommodate whatever feedback we received from existing and prospective customers.

![](https://cdn.sanity.io/images/kqgmf0g2/production/94b7e8f319893dccc16e45d1b2161346fb1b3b5b-1600x1052.png?fit=clip)

We evaluated different [content management](https://nebulab.com/blog/ecommerce-content-management) options and ended up using [Framer](https://www.framer.com/). Here’s why:

* As long-time Figma users, the Framer UI feels very familiar, and the app is incredibly user-friendly.
* Framer allows importing Figma designs by simply copying and pasting the artwork, which is game-changing for a fast-moving team.
* The Publish feature is straightforward and blazing fast: we purchased a domain and were ready in minutes.
* Framer integrates with MailChimp, Formspark, and other tools that we use for marketing and lead generation, which further reduces development time.

After importing our designs into Framer, we only had to make a few adjustments to some elements, add some animations, hit Publish, and _voilà!_ Our website was online and available to the world in one week and with zero lines of code. Not only does it require zero maintenance, but anyone with access to the Framer project can easily make content and visual changes to the website.

Finally, we were impressed with the site's performance: even though we didn’t spend time optimizing it, it got top scores in all areas of Google’s PageSpeed Insights benchmarks–hooray for SEO!

![](https://cdn.sanity.io/images/kqgmf0g2/production/b708b957da1fd024a0ec80ac742a0da740766815-1600x1052.png?fit=clip)

## Use Guidelines and Constraints to Your Advantage

While an established work process improves your team’s long-term productivity, it can sometimes hinder your goals and even impede learning. Setting an arbitrary deadline forced our team to think outside the box and temporarily move away from our typical design-development handoff process. This allowed us to go from zero to a fully established brand and website in under two weeks. 

Of course, none of this would have been possible without a solid brand in place. By establishing a clear visual identity beforehand, we minimized the communication overhead while creating [Sprout’s website](https://getsprout.app), drastically improving our turnaround time.

We will probably re-implement Sprout’s website with a more sophisticated tech stack at some point, but for now, we’re thrilled with Framer’s ease of use and flexibility. In fact, next time we do something like this, we might even try designing the website right into Framer rather than going through Figma–who knows, we might be able to shave a couple more days off the timeline!

If you’re an e-commerce brand and would like to adopt a similar approach for your next landing page or product drop, feel free to [reach out!](https://nebulab.com/contact-us) We’d be happy to help.

The Nebulab

Website Redesign vs Refresh: A Guide for E-commerce Brands

How We Branded Our Latest Product in Just Two Weeks