A spotlight on our design process

I’m a designer at Wholegrain, and have been for almost three years. I’ve seen our design process adapt over the years, becoming increasingly thorough as we continue to take on a greater diversity of clients.

In this article I’ll be sharing the detail of our current design process, including the tools and methodologies we use, from our first meeting with a new client, to the launch of your brand new website.

We start all of our projects with a series of discovery workshops. These are important, as they essentially set the foundations for the work ahead. The discovery workshops take a deep dive into the needs of the site/organisation and help to bring about, through collaboration, new ideas and inspiration for the website we’re creating. The workshops themselves will usually cover the following:

User personas: We hold up a magnifying glass to the key users for a site. This is usually done in collaboration with each client, as they know their target audience better than we would. By studying these personas, we’re able to map out their wants, needs, desires and the context in which they arrive on the website.

User journeys: The next step is looking at specific user journeys for the personas detailed. We look to find any ‘pain points’ – anything in the user journey that currently has the potential to frustrate site visitors – any positives, and to highlight opportunities. The user journeys help to determine and prioritise both the functionality and content for the site, from which we can design a sitemap for a smoother user experience.

Site map: The sitemap is the last step of the workshop phase. We will build the sitemap according to the needs of the brief and the outcome of the persona and user journey development. Once the site map is agreed and signed off, we then move forward to the more formal design phases.

The next natural step is the wireframing. Wireframing is the step we take to design the digital experience at a structural level. The wires are commonly used to lay out the content and functionality that we discussed and prioritised during the discovery workshops. The wireframes are essentially a visual manifestation of the sitemap.

These wireframes were designed in the online program Whimsical, which is a great and fast collaborative app from which wireframes can be designed, critiqued and signed off. Additionally, we have done some wireframe work within Sketch as it allows us to represent much more closely the functionality of a ‘live’ website.

Once the wireframes have been signed-off, we move swiftly to the high-fidelity design phase. Within this phase we look to put a UI design (User Interface) to everything that has been mapped out previously. Essentially, everything that needs to be designed will be covered during this stage. 

You can check out our projects on our portfolio. All of these have been through this formal staged process, and each, where possible, are designed within the atomic design methodology.

This is a non-client facing task, but a super important one. The designer on the project will spend half a day crafting and exporting all important assets for the site. Alongside that, we’ll have a call to go over the project at it’s design completion stage to make sure the developers are along the same lines.

The developers will have had oversight of the project from a technical point-of view from the outset, but this is a chance for a formal sign-off of the design stage. It’s at this point that we, as designers, will step away from the driving seat and let the developers turn the static imagery into a fully breathing site. Exciting times.

The final step of the project before the website is deemed ready to launch is a QA (quality assurance) and design review stage. This step usually involves everyone on the project team, to ensure that nothing is missed. The designer will also conduct a review of the site to make sure it is pixel perfect, and aligns with the design vision.

And then voila, the site is launched! 🥳

This design process has been developed over time, with input from the Wholegrain team members, and our clients. As with our approach to all of our work, we respond and adapt to feedback to ensure that we work in a way that gets everyone involved and gets the best results for our clients.

If you like the sound of this process and you’re thinking about a website redesign, the best place to start is at the beginning, with an exploratory discovery workshop! If This is something you’d like to learn more about, our team are here to help and we’d love to hear from you.