Streamlined Layout Generation for Design Efficiency

User-Centric Layout Variation

Streamlining website layouts for a cohesive user experience

As a senior product designer, my goal was to create a website builder that offered users a wide range of layout options while avoiding overwhelming them with too many choices. My team and I worked to diagnose the problems with the existing website-building product by analyzing user feedback and discovered that the layout patterns could be improved.

Responsibilities
  • Conducting UX research to identify user needs
  • Developing a layout pattern expansion strategy
  • Designing layout patterns and UI
Carefully tailored layout

User-Centric Layout Variation

Users overwhelmed by presenting too many resembling layout samples.

Our user research revealed that users in the beta testing phase found the layout patterns too similar and overwhelming. We took the following steps:

arrow_forwarda personalized and elegant website that met the user's needs and provided a cohesive user experience.

  • Carefully tailored layout options to allow users to build their unique websites with their preferred design elements
Challenge:
layout problem
Process:
Gather, create and categorize the layouts.

1. Gather, create and categorize the layouts.

Derive all the possible layouts

2. Derive all the possible layouts from each category.

Grouping the layouts

3. Grouping the layouts capable of using the same options.

layouts for representation

4. Decide to use one of the most common layouts for representation, one from each group

Image
Image
Image
Image
Image
Image
Image
Image
Solved:
layout problem

Standardized Solutions for Engineers

Create standardized solutions for the engineers to avoid tedious work.

In addition to meeting the user's needs, we also aimed to create standardized solutions for our engineers to avoid tedious work. The layout variation needed to be rectified and re-established since the existing patterns were redundant and missing advanced functions. To achieve this, we followed these steps:

arrow_forwardIncreased reuse and productivity, allowing time to work from the overall perspective of the product.

  • Minimized the redundant pattern by adding advanced options.
  • Cleaned up the existing patterns and included the missing ones.
  • Figured the simplest method to display the fewest yet most varied layout patterns. Instead, I assembled scalable alternatives for each layout.
Challenge:
layout problem
Process:
  • 01. Decided which options each layout would use.
  • 02.Distributed and checked if the components could be used for each layout regardless of the category.
  • 03.Made components using foundational elements.
  • 04.Assembled and modulized the components, categorized the modules and handed them off to the engineers.
  • 05.They used modules for the layout templates.
algorithm_engin_process
algorithm_engin_process
algorithm_engin_process
algorithm_engin_process
Solved:
layout problem

Takeaways

Overall, our streamlined layout generation approach for website building led to a more efficient design process, enabling us to focus on the user's needs while providing a cohesive and personalized experience. By creating standardized solutions for our engineers and carefully tailoring layout options for users, we successfully optimized the website building experience.

  • The presentation for users got less boring but broad and more varied. The layout variations expanded about 5 times.
  • Also, unifying the advanced layout option pattern reduced development time. Saved time and money pleased the product owner.
  • Brand identity and usability were maintained.
Increased reuse and productivity

Thank you!

Prev.Case study

Next.Case study

TOP