The secret life of the designer

In today’s constantly shifting digital space, the role of the designer has become central to every aspect of a project. But different project phases tend to involve a confusing array of specialist job titles – user interface designer, user experience designer, web designer, visual designer, interaction designer and so on. Not surprisingly, this baffles many people involved in their first company website redesign.

You’ll be glad to hear that in this short piece we are not going to dive into the nuances that separate these different roles. We want to give you an insight into some of the things a designer does throughout a project and highlight the valuable input each team member contributes: the development team push the designers and vice versa, and the content team focus us on how we streamline the editor’s experience.

At Pepper Digital, we practise a design-centric approach to digital. For this to work, the designer or design team need to feel ownership of the project from start to finish. They need to be the champion of both the future website user as well as the online visual identity of the brand.

And for a successful outcome, we need to work closely with the client and, through them, their stakeholders.

So what role does the designer play in a project?

I sat down with Anna, our UI designer, to talk through a typical project and to give you a glimpse into how we work.

Project kick off

It was great to be invited to the kick-off meeting and I’m really excited to meet the client team and find out more about the project.

I tend to listen more during the initial briefing to get a clearer picture of what the aims of the projects are. I’ll have plenty of questions for them later. I’ve already had a pretty good look at their current website and done some light research into the sector and their competitors. However, nothing beats hearing first-hand about the challenges they’ve had and the decisions behind their current site.

Luckily, they already have a refreshed visual identity and the new website will be the first public expression which is really exciting.

Planning

We’ve now developed the content strategy and discussed in detail the key actions we want the visitors to take.

In this stage I see myself as representing the visitor. I’ve got some ideas for how we can start to structure the content on the page to make it easy for people to understand what this business is all about.

For me, a wireframe is not just a diagram of what we want to include but the first exploration of how we will balance the content hierarchy. I’m working through some rough ideas playing with the size and placement of elements. Luckily we have some content to work with on this project, otherwise I would be working closely with the content team to get some copy drafts. Ideally I like to avoid the ‘Lorem ipsum’ trap!

Once we have a good structure in place I’ll also be creating an interactive version of the pages to make sure we’re all on the same page. Nothing beats seeing the pages in a browser for context.

Design

Finally my time to shine. This stage even has my name in the title.

In preparation for this phase I’ve already created a mood board of ideas and pored over the new brand identity that’s been created for the business.

I’ve also had initial chats with the dev team about some of my wilder ideas… and got their blessing on a couple. We’ll see whether they make it into the final design.

It might be a surprise to hear that initially I like to get all the bad ideas out of the way first so I work through rough ideas. But once I’ve warmed up I can start to home in on the look I think will work for the brand and allow the content to shine.

Before the client sees anything, I’ve made sure the dev team have seen them and I’ve accounted for anything they’ve highlighted.

However, once I have those concepts nailed, I always present them in a prototype view in a browser. I’ve sweated the details to get all the elements feeling right at the scale someone will view it on a screen, so I like to make sure the client has the same experience. A website does not look right when the full page is visible all at once!

Luckily the client was really positive about the direction and the team gave some really helpful pointers to guide me when refining the concepts. A few things also sparked some nice ideas that I will try out in the next round of designs.

As the designs are more widely shared I expect several rounds of tweaks and adjustments. The designs have also been stress tested at different sizes. Of course nothing quite tests a design like real content in a build!

Once signed off, prepping the designs for the development team is a good opportunity for me to tidy up the artboards and pull together a set of styles and components.

Development

The team are already up to speed on the specifications and have a base Craft CMS set up.

I take the team through the final designs in detail. They’ve already seen previous versions but this is a great opportunity to get into the detail. They had some useful feedback during the design stage that pushed me to refine some of the really nice interactive elements in a way that they felt would not impact performance and, crucially, would also be accessible.

We go through the base styles including the colours and fonts and core components. The team are using Tailwind 3 for this project so I’ve made sure the styles are organised in a way that fits into the process. (Yup, I know how to keep the dev team sweet.)

To accompany the designs I’ve also completed some interactive prototypes of key interactions and effects that will bring it all to life. It will use a combination of Lottie animations and GSAP so Katie has been helping with the After Effects preparation.

Content population

Nobody knows these designs like I do, so I like to get into the heads of the content editors and build out the different layout permutations in the build. It allows me to check how the page responds to content changes and re-ordering of blocks.

The ‘spacing’ monster also makes an appearance, requiring adjustment to the way spacing is controlled on a page, based on where a block appears. At this stage, complexity creeps into the team’s beautiful and concise template code. This is when the designer gets to be the diva!

This is also a good time to check how well the image resizing is fairing and whether they need some adjustments. It’s always a balancing act between quality and file size. The use of responsive images has helped, although this makes testing a little more complicated.

Testing

The whole team is involved at this stage, which is quite fluid.

A UI design is a living ‘thing’ and needs to adapt to a multitude of factors that are constantly changing. So it needs to be tested across different scenarios.

Having spent some time adding content I’ve already got an idea of the areas that I want to look at in more detail. While we have to accept some variability across different browsers (and it’s far better now than it’s ever been) I still like to take a look across the board.

The templates are looking good. I’ve added my actions to our internal task list (I’ve always got something to comment on!). Once I see they’ve been ticked off I’ll double check it. Regressive testing is what’s it all about.

I also get to feel like a developer providing changes to CSS styles and minor interactions. There have also been instances whereby we’ve had to redesign aspects of an interactive element as it just doesn’t work once in situ. But this is what makes it so interesting.

Launch

It’s live! But this also means having another good look over the site. And checking that the team of content editors have populated the site as envisaged.

Next up?

The paint is almost dry on the new site, but I’ve now got some new layout blocks to explore for the site that came out of the final phase of the content population. And ideas to help support a future campaign!

There’s more to this designing malarkey than lot of people think ;)