sitebuilding-tools-design

Designing 65+ tools and features for Latitude Sitebuilder+

TEAM & ROLE

As the UX designer, I collaborated with our Design team of 3 UX designers and PM while working on the platform from scratch in the startup phase. And as a Product designer, I worked in the Product team of three Product managers, two designers, and the Product analyst while working on the platform development.

WHAT I did

I designed basic site-building features such as link extension, basic image editing, image gallery extension, and essential text editing; website settings, block settings, block spacing, custom blocks concept, in-app notifications design, in-app purchases flows design, etc.

What I DELIVERED

User flows, wireframes, prototypes, interactions, design system, insights from user research, design principles, visual design, design system, brand voice & tone vision, brand identity.

PROJECT OUTCOME

A fully shipped site building platform (available on all devices, including mobile). Since its launch in March 2020 for B2C and WL, the platform has over 15M users in 190 countries.

All SMBs need an online presence nowadays

Due to SEO Statistics research, 97% of people learn more about a local company online than anywhere else. A local business must be visible on the internet because people use social media to learn as much as they can about brands before making purchases. Not having a website that’s built and optimized correctly will mean that potential customers could go past the business to its competitor. An online presence also solves the accessibility problem - the website is accessible 24/7, allowing customer communication and building customer relationships.

With a deep empathy for our audience’s needs, goals, and challenges, we created a toolset that empowers people to create a professional website without relevant experience. Today, Latitude Sitebuider+ is a fully-featured intuitive platform helping millions of businesses across the globe.

Mobile device internet traffic has increased by 75% since 2015

Since Yola’s inception in 2007, websites have changed drastically, mobile traffic has surpassed desktop (due to Josh Howartz's investigation, 59.6% of website traffic comes from mobile devices), and consumers are buying more products online than ever. So, it was decided to design a completely new platform from scratch that allows users to craft websites wherever they are and from any device (including mobile!)

/Context

An online presence for business owners saving time and money

Latitude Sitebuilder+ is a platform created by Yola to help people without relevant experience implement their ideas into real websites. Yola differentiates itself by simplifying online presence creation for SMB owners and enabling them to manage their websites with the help of site editing features.

I worked in Yola for almost five years and took part in both Legacy platform growth and creating a brand-new Latitude platform from scratch.

Context / Process / Design principles / Design system / Features / Reflection

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

/Overview

From scratch to MVP release

Ideation & Timeframes

The concept of new Latitude Sitebuilder+ was generated in 2017, and we had ~ 6 months for MVP launch. We, as a team, implemented the MVP, starting with rapid iterations.

Rebranding

As the new Sitebuilder+ was designed for the brand that has existed on the market since 2009, all brand values and voice&tone were saved but updated. The design team has prepared a new branding concept and updated brand assets and guidelines.

Basic features

Constrained by time for MVP implementation, we concentrated on designing a limited number of basic editor features such as adding/deleting blocks, text editing, image editing, links and buttons editing, website customization options, page manager, etc.

Site templates

Getting ready for the Sitebuilder+ launch in March 2020, we had to prepare a bunch of website templates to cover multiple business niches in the short term. For effective template building, we decided to use the formula: base template + theme + sample = site template and support it on infrastructure level.

In the scope of this project, we developed the Design Automation feature. I took part in making up the design automation rules and designing in-notifications for users about applied design automation changes. Click here to see this project's details.

/process

Specific

Meeting users where they are in their journey with context-specific language and specific prompts to help them reach their goals most quickly and effectively

Simple

Making the user interface easy and intuitive using simple and friendly language for the editor’s UX. Ease of use is a set of factors such as user-friendly UI, tutorials, etc.

Visual

All the changes users apply immediately display on their website. The visual representation of user's actions makes the website creation process easier

/design principles

We worked on a design system to reduce handoff time

The platform's complex nature necessitated screens covering modules like website settings, page settings, block settings, and various extensions like icon extension, image, gallery editing, link extension, etc, and other editor functionality. It also contains in-app purchases screens, checkout, domain selector, and others.

To maintain consistency and ensure efficient design to development handover, under the leadership of another designer, we created an atomic 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.

For the design system, we used this structure:

visual design principles > elements > components > patterns > modules > screens.

/DESIGN SYSTEM

Product evolution: from viable to lovable

After the MVP release and gathering feedback, the company is approaching the product version that best meets the audience's needs and the market's changing demands.

Transferring the product from MVP to MMP, we were considering the following factors:

Performance (the product responses are rapid)
Scalability (the product scales up effectively for a more significant number of customers)
Reliability (the product solves the customer's problem every time and is easy to use)

Features I designed for Sitebuilder+

As I worked in Yola for 4+ years, I was responsible for further product development. As a Product designer, gathering customer feedback, knowing who our customer is, what needs improvement, and how to monetize the product were vital questions for me. The idea was to focus on the customer's needs, measure the progress, learn quickly, and make decisions based on data rather than intuition.

Taking an agile mindset to the ongoing development work, we made iterative changes to the product, developing new features and improving the old ones that continually improve it from customers' perspectives.

Here’s a part of the features I designed:

/features

ux design

Custom blocks concept

While building a website, users might need to present their content in a way not supported by one of the predefined blocks. We received 100+ user requests asking us to provide more customization options to build their custom layouts.

With this functionality, users can create custom block layouts with the help of different granular widgets such as text, images, columns, buttons, forms, embedded code, custom HTML code, etc.

UX design

Image gallery extension

Helping SMBs make their website visually attractive is one of the product's primary goals. I designed the Image gallery extension that allows customers to create appealing imagery on their websites.

We also considered that customers are using an image gallery as a set of images to showcase their products or services. So the design team decided to implement the Unsplash integration inside the Gallery extension so that users don't use other services and don't leave the platform.

PRODUCT DESIGN, UX design

Advanced customization features

Keeping up with our mission of empowering SMBs to create stunning websites with limited technical knowledge, we released new design automation features: custom color palettes, advanced color customization, and advanced font customization.

I was responsible for designing the advanced font customization feature. This functionality allows changing font family, font size, font weight, font style, line height, letter spacing, letter case, etc.

VISION EXPLORATION, ux design

Multilingual functionality

Entering an international market as a business or living in a multilingual country, users need to translate their website into multiple languages to communicate with their customers within that unique region of people who speak a specific language.

The native multilingual functionality manually allows users to translate their website into multiple languages.

Retrospectively thinking about developing a product from scratch to launch

Understanding the end-user customer is key to a successful product

Product design is about imagining, creating, and iterating products that solve users' problems or address specific needs in a given market. The development process needs to become more customer-oriented to make the product evolve into a lovable one.

‘No’ is the most important word for the product team

Prioritization is vital because it doesn’t make sense to make spending to implement the full features list until testing the viability of the core idea when building MVP for startups. Identifying and eliminating bad ideas is essential; it creates space for accurate product decisions.

Back up or discover more projects