Groundworks

Groundworks is the US's biggest provider of foundation repair. I was part of the team that created the new visual direction for their Web presence.

GW-home-a

Home page final Visual design

Timeframe:

2-3 months

Role:

Visual Design, UI design, Interaction design

Team:

Design Director, Ux designers, Account manager, Project manager.

Design Challenge

Our task was to create a new web experience based on the client's existing brand. However, the current brand was weak, and the company had gone through a series of acquisitions, each with its own brand. Our challenge was to unify all these different businesses under one brand. With the freedom to explore new branding directions, we aimed to position Groundworks as a leader in the US.

Proccess

We began a discovery phase to gain an understanding of our client's visual design needs. After that, we worked closely with development to create a design that could be applied to all GW locations in the USA.

GW-brands1

Three of many different brands under Groundworks

Discovery 

Our discovery process began with a series of meetings and workshops with our clients. We aimed to align ourselves with their expectations while educating them about best practices.

Expressing why you like something can be challenging, especially if you're not in a creative field. To understand the client's expectations, we conducted workshops with them. These workshops were designed to provide them with the language they needed to give us accurate feedback, giving us the tools to create style tiles that would meet the needs of both the clients and users.

In general, workshops are communication tools that bridge the gap between two parties. In this case, we needed to have a conversation around visual design with a group of non-designers, and these sessions proved to be perfect for allowing them to speak their minds and feel heard.

A guide to some of the exercises we used in our workshops with clients: Design Spectrum and Design Shopping.

5-design-shopping-guided-design-showcase-1

Groundworks' workshop: Parsing information to inform style tiles.

Style tiles

From these workshops, we gathered useful information that informed our style tiles. We used style tiles to streamline the design production process. By gathering early approval on core elements, it was easier to move on to more complex design decisions and conversations.

Style tiles were key in refining our visual design proposal and finding Groundwork's unique voice in the industry. We focused our conversation on basic design elements, such as typography, colors, and some UI elements, intentionally leaving out layout, content, and more complex design decisions.

G-ST-03
G-ST-02
G-ST-01

Different Style Tiles considenred during our Design presentations

Unique among competitors

Our explorations focused on high-contrast components to emphasize impact in our designs. The unique color palette we developed sets GW apart from competitors in the industry. We incorporated angles and texture to create a sense of energy and movement, reflecting the hard work behind every service GW offers. Using images of GW workers added a human element and helped us connect with our users, which was a key business goal for this project.

We also considered the modularity of these concepts and used a fairly limited color palette to allow other brand colors to be represented on each store page without conflicting with the main brand. Conceptually, GW is the biggest company, and all its entities are part of the same community.

GW-patterns-02

Patterns for building trust with the client and explain services

GW-patterns-01a-1

Keeping it real

As the visual direction for the website was uncovered, a portion of our team was responsible for making UX decisions and creating wireframes. Based on those, I began to translate the selected direction into the website experience.

One challenge was designing patterns that were technically feasible. Since we were building with WordPress, which has specific constraints, it was crucial to communicate with the development team to ensure we only showed the client what could realistically be done. Anything beyond our capabilities could be backlogged and presented as opportunities.

GW-full-examples02
GW-full-examples01
GW-full-examples03-a

Final thoughts

I always enjoy projects that heavily focus on visual design. They provide an opportunity to learn more about typography, colors, and the basic principles of design. As one design director once told me (paraphrasing), "You can teach designers how to create a good experience, but you can't teach designers how to see." I am grateful that I can apply my creativity to different scenarios and explore the entire product design spectrum.

After delivering our designs, I moved on to other projects. Groundworks underwent a leadership change, and new design decisions were made. Although much of the basic structure remains in the current GW web experience, the new leadership moved away from many of the decisions made during our discovery phase.

Though it was bittersweet, I am glad to have had the opportunity to participate in such a complex project. The experience was very rewarding, involving tight collaboration with my design director at the time, and I learned a lot from these interactions.