Website Design Process
From discovery to design & beyond!
Are you looking to create an entirely new website or simply looking to redesign an existing site? Are you unsure as to the work that goes into creating a website? Maybe you are asking yourself, what should you consider when designing and building a website? And how can you ensure that your organizational goals are achieved?
6P RULE
Prior Proper Planning Prevents Poor Performance
It might be that you’re taking the first steps in a web project and are feeling overwhelmed. Or, that you’re a seasoned marketer struggling to grasp the ever growing nuances of design and technology.
Here we’ll show you how following a vigorous website design process is crucial to the successful completion of every project we do. And key to keeping our clients happy!
Over the years, we’ve honed and adapted the way we work, so here we outline our process for website design from discovery to delivery and beyond.
Website Design Process
Creative Questionnaire/Creative Brief
DISCOVERY
The discovery phase is the first step in the website design process and is a critical part of the project—just as important as the website design itself or even the development. It sets the tone for your entire project and affects all aspects of your redesign.
The discovery phase includes research and analysis to investigate how the website can best serve the needs of the business and its customers.
Discovery multiplies the effectiveness and profitability of your website redesign and takes into consideration any rebranding, replatforming, expansion, and anything else your organization might be looking to achieve as a result of this redesign.
While it produces skimpy deliverables, discovery is the #1-factor impacting web project success.
What Is It Exactly?!
We provide you, the client, with an in-depth questionnaire that identifies several key factors that shape and outline your business model and offerings. Each question allows us to better understand who you are as an organization, and paints a clearer picture of your customer base and target market.
We then couple this feedback with our own research, both looking at your existing site (if it is a redesign project) and your competitor sites. We do a modified version of a UX Audit that takes into consideration the UX/UI components of the site that are and are not working. We are under the mindset that if it ain’t broke don’t fix it. This can be true for clients with a large customer base that relies heavily on the site for recurring use. A complete change, if not intuitive, could result in frustrated customers and excessive site abandonment.
Mood Board
ALIGNMENT
Phase 2 is what we call the alignment phase. Here is where we take everything we learned from the discovery phase to quickly and easily convey our understanding of the client’s vision. Because website design is highly visual this phase is important to ensure that what was communicated both written and verbally is done so in a visual presentation, which we call a mood board.
Mood boards are a quick and surefire way to visualize the project and get client/stakeholder approval early on in the process. They are the visual output of our discovery phase and a way for our designers to align with our client’s vision.
Mood boards are ideal for setting branding guidelines, communication styles, and personality. They are more than just a means to pitch design ideas. They are an introduction to the proposed design style. For that reason, every mood board is unique to that particular project.
Information Architecture
PLANNING
Now that we have some general understanding as to the look and feel of the site, we move onto phase 3 of the website design process. Phase 3 is what we call our “floater” phase, meaning that it doesn’t always fall into the third phase of our design process. Depending on the scope of the project and the size of the website, it may oftentimes precede the entire design phase and may be a critical component to the initial project outline and proposal, however there are critical elements to this phase that are revisited here. In addition, it may come into play continuously throughout each step of the design process as it will be our roadmap/blueprint for the project.
If you are looking to do a website redesign and you are unsure as to the site structure and page count of your existing site, feel free to reach out and we would be more than happy to provide you with a free outline of your site.
Phase 3 is our planning phase. The planning phase allows us to get a high level view of the site and map out the site structure and flow process. To do this, we create what is known in our industry as Information Architecture (IA). Information Architecture is all about organizing the content and flow of the website properly.
Unlike a content outline or content strategy which is produced by a copywriter, the information architecture is a visual representation of the site structure and flow and is done from a design perspective.
When deciding on the information architecture, you have to think from the perspective of the user. This means you have to plan your site in a way that it solves all important questions for your user. Information architecture will form the basis for our next steps, i.e., content mapping and wireframing.
SEO
EXCAVATION
Phase 4 is our excavation phase. This phase can run concurrent to the previous stages and is often worked with one of our SEO experts so as to not hold up any of the design work. Here is where we take a look at the underlyings of where your site will be built. This is an important step for existing sites looking to be rebuilt and considering alternative site structures and content changes, as we will want to identify which pages and content are helpful from an organic ranking perspective as we will want to ensure that these get migrated over properly to the new site.
In this phase we take a snapshot of where the site currently ranks in the main search engines, such as Google or Bing. This informs development and acts as a ‘stake-in-the-ground’ for analysis of the new website’s SEO performance. For this we use tools SEMRush, Moz, Web Page Test and Google Webmasters. This phase will help guide our next phase for content development within the website design process.
Content Planning/Copywriting
FOUNDATION
Phase 5 is our foundation phase, and serves as the groundwork and underlying support for the website as a whole there are several options to consider during this portion of the project:
- Client will take this into consideration post website design.
- Client will be providing content either from existing website or newly provided.
- Client requests our support in providing content.
Regardless of the decision, we are equipped to come alongside our clients and help them move forward with whatever option they choose.
Similar to Phase 4,this content phase can and will most likely run concurrent with all previous stages as to not hold up of the design process.
We like to think of content strategy as delivering the right content to the right people at the right time. In a website design sense that involves us reviewing the content, assessing the information needed to tell your story, outlining key marketing messages, the overall brand style and tone of voice, and the balance of text against photography, graphics, video or downloads.
If you are in need of assistance or not familiar with writing website copy, you can work directly with one of our copywriters. We can either come alongside you and help direct you in the content that is needed for your site or we can do our own research and conduct interviews with key stakeholders to craft the right content for your site. This is a real collaboration between the client, writer and the design team to make sure the content works within the design and sets a tone that supports brand and communication objectives.
Wireframes
FRAMING
Much like construction of a new home, the framing portion of the web design project begins to put together a skeletal framework of what the site will ultimately look like. Here the site starts to come to life as we design more realistic content, fonts, image dimensions or button styles, which helps to visualize how the site might function before adding color and imagery.
Wireframes make the user’s experience central. They offer an objective look at the way a website will work, and how the visitor will navigate it. By presenting a basic, simple and clear visual representation of a website, including all of its major components like headers, footers, videos, forms, calls to actions, and more, it serves to define the basic architecture of a website, as well as the navigational structure.
The point of a wireframe is to put the focus on the arrangement of visual effects, as well as the informational hierarchy of the page. It can help you solve your functional and navigation problems in a manner that is simple to adjust and allows you to focus on the quality of user experience without thinking about color, fonts, and other decorative stuff.
UX/UI Design
BUILD
Phase 7 is the culmination of all that has been produced to this point. Here is where it all comes together. Like a home makeover television show, everything that has been worked up to this point has been mere glimpses and sneak peeks to what transformation awaits.
Using the wireframe as the UI framework for each page we apply the brand guidelines to the user interface (UI) and begin building the visual aesthetics of the site(animations, photography, copy etc.) Using our flow diagrams from the discovery phase, we optimize the user experience (UX) to make sure it’s engaging and efficient.
