#webcreators2021: Ronit Cyjon - Redesigning a Site for 8m+ Users

I can't think of a better way to end what has been an incredible day of A-list speakers—Gary Vee, Seth Godin, and Swansit—than with our very own Ronit Saijon, Head of Design at Elementor. Ronit is a multidisciplinary designer and has worked with leading brands like Zara, MTV, and Nickelodeon. Today she manages Elementor's design team, which she built herself. Ronit will be joined by Erez Eddin. Erez has 18 years experience as a UX designer and recently joined Elementor as senior product web team lead. Hi guys, thanks for joining us today.

Great to have you here. Cool event.

Okay, are we ready to kick off? Yeah, let's go. As you know, this— today's event is about web creation and, and it's web creators. So we ourselves, um, did— just did a new redesign of our website. So I'm sure everybody would love to hear more about it. So can you tell me, Ronit, why we did the redesign?

Sure. So first I will say that I'm very delighted to be here and extremely excited. We rebuilt our website because a website should tell a story. At Elementor, we extremely evolved the last 5 years from being very focused only on the product as a page builder and became a full-blown platform. The platform today consists of 3 main pillars. First, the product, like the creation, everything that was made around the product. Second, the resources that we constantly evolve in order for you, the professional web creator, amplify your skills. And the community. It was very important for us to feature the community in our new website and to give them a huge space. We dedicated full components to really show their stories, their faces, testimonials, and their amazing, stunning results. So, I encourage you always to think of your audience, always design with them in mind. Look at the website creation as a living organism. You should always adapt to the ever-changing growth of the company, transform as quickly as you can to the product changes, and most important, Always listen and react to your users.

Okay, love it. And now tell us a little bit about how you got there. What was the visual design process to get to this, this new website?

So first, Masha, I will start with the why. Why we do what we do. We design, as I said, always with you in mind. Our main goal is, is really to give power to our professional web creators to grow their business faster and to design their future. But please let me show a sneak peek of our brand because I'm a visual speaker, so— Sure. I mean, once you think of creating your brand assets and brand book, always think of the user in mind. We started off with a brand book. It was a great brand book. And really compelling, but always brand book is kind of limited. Absolutely. So once we— I started to dive in into the content of the website and the complexity, I realized that we need to significantly expand our brand assets. So before I will dive in into the brand asset, let me please take you on a bit of a journey to show you how we initially started and some of our bold decisions. Great. I made dozens of decisions. So initially, we explored with this direction that you see here, our illustration. We took a very funny and playful approach. The idea was really using metaphors in order to simplify our technical aspect of the product. And I hope you agree with me, I fell in love with it. I thought it's amazing and fantastic. But honestly, it didn't fit our brand. It wasn't bold enough and didn't show the wildness of our brand. Moreover, it wasn't about you. It wasn't about you, the web creator. I couldn't see you at the center with this illustration. So, we took a crazy ride, started sketching like crazy, and I really made a bold decision. I like, despite the timeline and despite the budget and everything else, to go to a real photo shooting. In this case, I really felt it has to have a realistic feel so that I can see you, the web creator, at the center. And, and guess what? We even like did it more authentic using our web designers, our great team. So this, now this really felt like us. This felt bold. And as you see here, like here we put you, the persona, at the center, and we didn't use like specific faces. We wanted you to really reflect yourself at the center. See how we use the hand everywhere? We wanted to show your hand interacting with our product. We made the product tangible to show our accessibility. Even here, we wanted you to feel that the widgets are delicious and to evoke senses and emotions. So we wanted to arouse your appetite to call for action. Going back to our illustration, we use them now sporadically across the page. It really served the new purpose of breaking up the intensity of the technical aspect of the page. Now we really felt it's playful and amusing and served the purpose.

Yeah, I really love them. Okay, well, thanks for sharing that. That's very interesting with the two different assets you talked about. And I happen to know that we actually have a total of 7 different types of assets, and so I'd love to hear a little bit more, a bit, a little bit more about that. Why do we have 7 different types of assets, and how do you navigate this complex design system.

All right, so yeah, we went wild and crazy. We have more even than 7 brand assets. Starting point was to have a crazy wild color palette. We started off with 3 main combinations of colors, ended up with this many. So really, we wanted you to break and rethink of the convention of web by using the variety combination for the logo, the header, and the footer to really encourage you and to encourage you to do the same. So for us, we were lucky to have our dream project. It's really creators speak to you, to creators. So we got a chance to really inspire and evoke this emotion and really encourage you to do the same, to rethink of web creation. Think of how to break down the convention of web to inspire others. So, our— my core recommendation for you is always when you think of your design based on your users, always think of how to address the why. Have a baseline. Always think of your common thread in order to be consistent. Both visually and conceptually. In our case, Telementor, our story was always to blur the line between the digital and the physical world in order to show you we are always there, accessible for you.

Great. Okay, so we'll move on to errors. Um, so Ronit talked a lot about the different languages, um, that she, she had created together with the team. But how did you actually do it? How did you take all of this and put it into a website?

