Contact
Download CV
Contact
Download CV
Saint-P, Russia
Website Builder
B2C/B2E
Introduction
In 2022, ITMO University underwent a rebranding. This led to the creation of a design system and, based on it, an in-house powerful website builder.
Goal: to develop a website builder and integrate it into the university's business processes
This is necessary to achieve the business goals.
Tasks
  • Create a space for efficient website creation to enable the implementation of ITMO's products.
  • Build a block library based on the new design system to improve the consistency of the university's websites.
  • Develop a settings system for sites, pages, and blocks to accommodate websites of any complexity.
  • Automate the approval processes for creating, editing, and publishing websites to save managers' time.
  • Automate the process of collecting form submissions to save time for managers and analysts.
My Role
My role is Product Designer in the internal product development and design department at ITMO. I worked on the product as part of a team of designers, developers, testers, and managers. Analytics were partially handled by the designer and the manager.
What I did:
  • Formulated and tested hypotheses, identified product, user, and process issues through in-depth interviews, surveys, and usability testing.
  • Designed solutions in the form of scenarios, validations, edge cases, layouts, and prototypes.
  • Conducted design reviews of the implementation using Dev Tools.
  • Analyzed feedback, product metrics, and measured them through usability testing and observation.
  • Improved and refined scenarios, comparing feedback and metrics from "Before" and "After" scenarios.
Pre-project Research
  • Analysis of current problems and requirements gathering.
  • Analysis of solutions offered by direct and indirect competitors.
  • Analysis of the target audience, their problems, needs, pain points, and tasks.
Problem Analysis
The university has about 300 websites. Of these:
  • 80% are custom-coded by the development department.
  • 15% are built on Tilda by the development department.
  • 5% are built by third-party developers.

This leads to the following problems:
  • A large proportion of outdated or obsolete information.
  • A large proportion of visually outdated websites.
  • A large number of layout errors, especially when adapting sites for mobile devices.
  • Developers spend a significant amount of time maintaining legacy code.
  • Designers in the department spend a significant amount of time creating websites for urgent projects.
  • A significant amount of time is spent on website approvals, design reviews, and publishing.
Why do these problems need to be addressed?
  • Reputation. ITMO University is one of the top universities for training IT specialists. Websites directly impact the brand's reputation.
  • Brand recognition. This is not just about uniformity of logos, colors, and fonts. It is about the consistency of visual patterns and interface components.
  • Budget. Maintaining projects requires financial resources for third-party services, developer and designer salaries, etc.
  • Employee efficiency and process automation. Downtime due to approvals, routine and repetitive tasks, and a large number of requirements all need to be optimized.
  • Security. Third-party services have vulnerabilities that could harm the university's infrastructure.
Competitor Analysis
Direct competitors:
  • Other website builders.
Indirect competitors:
  • Form data collection services.
  • Website payment systems.
  • Automated email marketing services.
  • Text and image processing services.
Target Audience Analysis
The target audience for our website builder is divided into several segments:
B2E (Business-to-Employee)
Employees who create and edit websites:
  • Managers
  • Copywriters
  • Illustrators
  • Project leads
  • Instructors
B2C (Business-to-Customer)
Users who visit published websites:
  • Prospective students
  • Current students
  • Instructors
  • Staff
  • Parents of prospective students
  • Alumni
  • Partners
  • Researchers
  • Business/industry representatives
Analysis tools used:
  • Analysis of business processes, employee tasks, and agreements.
  • Problem interviews.
  • Expert interviews.
  • Requirements gathering.
  • Collection and tracking of metrics in Yandex Metrica.
  • Interviews and surveys of segment representatives.
Interface Solutions
The builder offers a wide range of features, grouped into sections:
  • Page dashboard.
  • Settings for sites/sections/pages/blocks.
  • Page editor.
  • Block library.
  • Text and formula editor ⋅
  • Image editor ⋅
  • Form submission system.
  • Product payment system.
Page Dashboard
All sections and pages displayed on a single screen:
  • Site settings
  • Create page/section
  • Search for pages/sections
  • Page sorting / Page and section view modes
  • Bulk selection and bulk editing settings for pages
  • Access to the "Submissions", "Language versions", and "Trash" sections
Site/Section/Page Settings
Visually, the modal windows for site, section, or page settings are similar in order to maintain a consistent visual pattern.
Site Settings
Here you can:
  • Configure the site URL
  • Assign the header, footer, and search results page
  • Connect analytics counters
  • Set up redirects
  • Enable the visually impaired version
What problems does this solve?
Previously:
  • You had to contact a technical specialist. It was impossible to set up a site URL without contacting a technical specialist, which took a lot of time for writing a request, getting the address approved, etc.
  • Now you can implement the visually impaired version requirement with a single click.
  • Save time on configuring header and footer blocks.
Block Settings
Here the user can:
  • Customize the block to their needs
  • Insert and edit text
  • Choose the block's composition
  • Configure text styling
  • Insert and edit images
  • Each block has its own custom set of settings
Page Editor
This is where users spend 80% of their time:
  • Create blocks from the library
Text and Formula Editor
All text containers feature a floating toolbar for customizing text appearance, as well as for adding formulas using LaTeX.
Image Editor
All images can be cropped, rotated, flipped, and adjusted for color correction.
CRM
Results
The website builder became a tool for automating several business processes at the University:
  1. Namely:
  • Creating a website without the involvement of designers
  • Website approval before publication
  • Approval for website creation
  • Collecting form submissions
  • Connecting payment on the website
  • Collecting payments on the website
  • Planning and publishing posts on the website
  1. 15% of all websites are now built on our builder, making them consistent
  2. Product DAU: 150–200 visits
  3. Reduced costs on Tilda and payment processing services for the website
  4. Created a full-fledged website builder
  5. Created a library of 120 blocks
  6. I implemented the text editor, image editor, filtering in submissions, search, the Payments section, the News section, and the Trash