Simple but complex

One of the biggest challenges of the project involved the website's audience. Because it catered to a wide range of users, from seasoned scientists, to college students, we had to find a way to make the content accessible, without watering it down.

So first, we needed to make sure that the content was arranged in such a way that it was clear and findable by all our users. To do this I ran a card sort with some of the stakeholders and subject-matter experts, and this was the result.

Finding our true identity

This government client was very well respected in the science community, but you wouldn't know it from looking at their website and branding; dated would be an understatement. In addition, they didn't have a clear brand identity or rules of any sort. So I teamed up with the same stakeholders to nail down a visual presence they could be proud of for years to come, while not forgetting where they came from. To do this I put together 3 style tiles based on their existing branding and domain.

Creating a design system

Now that we had a color palette and information architecture nailed down we could start prototyping some new designs. While simultaneously bouncing design concepts off stakeholders, I was building a flexible, component-based design system. I'm not going to go into the many benefits of component-based design, but by having a design system fleshed out, it not only makes initial implementation easier, but also helps with maintaining and adding features in the future. The entire design system is quite large, and property of the client, but here's a screenshot of the project in sketch.

Interactions

As development started, I started to flesh out some of the most important user interactions.

Final Assets & Implementation

The workflow on this project may seem odd to some, because not only was I the sole designer, but I also helped to implement the designs by writing frontend code with a couple other talented developers. What I would often do is prototype some designs in Sketch + Invision, get buy-in from stakeholders, then build out the HTML, CSS and JS where necessary. Then where necessary the full-stack developers would link the frontend code up with the CMS (Django + Wagtail).