So I've been involved in web projects in large scale for the past 18 years, and I joined Elementor and the product web team in mid-March. And Ronit showed me the, the concept, the design concept, the UX concept for the new a website. It was amazing, amazing job, astonishing. And when— then my task was to take it online, to take it towards development. So first we mapped the entire content that we want to publish, all the pages, and we came up to about 20+ pages. Those were like heavy with content and design, a lot of work. And so I did what I've always done in the past. I put it on a process. The process starts with getting for each page a brief from our amazing product marketing team. Yeah. And so they provide us, based on research, all the information and the messaging. And then we take it into UX. We do a couple of iterations with wireframing. Once it's approved, then the copy enters, and we need the copy then because based on this copy we are doing the content design. So we start with— after the copy is approved— with the UI design for the layout and the content design, both static imagery and also videos. And after everything is ready, we hand it off to development. And from development there's a couple of cycles of QAs, and then it's ready to go into production. So think this entire process which every web creator understands, knows, for like 20+ pages, we spread it on a Gantt chart, and we saw that we will miss our deadline. We wanted to go live for Elementor's birthday on the beginning of June. So we need to come with some hacks to reuse components. So it's all— we created a design system, so we reused it across all pages. It's the same components but different content and design inside of them. It's also cutting time for development. Even with Elementor, you can save it as a template to your template library and reuse it. So this was very beneficial. And I think the last one, which is for me the most special, it's to tag things as done. You know, we have a lot of very perfectionist designers in our team, and they want to iterate and iterate endlessly. And I ask them to see what they've been doing and when it's good, to mark it as done. We had hundreds of tasks and we need to move forward, so when it's good, it's done, and we can move forward. Sparkle on all of those hacks some good team spirit and you can do the impossible. Great, love it.

Okay, so we've heard that those are great hacks, and Ronit talked a lot about the different types of design assets that we, we use, which is really interesting. And I guess now the question is, how do you balance all the design requirements and the design assets with the business needs when you're building a website?

This is a great question. So if you remember back in the '70s, the former president of IBM stated that good design is good business, and I completely agree with this. And so when we are building website, marketing website, We need to provide good experience to our customers, to our audience, but also business value to the company that you work for, or if you are a web creator, for your customers. So you have— it's a process of 3 steps. First, you need to bring audience to your website. Once they're there, you need to provide them or to tell the story And finally, you need to call for action, to ask them to do something. So if we are talking about how do you bring audience to website, of course there's like campaigns and put a lot of money into that, but good marketing website also involves a good SEO. And when we understand that this is a big, think that we need to, to go into it. So we analyze each page along with our product marketing team and SEO team, and do we understand how the personas or audience will go to each page, what they will search for, which terms, and we incorporate those search terms into the page copy instruction. Second, another aspect for that is, for that, that you need to create a good structure for each page, both for your understand— your audience, that it will be clear and it will be understandable, but also for search engines. So you need to have clear topic for the page and subtopics in the hierarchy of the information of the page. So after you brought the audience to the website, you need to tell them a compelling story. And we worked closely, the content writers from the product marketing team and the content designers from our team, and created a very compelling story. It also was better because it was an authentic one. And after that, you need to prompt your audience to do something, a call to action. So you place some call-to-action buttons, it can be "Start here" or "Watch this" or "Learn more" on relevant places. And at the end, this provides the business value when they are going to try your product or buy your product.

So thanks for those great tips, Erez. Obviously this was quite a significant process, so Ronit, before we finish, maybe you can tell us a little bit about How do you keep designers, how do you keep yourself engaged and creative in processes like this?

Alright, Masha, so you really want me to tell our secret sauce, yes? Okay. After working a while on the huge project such as this web creation, I felt I need to shake it up, bring back the spark. So how do you create a creative design culture? Think of creative as a muscle. You have to practice in order to get better and better, just like you practice Pilates. Set a timetable to practice, weekly hour, one space, one shirt file. Try to do it in a diverse team. We do it, all the designers cross department, sitting together, using the same file from Product designers, illustrators, branding designers, writers, developers, web, everybody together. Create a safe environment, no judgments, always good feedback. And really sit there to play, creation for the sake of creation. And most important really is Give the most creative, wild brief. Everyone needs a good trigger to work with and a good framework in order to focus on creativity. Let me show you a few examples of creative briefs. Looking at a team, they got a little bit stressed because the roadmap was intense and the deadline was coming in. So I wanted to raise a sense of optimism and to let go of perfection. So it made me think of a brief. What would happen, how would you look like if you were a pop-up? And same with 404 page. And the result was stunning. It was so creative and liberating. Like, seeing myself, my best version of myself as a pop-up, and my weaknesses as a 404 page. Another creative brief was playing with our brand assets. I wanted the team to fall in love again with our brand assets. So I said, "Let's bring on all the brand assets and just play with no restrictions, no guideline, create with the brand assets." And the effect was immediate. We ended up integrating so many new color combinations, vectors, everything to the system. And it really shows you the benefit of when you timetable time for creative, really magic happens. And it really gives us, the web creators, the power to rethink of web creation and break down the boundaries in order to create an amazing, beautiful web.

You're absolutely right. And that's why these design meetings, we always walk past them and we want to come in and get involved because we can see the creativity. Running around. So I've really enjoyed this session. Thank you both so much for joining me, joining us in the studio. It was amazing to hear about kind of how the design balances with the business. I hope that it's given you lots of tips, um, at home to, to take forward. So I want to say a huge thank you to Ronit and Erez for joining us today, um, and we, we had a great time.

Thank you. Idi.

Thank you, guys.