Define a Strategy for your new system/app/site etc. (150-200 words). The strategy should outline the user’s needs (to better understand your user, create 3 user profiles), and begin to define your goals for the new system. So you should begin by answering the following questions: What do you as the creator of your product hope to achieve through its creation? And what will your system/app/site etc. users hope to gain or achieve by using it?
Second, define the Scope of the system/app/site etc. by choosing the features and functions it will have (250-300 words). The features you choose must help you meet the goals of your system/app/site etc, for example a goal is to sell a product a feature that a user would need to meet that goal is a shopping cart. For the shopping cart to work it will need a database to store products & inventory, and a merchant account to process credit cards to function. In other words features are what the users see, functions are what makes things work. These two elements are due next week and must be ready before we move onto benchmark 2.
Sites highlighting new technology to explore:
In class outline a Structure, aka an information architecture, based on your Strategy and Scope, to illustrate how users can navigate through your system (this should be done in your sketchbook first, then polished in illustrator, photoshop or omnigraphle). This should determine the organization methods.
Once your Structure is complete, create the Skeleton (wireframes), of your system. This should determine the types of navigation used (i.e. global, local, supplementary, contextual and courtesy), as well as, outline the placement of content, navigation, images, video, etc.
Before the end of class photocopy your information architecture and wireframes so everyone in the group has the same set.
Outside of class, construct a paper prototype of that shows all of the pages outlined in your Structure and follows the the outline of the Skeleton. A robust prototype is due next week and should be ready for user testing.
Articles and Resources:
- http://www.uistencils.com/products/website-stencil-kit <these are mostly just cool
- UI_Stencils_Letter.01 <to help with your wireframes & prototypes.
Individually, shift your focus to the Surface stage of the design process by creating final design comps that highlight the most important pages of your self-checkout system (home, settings, notifications, buy, etc.). These comps should be based on your groups refined wireframes and paper prototypes and use any or all of the following: photoshop, illustrator and/or fireworks. The visual design should be yours, however it must be based on the group’s structure (information architecture) and skeleton (wireframes). These comps should be printed and mounted on matte board using dry mount.
Lastly, bring the individual parts of your process back together. Create a PDF of your brainstorming notes, proposal (your strategy & scope), architecture, wireframes (make photo copies so everyone has the same set), and comps. Treat this as a portfolio ready piece that will showcase the forethought and planning behind your final visual solution.