Dapper Gentlemen's Website Design Process

The elements of our website design / redesign process include user experience design (UX), user interface design (UI), prototyping, mockups, wireframes, user flows, keyword research, information architecture, competitor analysis, html5, scss, css, postcss, javascript, strategies, marketing, analytics and so many other fun things! Keep on reading for an overview of the 8 main elements.


Measure + Iterate

1. Individual Interviews

The website design and development process starts with individual interviews which are required to build a solid foundation for the website's user experience. These typically take 30 - 60 minutes and give the designers and developers insight into the attitudes, beliefs, desires, and experiences from the website's users and stakeholders. For new websites that don't yet have any users it is best to interview people in your perceived target audience. Bonus points awarded if this can be done in the users environment.

These interviews are typically recorded and analyzed along with any notes taken afterwards in an effort to get a deep understanding of the product. This is crucial when writing vision and mission statements, brand guidelines, project briefs, marketing and content strategies and website. By having a clear understanding of the product the most important part of the site, the content, will be communicated effectively.

Why We Do This:


2. Project Briefs

The next step is to put all of the important information we learn about the product into a living document called the Project brief. This document gets updated as we continue working with more information that will help us design and build the best website for you. This document contains all the things. Things like...

  • Project Milestones
  • Business Objectives
  • Content Strategy
  • Competitor Analysis
  • Content Audit
  • Keyword Research
  • Goals
  • Metrics (what and how will we measure the success of the parts of the project)
  • Basic and Latent Needs (must have and nice-to-have features)
  • Frameworks, platforms, APIs and special tech requirements

2. Competitor Analysis


The point of doing a competitor analysis is to produce good usability metrics as well as to aid decision makers in their planning and strategic goal setting. The end results will yield recommendations such as visual design aspects, landing page construction,  to content and messaging strategies.

The basics of a competitor analysis are to look at what else is out there and compare their strengths and weaknesses to each other and your products, as well as to clarify areas of opportunity for you to outshine your competitors. You will be finding baseline readings from which to measure success and show you what the competition is up to and how you can do it better. The goal of a competitor analysis is to help you and other project leads make smart business decisions. 

Identifying the Competitors

You may be given a list of competitors which will help with this process, but that list is probably incomplete. Start with Google searches and then move on to tools by moz, spyfu, SIC code and others to figure out what categories and companies to analyze. We recommend you pick between three and ten competitors' websites to analyze.

Analyzing the Competitors

Now that you have your list of competitors' websites it's time to analyze them

3. Keyword Research

Figure out what your target audience is searching for, and make sure to fill your content with keywords that reflect that.

4. Content Strategy


5. Content Audit

The second step is a content audit. Content in the case of a website is all of the site's assets. The images, video, styles, and copy. Many companies will have an existing site they want redesigned, or have a collection of content they want on their site. The goals here are to find out as much about the existing content as possible to make it's new home the perfect fit. 

Once all of the content is organized we are able to...

  • update the content to be current.
  • edit the content to focus on our keywords.
  • consolidate appropriate pages.
  • remove appropriate pages.
  • find content marketing opportunities.
  • find and fill content gaps.
  • gather all urls to create redirects if needed.

6. Choose or Build a Framework

Decide what technologies you need to build the site.

6. Information Architecture

Layout all the things smartly

7. Prototypes Wireframes and Mockups

Low-fi to Hi-fi

8. Visual Design

Make it pretty