Design Project Types and Processes
When I work on projects I can pretty safely assume that what’s been handed to me is going to fall into one of three types – other designers may categorize projects different and split them apart into different types, but we’re going to focus on what I see as the three types of projects I commonly work on.
Project Type 1:
A brand that has an existing website falls into Type 1. These projects and clients typically are seeking NewLeaf out to perform a design refresh and usually have content they’ve accumulated that they can give us access to. These kinds of projects will usually have a fair bit more design direction and more concrete layout organization for me to springboard off of. Generally speaking, before starting the design process, a very general site map and wireframe will be made up to refer to as the design develops.
Project Type 2:
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 they only have their current content to work with. Sites such as these usually have poor organization to go off of, and requires a little more layout attention to wrangle into a good position.
Project Type 3:
These projects involve a brand that has no current site (at all) that are basically new to the e-commerce scene. They have a budget in mind and my work bases itself on how well I can build up a design for their brand within the confines of both the budget and the fact that they have no online presence.
In-Depth With Type 1: Discovery
Generally speaking, Project Type 1 will be the most interesting project to work on and pick apart, so it’ll be the project I dive into a bit to help you grasp how I navigate the process. To start, we have the Discovery process. I take a look at the current site, make mental notes of the styles in play and try to take notice of any repetition as I move through the website to get a better understanding of their brand. If I have a site map or wireframe for the intended redesign that they want on the website, I look it over first before turning my attention to the homepage.
When I’ve given the site good run through I then shift my attention to any competitor sites the client may have mentioned or that I can guess would be competing in the same market to get an understanding for how the competition stacks up, what mistakes they’re making and where they’re succeeding in their design. I also turn to miscellaneous sources of inspiration that the client usually provides us with – things they want the site to look similar too or take notes from.
With my understanding of the brand, what the client would like to see and how the competition is going about their business, I then dive into understanding the industry the client is competing in. Moreover, I get very familiar with the key selling points of the client’s products to help inform how my design can do something about emphasizing these points. At the same time, I spent the entire process mapping out layout ideas that I feel will flow with the new content the client intends to populate pages with, as well as remaining in line with the improved styling.
In-Depth With Type 1: Design
Once the discovery part of the design process is complete, we move to the actual Design part of design. Typically speaking, projects of this type means I’ll have some kind of style guide to go off of that the client provides because they’re interested in preserving branding identity.
I always approach site design from a top-down perspective. When a potential customer opens a site, the very first screen that should be seen should immediately “wow” the user and compel them to scroll down the page to discover more about the brand that they’ve been exposed to. I firmly believe that first impressions are lasting impressions. Bearing this in mind, I take into account the brand’s logo, colors, fonts and menu items to inform my decisions, and use this to adjust and mess around with different header styling. I constantly reassess the current layout hierarchy and rearrange or add anything I feel is an improvement to the structure. For example: walls of text get pared down and made more engaging with icons, line breaks and infographics.
Next, I move onto looking at their products – this is mainly because most e-commerce sites have some sort of “Featured Products” or “Collections” page on their homepage layout. This part of the process is important for collections and product pages because we’re setting a base for how product information is styled. This means we look at products site-wide and look for the products with the longest names, descriptions, unusual product image dimensions or any other of a number of common characteristics. From here I try to arrange the product information in a way that complements the product image as much as possible.
Now that I’m getting closer to finishing the homepage, I’m also closer to finishing a solid core for the website. From here my focus shifts to fixing minor detailing and I simply revert changes at any point I run into a creative block. Speaking of blocks, when you encounter one (and you will) you take the time to zoom out of the project, take a break and step away from staring nonstop at your design. After a few minutes you can return and look at your design again with rested eyes and the ability to pick out minor color conflicts, inconsistent spacings, font stylings and more. Time away from your design is always important and it always does you some good if you use it correctly.
We come to the party I always save for last: saving Instagram feeds and footers. The main reason for this is that once you’ve completed the rest of the site the styling for this just falls into place. I finalize any notes of on-hover styling I’ve made throughout the process and depending on how efficient I’ve managed to be, I find new ways to simply and improve my finished product to ensure maximum satisfaction.
From here it’s a quick save and upload into our product manager and the Invision app. Here in this app is where I turn my design into an interactive pseudo-web page. If I’ve done my due diligence and made a good design, along with making my mock web page as interactive and close to the homepage experience as possible, the better the client feels about the prototype and the better their first impression of my work is.
And as I’ve said before: 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, saving time for both you and your client, and reducing the likelihood of ending up with a site that changes so much it compromises the spirit of the initial design.