Why redesign an old website and do a brand revitalization?

The previous website had a low conversion, unorganized content, no personalized approach, pastel color pallet, inconsistent writing, and no user-centered focus.  It wasn’t resonating with the message the company wanted to convey.

DESIGN APPROACH

Research

As a first step, we conducted an interview and workshop as a part of kickoff week. The idea behind this was to determine who is the target audience, who are our direct competitors and what our goal is. 

The next step was a detailed competitive analysis (as much as possible). We wanted to figure out what works (and what doesn’t) for our competitors and what could work for us in terms of approach, color scheme, information architecture, content, etc.

Personas

We wanted to form a deeper understanding of our users’ goals, needs, experiences, and behaviors. To empathize better with our target audience, we created two personas that represent our target audience. We created a predicate user journey for each persona to optimize content for better user targeting. So, we created 2 personas for each of our user segments. They were based on our research.

User Journey

With the business goal in mind, and created user personas, we made sure that our users can reach the goal effortlessly. So, we sketched a current-state user journey map, to identify and map opportunities for improvement. We identified unnecessary steps, inconsistency, and potential dropoff points in the flow. By optimizing these from the new design, we optimized content to be a more user-centered experience that eventually contributed to conversion rates.

Information Architecture

As a starting point, we used existing information architecture and compared it with our research. After a few modifications, we were satisfied with the site map we created and marketing started working on content creation and optimization.

Sketches

Sketching and low-fidelity wireframe was the next step in product building. With quick drawings, it is easier to generate and refine ideas. In this case, sketching was shared with the team and used for refining ideas, content brainstorming, and optimization. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.

Wireframes

After a while, I turned sketches and low fidelity into wireframes. In collaboration with the marketing team, we redefined and polished sketches using Figma. Wireframes served as a more detailed blueprint for web design to capture the look and feel of the product.

What about branding?

Brand revitalization

How we approached brand revitalization and what did we do in the process? First, we decided to move away from a pastel color pallet and from playful illustrations. With our research part, we concluded that we wanted to go with a bold and more definitive tone. And that is what mainly affected font, color selection, tone of voice, etc.

Fonts and colors

As stated in the first analysis we wanted to move from pastel colors and playful illustrations. We tested several fonts with color combinations. In the end, we were satisfied with our final choices.

We choose Plus Jakarta as our go-to font because it’s a modern and fresh geometric sans serif. The font consists of modern and clean-cut forms with balanced spaces to preserve legibility in a large range of sizes. We believe that Jakarta can deliver the look, message, and tone of voice we wanted to build. 

A very dark shade of deep but saturated blue – Cetacean Blue as our main color.

UI Design

After testing, content optimization, and revision I moved on to design the final screens in Figma. My goal was to create a visual identity that was aligned with the brand’s values and message. I’ve gone back and forth to my wireframes, mood board, and personas and took a deep dive into my catalog of references for inspiration.

In the process, I’ve created some guidelines and kept the responsive design in mind. As already established, I followed a dark-themed, modern, and bold look.

Before and after

We are monitoring our new website metrics. Yes, we know it is early for some real data and comparison, but early metrics are promising. We compared 45 days before release and 45 days after releasing new website.

Next steps

This is only the beginning of something new in the communication of the values ​​of our brand and our work. We keep monitoring our KPIs and constantly updating and refreshing our digital platform.