I worked as a UX/UI designer alongside three UX/UI designers and the Product manager.
Other designers and I had similar responsibilities. We built the atomic design system for templates and made the design for various blocks, block layouts, and templates. We also worked on design automation rules.
User flows, 500+ visual design screens, interactions, design system, block layouts, page layouts, UI design for 40+ templates for various business verticals.
200+ ready-to-use blocks, 70+ responsive, customizable templates, and design automation feature, leading to higher conversion rates and customer retention.
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 / Features / Reflection
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.
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.
For effective template building, we used this formula: base template + theme + sample = site template and supported it on the infrastructure level.
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.
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.
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.
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.
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.
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.
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:
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:
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:
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.
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