Rebrand & Architecture Revision

SimplicityDX

SIMPLICITY DX

This particular project was one that boosted my Figma skills from novice to extremely confident, where I began utilizing many of Figma’s accelerators. This was made possible because I was hired on to help specifically for my Figma skills, so the majority of this project came down to technical skill as my project lead took on most of the stakeholder level work - however, design thinking still helped me reach some solutions I would have not have solved as efficiently otherwise.

Constraints and Considerations:

• Absolutely NO pink or purple

• Minimal product images on the home page

• Wanted to create a sense of motion

• Wanted to maintain the same structure from their original site

RESEARCH:

Competitive research primarily dug up what they didn’t want: big white blocks of background with simple text, large sections of product images, to name a few.

Only one site caught their interest. It was unique in its vibrancy and how colorful it was, making it clear this was what they were after.

ITERATION:

Finding the right amount of color without becoming childish was a balancing act.

Without wanting pink or purple, it was hard to get a range of color in the style they were looking for. This lead me to using monochromatic gradients.

I used geometric shapes and their angles to help push the concept of motion, as well as little pixel-like elements to animate around important information to raise hierarchy.

Disagreement among the leadership team was difficult to manage at times, but I was able to navigate through excess communication, mostly handled by my project lead, as well as what essentially became an A/B voting system.

FINAL OUTCOME:

Visual Design:

We heavily relied on constant use of geometrics, layered colors to drive focus and attention as well as a tool for creating a strong sense of brand.

Where there was a break in material, I tried to sparingly use pixel-like elements to continue to focus the user on the flow to maintain the motion of the page.

My project lead also built in smooth transitions we had planned while using Webflow.

Maintenance and Building:

I built a component and style library to make the production of my designs efficient and speedy, something that became a significant asset when we were hired for phase 2 of the project.

I built this library utilizing the concept of Atomic Design by Brad Frost, having atoms, molecules, and components. For phase 2, we needed to begin delivering marketing materials and social media banners, so having branded elements already baked in to pieces ready to assemble or dissemble sped up my delivery immensely and allowed me to hit a target date that would have otherwise been too aggressive.