Part I
Lets begin by creating a Strategy for a new product (system/app/site etc). (150-200 words) that could give our users a better morning. The strategy should outline the user’s needs so, to better understand your user, create 3 user profiles. Knowing your user’s needs will allow you to define your goals for the new product. Through understanding who you are designing for you should be able to answering the following questions: What do you as the creator of your product hope to achieve through its creation? And what will your product users hope to gain or achieve by using it?
Part 1.2
Second, define the Scope of the product. by choosing the features and functions it will have (250-300 words). The features you choose must help you meet the goals defined in the strategy, for example a goal is: to sell a product; a feature to meet that goal would be a shopping cart and method for collecting payment. 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.
Part II
In class outline a Structure, aka an information architecture/ user flow, based on your Strategy and Scope. This should illustrate how users can navigate through your product (this should be done in your sketchbook first, then polished in illustrator, photoshop or omnigraphle). This should determine the organization methods.
With your Structure complete, create the Skeleton (wireframes), of your product. 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.
As the final step of part 2, construct a paper prototype that shows all of the necessary navigation outlined in your Structure and follows the the design of the Skeleton. A robust prototype is due next week and should be ready for user testing.
Articles and Resources:
- http://usabilitygeek.com/paper-prototyping-as-a-usability-testing-technique/
- http://alistapart.com/article/paperprototyping
- http://www.uie.com/articles/prototyping_tips/
- http://www.uistencils.com/products/website-stencil-kit <these are mostly just cool
- UI_Stencils_Letter.01 <to help with your wireframes & prototypes.
Part III
Individually, shift your focus to the Surface stage of the design process by creating final design comps that highlight the most important pages of product. 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 either printed and mounted on matte board using dry mount, or presented using google slides.
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), script and tasks for user testing, reflection on user testing, and comps. Treat this as a portfolio ready piece that will showcase the forethought and planning behind your final visual solution.