January 2021

|

8 min

(Re)Designing a creative collective website

In October 2020, my friend Coni and I launched Thea, a creative collective to help small brands have big conversations. At Thea, we help founders find their personality and purpose by developing ethical strategies and creating inclusive content.

But shortly after launch, I went back in design to rework everything that could be improved on our site. Rather than take you through the whole process, I’ll tell you what I learnt from my mistakes in the first version and what I did differently the second time.

Readymag vs Webflow

Depending on your technical skills (and patience), you may or may not choose a no-code builder. As a designer who couldn’t code to save her own life, I suggested we try a platform that, and I quote myself here, “looked cool”.

I built our first site on Readymag which is based on a drag & drop visual builder. You can do basic motion design, create a mobile version and connect a domain without losing your mind in the process. All in all, it looked like a decent tool.

Hosting on Readymag

We quickly realised we would have to invest in a Creator plan to get basic functionalities from Readymag ($192 per year), such as plugging in Google Analytics and connecting our domain name. But before publishing, I noticed I wasn’t able to edit meta descriptions on each individual page. You can only have a generic one for the whole site. The same applies to social media previews - which hurts your SEO.

I contacted the support team which recommended I upgrade to a Custom plan ($384 per year). So twice the amount we had already invested. Yes, just to edit meta descriptions.

Building a mobile version on Readymag

When you start building your mobile version, things quickly become complicated. Elements get duplicated rather than adapted to a mobile format. So you end up having to hide your desktop elements (without always being able to track their names).

Another back-end issue Readymag may fix in the future, but you frequently lose elements when switching from mobile to desktop. Nothing I couldn’t resolve on my own but it can get frustrating.

Interaction design on Readymag

The number of interactions you can create per element is limited to four. What that means is that if I want five elements to appear or disappear when clicking on a single button, I can’t. Again, I managed to work out something but that ended up affecting the user experience.

Readymag updates

I had already started building our site on Webflow when I discovered Readymag had released an update which affected our fonts. On the homepage, we originally had two fonts in the same paragraph. One of them had a different line-height and ended up not aligning with the rest of the copy.

Replatforming on Webflow

For all the reasons listed above, when the time came to release an improved version of our design, we decided to re-platform on Webflow. It’s highly recommended among my designer friends at Women Make, the responsiveness promise is legit and the tutorial videos are actually fun to watch.

Solo design vs buddy design

Right from the start, Coni and I knew we needed diversity of thought at Thea. We care about reproductive health, social justice and sustainability — topics that require an inclusive approach.

So we’ve built a team from various social backgrounds, countries, age groups, with different beliefs, sexual orientations and neurodiversity. We are dedicated to accessible design, inclusive language and ethical strategies.

Leveraging our team’s diversity

Shortly after launch, we met with Laura, a visual designer & philosophy student based in Brazil. I asked Laura to work with me on Thea 2.0, hoping to gain perspective. I was not disappointed.

Laura taught me to always put our team’s faces on the about page. As a black woman, that’s where she goes when considering working for someone. She wants to know whether they really care about diversity or if it’s just lip service.

We chose not to put languages and/or citizenships at the forefront. Yes, we’re proud of the freelancers we work with, in part because they come from various places and speak different languages. But attaching people to labels doesn’t show their full story and could be considered as tokenism.

Another thing I learnt working with Laura is how citizenships aren’t always something people want to leverage. One of our freelancers is Romanian. She was once asked what her rent was to justify her day rate. This is why some people prefer to hide where they’re from. Not because they’re ashamed, but because it could be used against them.

Unlocking the creative blank

Thanks to my incredibly supportive network, I can reach out to a bunch of talented people in various sectors to help me out when I’m stuck. And I certainly did for Thea 2.0. Alyssa X helped with CSS, Shahrzad Darafsheh with motion, Hannah Milan with accessibility and Clo S gave the final green light in UX.

But for the design itself, I worked with Laura in Figma, and it saved me from painful mind blocks. Anytime I wasn’t sure about something, she was here to troubleshoot my ideas, test them with me and/or suggest a better solution.

Sometimes Laura’s ideas challenged mine but this turned out to be the perfect way to confirm whether or not my original strategy was as smart as I thought it was.

As a visual designer, Laura really improved the overall look of the site: margins, spacing, text layouts. For every strategic point I made, Laura had a visual argument to make, which is why we worked so well together. It was the perfect complementarity.

Implementing after-launch feedback

A lot more thinking went into Thea 2.0. Coni and I stopped working in a silo and presented what we had, however imperfect it was. By doing so, we understood what our next moves needed to be, right on the field.

We talked to potential clients and quickly figured out what we were missing. From business decks to proposal templates, international payments processes and pricing. We had always known how to do our work in design, content and copy, but we had to learn how to be entrepreneurs as well.

So we talked with mentors and other freelance collective founders to understand where we were falling short and how to remedy that. And one of the first things we reworked, content-wise for the site, was our services offering.

Clarifying the services offering

After we launched the first version of the site, we gathered a lot of constructive feedback to know how to better serve potential clients. For example, we were told that the way we presented our services wasn’t clear. People didn’t understand how to work with us.

We used to present our services by skillset on individual pages. You could come to us for copywriting, content, UX design, branding or graphic design. But that doesn’t help someone know how to implement those skills strategically as part of their brand development. Nor to know what our process is like. So in the second version, we merged the services page into one, presenting only three ways to work with us, based on budget.

First, you can come to Thea for a chat, to troubleshoot your ideas and get advice that will help you move forward. No commitment, no huge budget to invest, just friendly advice pointing you in the right direction.

Or, you can come to Thea because you know exactly what you need, like a series of articles or a logo, and you don’t have the in-house resources for that. That’s more about practical support than strategic, but sometimes that’s the approach more suited to our client’s budget and needs. This is what we call the pick & mix.

Finally, you may need Thea for the full ride with your very own dream team to come and go as you need to achieve specific projects: full rebrand, brand awareness campaigns, ongoing creative support or product launches.

Featuring social proof

In many conversations we had with new potential clients, we were asked who we had worked with, what campaigns we had done and/or whose website we had designed. Having testimonials on our site wasn’t enough.

In a previous case study, I explained why I don’t advise having a separate page for testimonials and I still stand by it. But I do recommend having a separate clients page to show the work you did for them. You can keep it very simple, like we did on Thea 2.0, or present a gallery of case studies.

Other things I learned after launching Thea

This is a pretty long article already. So here are just a few more things I learned that could help you as you set up your project: