Intradiem.com

This project has taken a considerable amount of time and effort, and I'm proud of the end result. When I first started at Intradiem, I didn't have any web development knowledge to speak of. I'd designed for layouts for developers in the past, but had never been able to get any large project completed on my own. However, a few weeks after I started at Intradiem, the opportunity to redesign their website was given to me. Rather than shy away as I'd done in the past, I decided to go all in and have a trial by fire with webflow as my tool of choice. The resulting site was something that I can be proud of as my first effort at web design, but I was also painfully aware of it's shortcomings and bloated code.

After about 6 months, I decided to pitch the idea to redesign the site using an atomic design methodology. In principle, I wanted the site to be made up of a small series of reusable elements instead of the one-off styles that currently existed. With a smaller number of styles, the site would be easier to maintain, give enhanced legacy browser support (we needed to work completely in ie8), be much quicker to develop new layouts, all while remaining consistent.

Also, the site was entirely static with Webflow used as a quasi-CMS. This was causing code to be accidentally changed, and content to be added in an unpredictable way. It was a mess.

Problems with Current Site

Bloated Code
Styles were not written to be reused and pages were designed inefficiently.

Static Pages
We didn't use a CMS (wordpress, squarespace, drupal, etc.) and had to host the site on 6 different subdomains. As a result, we were basically dealing with 6 different code bases and over 100 static pages with no real front-end for content managers to use.

Poor Design
The designs were made by the agency that did our rebranding. I don't mean to throw them under the bus, but I think the team that did the layouts forgot to think about the developers when designing the pages. Technically, it was extremely (and unnecessarily) difficult to build, and even more difficult to maintain.

Solutions

Atomic Design
Reusable and lightweight elements. A standard base em unit for easy scaling on small screen sizes.

CMS
I can't take credit for this one, really. Webflow had been teasing a CMS for months, and finally released it juuuust as we were about to go with Wordpress. Thank. God. (My own site is built with this tool)

Uniform Design and Clear Color Usage
Intradiem has a 7 color palette, white, forest green, kelly green, lime green, gold, and orange, and light grey. On the previous site, the colors had no clear connection with user actions. We established a rule that orange was always used for CTAs, lime green was for social contact, kelly for information, etc. Previously it was difficult to maintain a proper contrast between buttons and content. With a system for usage clearly defined, the UI fell into place.

New

Old

Size (home page)

330kb

1.8mb

Requests

33

90

CSS Size

57kb

151

Load Time
(2mb/sec)

1.6 sec

8.42 sec

Conclusions

Well, this project actually won't see the light of day in the form in which I designed it. Shortly before the project was completed, I shifted away from Graphic/Web design to managing UX at Intradiem, and as a result I handed this off to another team. Soon after that, the original design firm was rehired to inform the direction of design for us, and they decided that many of the stylistic decisions that I had made were off-brand and chose to go back in some of the directions that the original design had. The concept of atomic design is still present, but I feel that the emphasis on usability overall has been lost in the shuffle. Colors, for example are not as indicative of specific types of user action, and some pages have implemented elements that are unique, and as a result need to have code created from scratch to make them happen.

However, even though my version of this won't make it into the world, I still plan to keep a copy of it hand so that I can go back and reference it. The reusability of elements and the need to make sure that each individual piece is as functional and complete as possible has informed all projects that I've worked on since. I had one perception of 'atomic design' before this, but now have a better idea of the decisions that have to be made to keep it afloat to project completion. If you're a designer reading this, my one piece of advice would be to not design the static solutions that look great and call it quits. Talk to developers, understand the complexity of your designs, how they'll be built, how they can be reused, and how the web works before committing to your design. If you can't explain how it will break or how and why it will flow down to multiple screen sizes, you shouldn't design it at all.

As far as performance of the page, I'd only be able to speculate that it would have performed better as a result of better page performance and improved site structure. Intradiem is in a highly specific space, so users are a little difficult to find to test with. In the tests that I did run, about 4 rounds of 5 users, I did notice an increase in discovery of some of the pages that were previously ignored, and there was a very positive reception when compared against our competition.

More Case Studies

Want to work on a project with me? Just want to chat?

Let's grab a cup of joe, go over the details, and get to work.
Contact Me ⇗