Loading

Delivering 40+ new website templates for various business verticals

Templates provide users with a starting point

Being a cost-effective solution, Yola is easy for people with zero experience to create a complete website in hours. Users can make professional-looking sites with a collection of ready-to-use blocks and free customizable templates.

Our design team crafted each template design to match specific business verticals to be customized to fit the user’s brand. Each template design supports all major content types, including galleries, contact forms, e-commerce (Ecwid store), and more. All template designs are responsive.

Context / Architecture / Design system / UI design / FeaturesReflection

/Overview

Getting ready for an MVP launch

In getting ready for the Sitebuilder+ launch in March 2020, we needed to prepare a bunch of website templates to cover multiple business niches in the short term. We had just three months for research, design, and development. You read the detailed description of this MVP launch here.

Prompting business owners to make their online presence in a simple and meaningful way

While creating a website from scratch sounds daunting for people without relevant experience, using a template can serve as a helpful framework to start with. Users can choose a template specifically designed for selling online, showcasing artwork, or service providing – according to their goals. Our mission was to deliver business value for users in a sufficient variety of templates that cover specific business verticals to engage users to activate and avoid user churn.

/Context

Keeping simple structure in mind

For effective template building, we used this formula: base template + theme + sample = site template and supported it on the infrastructure level.

/01

Base template

We decided to design and develop a new multipurpose base template that would support all available features and customization options. This new theme allowed us to optimize and speed up the template's delivery and reduce maintenance costs. It also endorsed product consistency and scalability.

/02

Theme

Color palettes

We selected interchangeable color palettes that meet all accessibility parameters for each template. Also, we worked on a color palette algorithm that allows users to set their custom color scheme, automatically adjusting fonts and buttons, ensuring content legibility always stays intact.

Font pairs

We predefined a set of font pairings that share an overarching theme yet have a pleasing contrast. All selected fonts work together, and they are interchangeable across the templates.

Theme decorations

Keeping up with our mission of empowering SMBs to create nice-looking websites, we added theme decorations to make a unique look&feel for templates. Template themes provide users with the most suitable solutions for their website design and more customization options to reach the desired result.

/03

Sample

All the templates were pre-filled with sample data (a generic text sample, generic images) to show users how templates represent a specific industry niche. This was also meant to help users to fill their websites with custom content.

We worked on a design system to reduce handoff time

In collaboration with another designer, I worked on the design system for the templates. The complex nature of the template builds necessitated more than 150 block variations. To maintain consistency and ensure efficient design to dev handover, we developed a modular design system based on reusable components and their states. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user. These components are the base for blocks and page layouts.

Build design system screens

Designing 30+ responsive website templates for SMBs

All Latitude template designs offer an extensive library of template-specific content blocks, allowing customers to craft an online presence that matches their vision of the business. Users can choose a vertical-specific or generic site template (default) and customize it with the editor's code-free design tools. All templates were strategically researched, conversion-optimized, and tailored for different industries.

I prepared the design for 30+ templates in different niches for service providers, online sellers, non-profits, showcasers, etc. Here are some of the templates I designed:

Ensuring users' websites are professional-looking and visually appealing

Design automation

Users' website changes are automatically adjusted to make the design consistent and accessible. Design automation helps reduce user errors and time spent adjusting site elements settings. It includes automatic block color scheme changing depending on a custom background image, automated overlay application, and font color adjusting to increase user for making user content legible, etc.

I worked on the following:

  • Design automation rules alongside another designer
  • Made sanity-check for design automation algorithms
  • Created a notification component for design changes
  • Made feature post-release qualitative analysis to find areas of improvement.
Advanced customization features

I was responsible for daily communication with our users and tracking user requests on Yola's ProductBoard. The most common request was providing advanced customization options to give users more freedom to bring their vision to life.

I was working on the following features:

  • Color palettes application rules
  • Advanced fonts customization
  • Extended website effects
  • Advanced site design customization options
  • Template switching, etc.

The things I learned doing this project

Niche-specific site templates influence conversion

Creating a website isn’t a quick process, and using an appropriate site template with sample data as an example could be a good starting point for users. Templates immediately demonstrate product value for users and quickly involve them in the process, avoiding user churn and leading customers to upgrade their subscriptions further.

Good UX for templates categorization can reduce user churn

The number of pages the user visits before they select the template is inversely proportional to using the template. In other words, the more pages they visit, the less they buy. The right approach to Template Gallery categorization allows customers to choose a design that fits their industry and be involved in the site creation process much more quickly.

Back up or discover my other projects

/Let's talk/

Want to create something great together?