When we get a new design project, we can pretty safely assume that they will fall into one of three types – other agencies may categorize projects into different types, but today we’re going to focus on the three types of projects we commonly work on.
A brand that has an existing website falls into Type 1. These projects and clients typically seek us out to perform a design refresh and can provide us with content they’ve accumulated. These kinds of projects usually have a fair bit more design direction and concrete layout organization for us to use. Generally speaking, before starting the design process, a high-level site map and low-fi wireframe will be made up to refer to as the design develops.
These projects stem from a brand that also has an existing site that, much like Project Type 1, also want a design refresh. However, the main difference here is that they only have their current content to work with. These sites usually have little organization to work with, requiring more layout attention.
These projects involve a brand that has no current site (at all) - they are basically new to the e-commerce scene. We design a custom website for their brand within the confines of both their ideal budget and lack of online presence.
Generally speaking, Project Type 1 is the most interesting project to work on, so let’s walk you through how we navigate the design process.
To start, we have the Discovery process. We perform an audit of the current site, making notes of the styles in play and trying to take notice of any repetition to get a better understanding of the brand. If we have a site map or wireframe for the intended redesign, we’ll look it over before turning our attention to the homepage.
When we’ve given the site good run through, we shift our attention to any competitor sites to get an understanding of their competition, making note of their website design successes and mistakes. We also turn to inspiration sites that the client provides.
Moreover, we get familiar with the key selling points of the client’s products to help inform how our design can emphasize these points. At the same time, we mapping out layout ideas that we feel will flow with the new content the client intends to use, while remaining in line with the improved styling.
Once the Discovery is complete, we move to Design. Generally, these projects will have a style guide put in place for branding. We plan to incorporate their brand identity in the design.
“First impressions are lasting impressions.”
We always approach site design from a top-down perspective. When a potential customer opens a site, the very first screen should immediately “wow” the user and compel them to scroll down the page... First impressions are lasting impressions. Bearing this in mind, we take into account the brand’s logo, colors, fonts, and menu items to adjust header styling. We consistently reassess the current layout hierarchy and make improvements to the structure. For example: walls of text get pared down and made more engaging with icons, line breaks and infographics.
Next, we evaluate their products – most e-commerce sites have a “Featured Products” or “Collections” section on their Homepage layout. This part of the process is important because we’re setting a base for how product information is styled. This means we look at products site-wide and make a note of the products with the longest names, descriptions, unusual product image dimensions or any other of a number of common characteristics. From here, we arrange the product information to complement the product images as much as possible.
Now that we’re closer to finishing the Homepage, we’re also closer to finishing a solid core for the website. From here, our focus shifts to streamlining minor detailing and reverting changes when we run into creative blocks. TIP: when you encounter a creative block(and you will), take some time to zoom out of the project and step away from staring non-stop at your design. After a few minutes, return to your design again with rested eyes and the ability to pick out minor color conflicts, inconsistent spacing, font stylings and more. Time away from your design is ALWAYS important.
This is the part we always save for last: social feeds and footers. Once you’ve completed the site, styling for this just falls into place. We finalize any notes regarding on-hover styling we’ve made throughout the process and we find new ways to simply improve the finished product to ensure maximum satisfaction.
From here, it’s a quick save and upload into our product manager and the Invision app. The InVision app is where we turn our designs into an interactive pseudo-web page. Mocking up web pages to reflect the homepage experience as closely as possible, gives the client a better feel for the prototype.
And as previously mentioned: first impressions are lasting impressions. Do a good job on your first prototype and the number of changes you’re asked to make will drop significantly. This saves time for both you and your client, reducing the likelihood of ending up with a site that changes so much it compromises the spirit of the initial design.
If you have any more questions about anything you've read, feel free to reach out to our team directly at info@arcticleaf.io.