NAVIGATION
REDLINES:
coming soon
WIREFRAMES:
Sample Outline: NWLS.pdf
The above sample shows a basic outline for a project I completed for a local Realty Company.
CLIENT STUDY:
coming soon
Usability & User Experience Design
UX Design - or the study of user experience is something I have been into heavily for the past couple of years. Since a lot of the companies I work for have strict NDA policies, I have decided to, instead, document the process through the definition of what I do. This means I will be provide samples of work and define these samples through the process that I follow when working in this field.
UX PROCESS
As a UX designer there are several things I have to be quite familiar with. I have attempted to outline the rough process that I would use while working for a client. The process flow can differ slightly between various groups depending on management and what each persons involvement can be when working as part of a team. For this particular layout we make the assumptions that I am handling the design as a vendor and my deliverables will be handed off to a developer to finish the back end. Note that there are always exceptions and this sample is merely a guideline and not a rule.
THE STEPS:
Client Analysis: This steps involves a one-on-one with my client. The purpose is to understand the goals and business requirements of the project. To flesh out the details of what we need to accomplish with this particular job. There is a great deal of information gathering that happens at this stage. Here is where we really define the scope of the task we are about to undertake. It is not unusual for this stage to shake out questions about a the project that you thought you had completely vetted. Without this stage, I believe it is impossible to have a successful project completion. You may click here for a more detailed study of client analysis and work flow.
User Flow/Storyboarding: In the storyboard stage we take the information we gathered in the prior step and begin to place the project into a "visual outline". This stage allows us to see what we have to create and gives us an Idea of how many pages or elements we have to design for. More details on User Flow
This Diagram follows a work flow outline of a software wizard to the UI.
Wireframes: A wireframe is where we start defining the look of the site. This is a rough outline that demonstrate placement of content more than anything. They are used as a means to hammer out the rough details and give both the designer and the client the understanding of where vital UI controls will go. (I.e. Navigation, Primary Content, dynamic modules, Images…etc.).
The below Diagram is a sample of a wireframe page I created for a networking site. Click here for the PDF
1st stage Usability testing: Here is a good place to run through some light UX testing to ensure that controls are easy to find and are located where they are expected. This will possibly change down the line to adapt any site requirement modification (because if we are honest about it... in the real world, this information can change no matter how well you flesh it out). It is a good reminder to keep things on track and help to maintain project scope. This may not be a necessary phase if you are working on a smaller site with relatively no content… the navigation may be extremely clear at this point in which case you can probably wait for the pre-hand off to test.
Comps/prototype:Here we incorporate the visual elements. It is likely that a certain amount of “skinning” of the site has taken place as we became better informed on certain UI controls and how they function. Introduction of first draft UI text should be included as this is our first completed look at the site. The prototype can be done on paper, as a PowerPoint presentation, or even as a static XHTML site that simulates the functionaility. We are now focused on incoporating the brand and "Look-and-Feel" of the site.
Usability testing: Now you have your rough draft – Organize a group of end users that fit your demographic model and have them test the site to determine what problems they come across when using this site. Document the process. (NOTE: This is often performed in a lab with audio and video equipment used to document the user actions. A lab is helpful but not required to conduct usability testing.) Usability testing is a very good idea for all sites. By this time you are probably too close to the project to have a good idea of what problems could arise related to design and functionality. This is why usability helps give you a new set of eyes and allows you to create a site that functions easily for everyone. It can also be useful in helping you with FAQ page construction.
Redlines: This term refers to a pixel perfect finished design with an overlay (often red colored lines) that specify the completed dimensions and pixel perfect placement of elements in the final design. This can really make the designers work a lot easier. (NOTE: we are assuming that we have agreed and signed off on all design elements, UI controls and copy - Redlines are usually the designers hand off to the web team - This should include a design spec.)
All modifications that were needed as a result of anyUX studies/client modifications, can now be present in the redlines and explained in the design spec. In some groups this process can also require the desiger to hand off any and all HTML, CSS, and or code that the designer may of been responsible for.If you are the web designer as well then this is what you use to build the front end of the site.
Post-Mortem Reporting: As a rule, when you finish and launch any site, it is good to put all the files on a disc along with a report that includes all tech/design specs and any related assets or comments, or content. This is what you will hand off to the client at the final stage. This report should be a summary of the entire project and it should contain enough information that any web team can look at this information and dive right into the update or maintenance of the web site.
