Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

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.

share|improve this answer
    
This is exactly what I was looking for! I have worked on a list of my own, I'll cross check with your points. Thank you very much. –  Ashin Mandal Dec 6 '12 at 15:21
add comment

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.

share|improve this answer
    
I did recreate the layout in Photoshop. The text is just to explain why I did what I did. However, I do agree that images or sketches are far more explanatory than text. I just wanted to make sure I covered all the common facets, be it text or image because I am somewhat new to this. Thanks a lot for your response! –  Ashin Mandal Dec 6 '12 at 15:18
    
Agreed. You need images/snapshots, sectional ones to compare what was and what is explaining why it is, how it brings betterment to the initial design. –  Rahul Thakur Dec 6 '12 at 15:21
add comment

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.

share|improve this answer
    
I completely agree with you. Identifying the problem is the best way to approach any design. Your response answers many other questions along with this one. Thank you! –  Ashin Mandal Dec 6 '12 at 15:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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