Communication

Making A Brand New Website; The Leaps & Gaps

Making A Brand New Website; The Leaps & Gaps

At the end of the year 2021, we decided to put our heads and powers together to create our brand new website. The process had so many unforeseeable aspects, yet we were clear and certain about one thing: Our new website has to reflect who we are as a collective and as individuals. In order to get there, we had to take some little serious leaps.

Written by
Nader Ibrahim
Wafaa Omar
Translated by
September 18, 2023

Preface

Written by Nader

Why a New Website?

On the older website, it was difficult to publish new projects. So, the first obvious ideation question was how to make it really easy?

The second question was to design a portfolio page that makes it easier for visitors to access projects that are similar to theirs.

From an artistic and expressive point of view, the question was, how would we explore a visual design and an art direction that shows who we are and what we do, to a creative who is interested to join us, a partner who likes to collaborate with us, or a customer who wants to know more about us?

We have also grown rapidly as a team this year, and the website design project was a nice opportunity for us to celebrate each other as a bigger new team, and the 10 years of WeTheLoft.

Part One: Ideation

A Word or Two About Simplicity Versus Emptiness

In any creative process, and especially in design, simplicity seems to be a difficult thing. It may be the hardest thing to speculate or try to achieve. Simplicity can mean intuitive intelligence, facilitating something that was complicated, or forgetting what you have learned over the years and learning something new. There is also the risk of confusing simplicity and space with emptiness!

For this project in particular, it meant achieving a point of balance. We want to simplify the content and the overall interface. But not oversimplifying it, that it becomes empty. We wanted the experience of browsing the website to have something of fun, inspiration and expression. It also meant avoiding the urge to crowd the spaces with beautiful clutter.

Part Two: Exploring Directions

Insight #1

A minimal and abstract user interface that gives away the space to artworks and visual content, and practically speaking, to be easy to update and build on in the future. 

We are aiming for a modular design to set the foundation for a growing website and CMS that makes things much easier for the team as they manage and publish the content.

Insight #2

An art direction that would add an element of excitement and expression to the minimal visual design we chose to follow. We dedicated spaces for inspiring artworks across all the fixed pages such as the home page and contact page. These spaces will be renewed from time to time with new artworks that reflect the change of our artistic taste as we grow, and the stories we want to tell from time to time.

This time, we told a story about the journey of working on a branding project from start to completion as if it was a hiking trip in nature, inspired by the hidden pictures of the team! Click on the team members’ pictures and you will find each person in one of their favorite environments. Check the services carousel in the home page and it will take you through the journey from witnessing your dream ideas, to sailing the clouds of social media.

Insight #3

A way to display our previous work that allows the user to categorize projects according to the type of service or the field of work “industry”, and also allows an overview of all projects.

Insight #4

Upgrading the quality of the static content, such as the content of our projects, clients’ logos, and other site content in general. We have reproduced almost all visual content of the projects we presented in the earlier website and added some more new projects.

Insight #5

Creating a blog to be a space to express ourselves and a space to share our ideas and experiences with anyone interested to dig deeper in a topic we once mentioned, or to connect more with us.

Insight #6

An opening video on the home page as a creative space that we would update in the future. This time we decided to celebrate Wetheloft by recording the manifesto with our voices and experimenting with mixed media visualizations.

Is there a seventh? Yes. Made in Wetheloft. To let the entire project be a teamwork product and an exciting learning experience for everyone.

Part Three: Taking Leaps

Written by Wafaa

 

A Leap of Faith

Putting together a plan that encompasses introducing new methods and practices including, but not limited to, user experience and user interface design, required lots of faith in the process and in the outcome. Presenting the plan to Nada and Wassim to kickstart the project required tons of strong faith too, and they were invested in making this happen. They had so much faith in us and believed in change.

For me the hardest decision was to believe enough in Webflow, which is a new web builder platform I got to discover and learn about, in order to build our website on it. With so much faith & trust, I confirmed this decision; building our own website from scratch fully in-house was the path we’re taking. 

 

A Leap in Confidence

As a result of this profound faith, my confidence leveled up in ways that I haven’t experienced before. As if I unlocked a new superpower. I can say that initiating this project was the biggest goal I pursued in my past 8 years of work experience. 

As I recall, in the job application email I sent to Wetheloft, I have expressed how much I love human-centered design and working on strategy-based projects. I joined Wetheloft as a designer, though the desire to transition out of design started at my senior year in design school. After 7 months of designing at Wetheloft, and at my first one-to-one with Nada, she gave me the opportunity and the confidence to put design aside and work in Strategy. Yet I haven’t stopped seeing the potential of bringing my human-centered, user experience and user interface knowledge to Wetheloft since the day I joined.

And here I am, as my wishes manifested, applying what I learned in strategy to our website process as well and pouring my accumulated knowledge from different disciplines here and there.

Bottom line: a nudge or a push from your mentor or manager can get you to leap into your confident-self. Thank you Nada!

 

A Leap of Trust

