Usability UI Design UX etc - documenting for a project

Question

I'm a software developer, and I'm going onto a project now that involves implementing a website using ASP.NET (3.5 / 2008, using the Web Client Software Factory). I've been tasked at creating a UI / UX Design Document for the project, however I don't really know where to start.

I've been on one project in 3 years where there was a formal UI design document, which included layout and style guidelines/rules (e.g. the application has a header, navigation, etc., links must be colour A, buttons for positive actions must be on the right, etc. etc.). It was pretty useful in hindsight, I appreciated that someone went into that much effort too - even defining the CSS classes in the document. However, the doc was based on an existing application and conformed to the business' overall corporate identity.

The current project is a new project, which at the moment doesn't have clearly defined requirements (yes, I know... how do you design when there aren't many requirements... I digress). It is hard to know what functionality exactly will be needed. There are two different user types / personas, but no formal research will be performed on them for this document. Also, I'm not sure of the corporate identity, apart from that the business has some rules regarding use of their logo, which I'll only get further clarification on in a few days time.

So I'm slightly in the dark, throwing paint at a canvas, hoping I get a pretty picture at the end (if only I were Jackson Pollock).

What would you include in this document? It is aimed at the business (the client), as well as the developers. I can think of only the below:

1. Layout - header, footer, content, navigation
2. Styles - colour palette and styles of the different expected components
3. User Interactions - when a user performs an action and must wait they are notified by a modal dialog, validation is done using AJAX, navigation should be contextual, tasks should be performed with a minimum amount of clicking / navigation, etc. etc.

Has anyone got any experience in creating such a document, or any known, tried and tested process for UI design?

Thanks,

Answer 1

First, you should aim to understand the project's goals and target audience. What are the main objectives of the website, and who are the users? You mention two user types, so you should consider their needs, motivations, and pain points. This information can inform the design decisions you make later on.

Next, you can create a site map or user flow diagram that outlines the different pages and how users navigate between them. This can help you identify the key pages and functionality that need to be prioritized.

Once you have a good understanding of the project requirements and user needs, you can start working on the actual design. You mentioned layout, styles, and user interactions, which are all important aspects to consider. You can also include guidelines for typography, imagery, and icons, as well as any animations or microinteractions that enhance the user experience.

Another important consideration is accessibility. You should ensure that the design is inclusive and accessible to users with disabilities, such as those who use screen readers or have visual impairments.

Finally, you can include any technical considerations, such as browser compatibility, responsive design, and performance optimization.

As for a process for UI design, there are many different methodologies out there, such as Design Thinking, Agile, and Lean UX. You may want to research these and see if any resonate with you and your team's workflow. Ultimately, the process should be flexible and adaptable to the project's needs and constraints.

I hope this helps give you a starting point for your UI/UX design document!

To know more about UI UX, It's recommended to join UI UX Design Course today