Problem statement

As an early-stage startup, speed is crucial. We’ve added numerous features, gained better customer insights, adjusted pricing multiple times, and conducted various product-led growth experiments. However, our current design and engineering processes are causing inconsistencies and redundant efforts. Launching new product verticals has become challenging due to navigation and layout constraints.

Before diving into a redesign, we’ve outlined key success criteria. This ensures our redesign addresses critical needs and resolves root issues effectively.

Definition of success

1. Enable easy addition of three new verticals.
2. Ensure our new layout accommodates future expansions.
3. Establish design processes to maintain consistency across product verticals.
4. Make key page components like Page Header, filters reusable and scalable for testing additional features within verticals.

New layout

Our current navigation and layout have become quite crowded. As we’ve expanded, we’ve gathered a wealth of data on feature popularity. By analyzing simple reports in June, we’ve been able to focus on what matters most.

Our previous layout and navigation:

Our new layout will accommodate additional verticals we currently have and those we plan to add in the future.

We can roll out updates gradually with this layout:

1. Release 1: Introduce new navigation while leaving current pages unchanged.
2. Release 2: Develop a new Page Header component and implement it on all pages.
3. Releases 3-10: With most components in place, we can start updating content areas on each page step by step.

Home page

Now

Before

My community

As our data grows, we’re creating a unified creator profile with all their social networks and adding custom attributes for creator records. These changes will lay a solid foundation for scalability and new features like automations and custom workflows.

Before:

After:

Reports

As we keep adding valuable metrics to our platform, our Reports page is getting really long. We’ve decided to prioritize showing the most important ones first. Customers can easily add any other metrics they need later. By using saved Views, they can create custom reports for each campaign and report type without starting from scratch every time.

Before

After

Design system processes

To be added.

Conclusion

Redesigning a product can be challenging because you’re not adding new features but altering the behavior of existing ones. It’s crucial to have a clear understanding of why you’re making these changes. Despite this, it’s essential to proceed when your design and engineering systems have reached a critical point that impacts the organization’s productivity.

If you’re keen on doing it, be sure to:

• Use the design system and Storybook. Involve key stakeholders and engineers from the start.
• Identify key product issues within scope to assess new ideas objectively.
• Review the existing design for inconsistencies. Focus on building and reusing key elements like atoms, molecules, and organisms across many pages.
• As the product expands, maintain consistency to prevent duplicated support work. Establish simple design system procedures. Since you’re already redesigning, focus on enhancing the UI and rectifying processes causing component issues.
• Conduct market research regularly to guide product expansion and scalability.