Points to be kept in mind while writing a document to redesign a web application?

Question

I want to redesign a website and write a document explaining my design approach and thought process. I have recreated the layout and explained my suggested changes. I have the content for the document but it's all unorganized. I have also listed service based websites which I feel have created good user interaction with their layout and design.

Can anybody suggest what points I should keep in mind, or to be precise, what should be the sub-headings of the document in order to make sure that I have covered all the necessary aspects of design and also to structure the content? It would be best if there was a template or an example design document.

Answer 1

Here is a rough guideline of the document layout I would follow for such a document

• Problem statement : An explanation of the problem and the issues faced by the current company
• User research\audience research : An explanation of user base of the site and how they influence the problem statement
• Stakeholder analysis - A matrix which calls out the various stakeholders and their effective influence on the design,layout and message of the site. I have not included users in this section since I am referring to only internal stakeholders here who will define the business objective of the site, However if your user base is these internal stakeholders you can merge this section with the previous section
• Competitive analysis - This is to determine best practices and see whats already in the market which can be used as a guideline or baseline
• Proposed Information architecture and taxonomy- This would involve the site information architecture and taxonomy
• Site flow diagram- This would be applicable if you are creating something like a process flow like a checkout process or a registration process
• Descriptions of the primary screens with annotated comments - In this section I usually provide screenshots of the primary screens along with annotations. The annotations call out key aspects in the page such as primary points of focus and call to actions as well directional aides which direct the user to a call to action.
• Design specifications and branding guidelines - You could technically call this branding guide but the main objective of this section is to call out the branding guidelines used
• Site resolution details - You could combine this section with the previous section but in this section I would normally call out the the resolutions for which we are designing the site for and the different screen sizes we are planning
• Technical details - This section is to mainly call out the technical details such as implementation details, backend stack , platform etc. This may or may not be needed in a design document but they stand to aid the development team about the technical constraints and the aspects they need to be aware of.

Please note that this list is not exhaustive and the ordering may not be how you would structure it but its a starting point.

Answer 2

Using text to try and explain a visual design is likely to prove frustrating and the result will probably be used very little.

Rather use sketches, concept art, and mockups to document your redesign. There will be areas where you will of course need some explanation, but explaining with images which show will be far more effective that giving someone a wall of text.

Answer 3

This is my personal mental hack for approaching communicating design.

Treat it as a UX problem

Who are you communicating with? What are you trying to communicate? Why? What are their goals? What are your goals? All the normal questions you'd ask about a design project - ask about the documentation you're producing.

Doing that helps you focus on the best way to get the information

Maybe you don't need a document. Maybe you need to have a conversation. Or a meeting and a presentation. Or some sketches on a napkin. Or a website. Or... something else.

The question "what should be the sub-headings of the document" without context is like trying to answer "what should be the sections of a website". There is no right or useful answer without an understanding of the purpose of the website and the people who will be using it.

If you want some examples of some kinds of document that you can use for communicating design you might want to take a look at Unify from 8shapes. The books Communicating the User Experience and Communicating Design are also good reads.