Exadel logo

Web Redesign

back icon Back to all Work

Responsive Web Platform Redesign

After bringing Exadel through a rebranding process, I needed to update our website and bring it into a better storytelling platform, where the services and offerings of Exadel could lead to conversion and generate sales.

Working directly with the executive team and the marketing director, we collaboratively generated a high-level idea of our future content structure.

My Role: UX Director, UX Design, IA Architect, Art Direction, Usability Expert

The hero image of the Exadel Redesign Project
Sitemap of the experience

Sitemap / Information Architecture

The need to move quickly was imperative. Working with my team of Product Designers, we rapidly plotted out an architecture for the new site.

To cotinue in our fast pace, I produced a Paper prototype, which I was able to gain participation and experimentation from the Leadership Team. Building this rapid prototype enabled all of us to quickly iterate and jump into designs.

User Flows / Consumer Journey

User Flows and Journeys

As lead generation was critical for the new site, my team and I plotted out User Journeys that captured imperative paths through our intended architecture.

Visual Concepts

Visual Concepts

To generate as many Visual ideas as possible, I lead my entire team of Designers through an exercise of exploring a few key pages in design application. Each designer, including myself, came up with design ideas that we collaboratively iterated on as a team.

Here you can see one of my concepts, this one focused on blues and also highlighting some endued meaning within our new brand.

Chosen Design Direction

Chosen Design Direction

The ultimate design direction incorporated pieces and aspects of several of the concepts. The infamous Frankenstein! However, my team and I worked to blend and marry all desires into one cohesive, clean look and feel.

The focus was on impactful imagery and gradients, while leaving room for focus to be on our messaging and storytelling.

Design Direction - Scrolled Landing

Design Direction - Scrolled Landing

The concept utilized a clean, structured grid - creating a comfortable vertical rhythm down the page. A numbered, alternating layout allowed for our story to expand and contract, depending on the current company iniatives.

Mega Menu

Mega Menu

Conceptually, we planned on the navigational structure being a little unorthodox. The site needed to be timely as far as what services and projects we focused on - so rather than having a navigation with everything, I designed a menu that could flex with our current topics - promoting iniatives at the right time.

Services - What we do

Services - What we do

For a software company, Our Services were critical to demonstrate to new potential customers. Here at the What we do Landing page, our Users were presented with a categorical view into our expertise.

Beyond that and throughout the site, our tiled system allowed for easily associating relative technologies and case studies with whatever content the user was currently viewing.

Case Studies - Our Work

Case Studies - Our Work

Conceptually, we chose to marry our clients and our case studies. Here, on our Case Study or Work landing page, the User would be presented with a grid our clients - each representing a Case Study of a previous engagement or project.

I also envisioned the ability to filter and sort by aspects such as industries or technologies utilized within the projects.

Case Study Detail

Case Study Detail

For these Success Stories the project needed to be the hero. Utilizing our background image structured header, imagery relative to the project could be pulled in.

As with software, sometimes imagery from the project itself is either unavailable or can't be shown. In those cases, our design and layout still needed to support a Story that may have been light or without project imagery.

Final Design

Final Design

After designing the complete site and page templates, I circled back around to the overall look and feel for one more pass.

I refined the grid and spacing while introducing a few more features, such as localization and a highlights widget for news and pr related items.

Most importantly with the final aesthetic passover, was pulling more of the header image forward - creating a more dynamic and impactful first impression for Users.

Final Design - Internal

Final Design - Internal

Again, the background header imagery was shown in more vibrant detail.

Here, another new inclusion can be seen - a directional strip, pushing Users to continue reading more about the topic at hand below the header.

Final Design - Internal

Final Design - Internal

Another variation of Internal Page template shown here, where more messaging and written content is needed.

Additionally, a variation of a Case Study detail can be seen - giving content managers the ability to highlight certain Sucesses even more.

Front End Support

Front End Support

As Development began, I created some spatial guidelines for our Front End Team. These gave insight into the intended grid and spacing structure, which was critical to creating a clean, comfortable feeling overall look and feel.

Front End Support cont.

Front End Support cont.

In an effort to make development easier and more efficient, I included this example of how we could approach layering our headers in HTML and CSS, alleviating a good amount of effort on our development teams.

Header Tile

Selected work I've created