So as the project kicked off, its scope started getting bigger and bigger and bigger… and so much bigger than what we’ve anticipated. With this, as a project lead, I had to trust myself that I’m capable of facing what’s coming. And as the project’s scope got really big, more members -exactly half of our team- joined forces. This also required trust in each one of the superhumans I work with. And so much trust in the knowing that they got my back. This resulted in a deeper understanding of myself and the people I work with. Many aspects of myself and of the team members got discovered in the process. And with that, we got to form new work dynamics and explored different ways to collaborate.

Trusting might be hard for a recovering-perfectionist, because usually I would want to do everything myself and would find it hard to delegate a task or ask for help. But co-leading this project with Nader gave me the strength and support I needed to navigate new realms of leadership. And that alone is whole another learning curve. And what makes this curve go up is starting with trust in yourself and in people.

 

A Leap from a Cliff

Fear of Heights Level: Zer0.

Flying Status: Unguaranteed. 🤷‍♀️

 

A Leap over Fear

You might ask; fear of what?

Well, fear of failure mainly. Fear of making a mistake. Fear of imperfect outcomes. Fear of the unknown. Fear of time. And probably more.

Walking through the process was like walking in a forest and cutting the trees ahead of me to see the way forward, with the trees being my deep-rooted fears.

 

A Leap of Survival

You know, the root of all fears is the fear of death. Because of this truth, the nervous system tends to believe that our survival depends on achieving this goal, be it small or big, so it kicks-in all the Cortisol it has in order to get us to the finish line. ☄️

 

A Leap in Learning

As a creative and a recovering-perfectionist, I always thought that my talents in art, creative writing and design aren’t challenging enough. I mean, they mostly flow from inspiration and imagination, so how would I take credit for the outcome? For this reason, I took a lot of what I did and achieved for granted. This is simply fueled by my imposter-syndrome, which is the best friend of perfectionism. 

But, challenging this perception was embedded in the goals of this project. Here I was, facing all the excuses that my mind constantly created to make me believe this idea. Though I’ve always loved design thinking and enjoyed reading about any topic in life, and though working as a Strategist was a left brain job, these beliefs were deeply rooted still!  

Yet, this project was on the extreme side of my analytical mind. It required me to do continuous problem solving, and loads of mathematical work. As well as learning the logic of the platform and its tools in order to work with it. As they sometimes call the left brain the Digital Brain, I actually got to experience this in its true totality. 

I was learning on the job how to build a website. At first I took a crash course to understand Webflow, then started applying the learnings into our supposed-to-be website. But as soon as I started practicing, I had to revisit most of the course. So I figured that learning and applying (one step at a time) makes the learning possible to stick and actualize. Small digestible steps that my brain can process; one section, one container, one div block, and one element at a time.

Once I got the basics and learned the rules and logic of Webflow, it got easier to make things out of them. This meant, working on the website’s backend, building the content management system, and working on the frontend design. Bit by bit, I progressed into making features work, creating new features by combining different tools and elements, hack rules, and finally animate things around. Yay!

One simple truth: Learning the basics and repeating them gets you to advance in anything.

A Leap into The Web

As I got deep in website development, I had to learn some coding in order to make some things possible. If the version of me who was learning web design from a thick book about Adobe Dreamweaver back in university had to hear this, she would be shocked and in denial. Maybe she would have even imagined an unrealistic amount of anxiety killing me in the process. 😅

Yet, when the time came, here I am learning this web language one code at a time. 🕸

And my younger self, and all of my selves combined, are so proud of me for doing what I believed was impossible one day. Nothing is sweeter than witnessing the realization of the hidden abilities and courage we store within us. 💠

A Leap Together

Creating a dynamic website in 3 months included planning, creating a web strategy, doing internal user research, designing a full-fledged user experience, designing the user interface, writing the web content, designing our projects portfolio, creating a plan for our blog, creating an industry categorization system for our projects, creating our company profile, vectorizing our clients’ logos and animating them, making a stunning video about us, actually developing the website, managing the content on the CMS collections, conducting usability testings, planning the site launch, and more things in between.

This would have been impossible to do if it wasn’t for the involvement of our creative, production, strategy, and communication teams. And on top of all, the support of our management and maximum cultivation of our resources.

Each person who was involved in the project gave their utmost genuine efforts and dedicated support to the overall objective and all the goals we aimed to achieve. The process was not easy and was full of a spectrum of ups and downs and challenges, yet sticking together made the end result exactly flawless. 

Nader was, and is, the perfect partner to pursue big goals with. He is the copilot of the project who did everything in his power, literally, to make it happen. Sometimes I was drowning in the overwhelming waters of this huge responsibility, and he was the person to ground me in reality. And sometimes, he needed that grounding from me to manage our expectations according to the timeline. To win time, our process was parallel. Meaning: I started building the website while Nader was in the process of designing the user interface and all visual elements of the website. How did we pull it off? With countless patient, compassionate and understanding discussions and loads of laughs. 🤖

One important thing Nader and I have in common, among many, is that we love swimming in new waters and utilizing our multiple skills, talents, passions, and abilities to navigate any goal we set our minds on. All of this wouldn’t happen on this level of excellence if it wasn't for his dedication and next-level detailed work. I gladly learned so much about collaboration and leadership through co-leading this mission together. 

 

We safely landed in a new land, and I’m proud of us and grateful for every member of our tribe.
expand_less