3

I'm being tasked with giving style and behavior revisions to a massive website that I designed some time ago.

It's a Drupal site for a decentralized organization and since the site's creation all sorts of imperfections have cropped up. Spacing, using of color, font rendering, inconsistent user patterns, etc. are all part of this design audit that I'm being asked to do.

Editing this website is one task in an already giant list. I'd like to know:

  1. How do I thoughtfully explore this website in a focused and methodological way?
  2. Any other tips?

Thank you.

Improve this question
3
  • Does the website cover one user base or many user's in several departments?
    – DarrylGodden
    Feb 1, 2017 at 18:20
  • Create a style and feature guide. Create a sitemap list. Prioritize and start going through section by section. No real easy way to tackle this.
    – Mark
    Feb 1, 2017 at 18:48
  • @DarrylGodden The latter.
    – user96580
    Feb 2, 2017 at 18:42

3 Answers 3

Reset to default
2

Create a Content Audit Document

When I do this I create a Content Audit Document, not dissimilar to the one shown in this article. I've played around with using databases, but usually just stick to Excel.

Each page is uniquely identified, and had several attributes (these are the columns) like URL, Title, Description, etc.

Define Some Key Attributes

The attributes are the key, and should be representative of the concepts you are trying to document. For example, I once audited a Tech Support site and one of my columns was called "Has browser pic?", and each page had either 'Y' or 'N'. At the end, I could easily see where all the screenshots of browser windows were, and when I had to delegate the task of updating them all, I sorted by that column and easily created a list.

You'll have to be creative and come up with column headings that are meaningful and actionable e.g. "Color Deviation" (Y/N)

Put On Some Music and Audit!

Then you have to visit each page and mark whether the page has any of the attributes you defined.

You'll almost certainly make up more attributes as you go along and have to go back in fill in values for previous pages.

You may find that you can save time by working at at different level e.g. subdirectory level as opposed to page level.

Improve this answer
0

Depending on what specific things you're looking for I'd recommend using some sort of crawler to automate at least parts of the job. I personally prefer a tool called DeepCrawl.com. It follows all links throughout your site (you can also upload your own URLs or connect it with a XML sitemap file or Google Analytics for better results) and creates reports for you such as "Pages with thin content", "Pages with duplicate titles", "Non-indexable pages".

One thing I miss though is being able to customize what Deepcrawl searches for, i.e. if you wanted a list of all pages with the word "Icecream" in the body text, or list all pages that is missing a Google Analytics script. "Screaming Frog" is another crawler that can perform these custom actions, but for everything else I recommend Deepcrawl.

I realize a lot of your task involves looking for things that robots won't pick up, but hopefully this tip is of some help.

Good luck!

Improve this answer
0

To methodically approach a redesign of a large complex site:

  1. Start with a site map. Break apart the site into hierarchical sections, content types, categories etc. The site navigation can help you with this, but think more high-level. Typical categories might include: Homepage; Normal content pages; Hub/redirect pages; Product description pages; Policy pages; Shopping cart flow; etc. Be thinking about all the different use cases for the site.

  2. Identify the types of "modules" on each page or page type. For example, all normal content pages have the basic elements: Page header, alerts section, main content section, content sub-sections, etc.

  3. Create a new "design standards" guide for all common elements and modules. For example, every H1 element (i.e. the page title) should be styled with a standard font family, size, color, weight, etc. Same goes for all H2, H3, H4... and any other common html elements like radio buttons and form fields. Most design standard style guides will have a predefined style for "primary" buttons, "secondary" buttons, etc., as well as the hover state, active state, disabled state, etc.

  4. Create mockups/designs of the most common, frequently used, or highest priority pages first. This is project management best practice, and it will help you stay on track with delivery, and keep your customer happy.

  5. Share the mockups and style guide with your customer. Get feedback and "buy-in" on your design direction. This will save you a lot of headache down the road. Once you have approval and sign-off on your design direction, proceed to step 7.

  6. Apply your new style guide standards to the remaining portions of the website. Handle "one-offs" and special pages individually, adhering as closely to your original standards as possible.

Other tips:

Tip #1 If a particular page gives you trouble, try this:

  1. Wireframe the existing page
  2. Determine which pieces/modules are truly required on this page
  3. Create a new wireframe using only the required pieces/modules
  4. Create a 2nd new wireframe - an alternative approach
  5. Pick a solution, and document some notes on why you believe this is the best solution.

Tip #2 Check out Twitter Bootstrap documentation, and understand that you are essentially recommending to your customer a new CSS style guide: enter image description here enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.