Wish you had a posh pad this year, and didn't have to pay for it? Design a sweepstakes in which one lucky winner gets free rent for a year!
Based on the flowchart and discussions you have with your small group, create a process diagram (aka "Flowchart") to illustrate all possible user experiences within a simple promotional microsite. Use whatever tools you like, but post the final product as a jpeg embedded on a web-page, and therefore respect the outcome of our class discussion last week about what size to build for the web. Arrange things so that they are legible and clearly organized.
Here are some things you know about this promotion:
Write the copy that a visitor will see as they experience your site. Consider what the site hopes to accomplish, as well as what the user needs in order to accomplish it. Write the actual words that will appear on the page. Be detailed and structured. Consider titles and headlines, body copy, labels, captions, error messages, button and menu names, etc., and make sure the document you create clearly delineates those things. Think of this as a reference document that some OTHER designer would use to build out the content this site.
Create this document in HTML. Use h1-h6 tags, p tags, ol, ul, li tags as symantically appropriate to create clear hierarchy. Don't worry about style, the style that your browser applies to these elements by default is fine.
Design a complete set of pages for your site, and post them as images embedded on HTML pages. Link the pages together in sequence as we did with the Bissinger's exercise.
A few other things to consider:
QuickCycle is an (imaginary) startup online bicycle retailer. One of the core features of their website will be the interface by which users find the ‘right’ bike within QuickCycle's sizable inventory. You are tasked with the UX and visual design for this interface.
The first step of the process is research. Applying (as appropriate) what you'ved learned about research and synthesis, post an HTML page that documents your understanding of the challenge, and proposes one or more high-level approaches to addressing it. Feel free to reference (via hyperlink) existing sites — for bike shops, or for interfaces from other places that you think provide a good model.
Create a series of clickable wireframes modelling your proposed interface solution for the QuickCycle product finder. Don't concern yourself yet with visual style. Focus on the words, controls, and organization required to make the user experience work. For those of you who took them, recall the user stories and prototypes you developed in the Interaction Design Workshops. Think critically and in detail about everything your user may need to do, then be sure you've accomodated those needs.
While it won't be necessary to make every single control functional, this wireframe should be navigable in broad-strokes by clicking on the appropriate buttons/controls — it's not simply a linear ‘slideshow.’
Review each of your classmates' wireframes, and provide each of them at least one positive observation and one point of constructive feedback, in the Google doc below. (Note: I was late making this document available, so I've extended the deadline a couple days to Feb 28.)
Take a last pass at your wireframe, and test it against the 5 user personas and user-stories we defined in class (in the Google doc below). If your wireframe doesn't sufficiently address the needs of your users, make the necessary adjustments. Don't delay figuring out the actual buttons/labels/words that the user should see. Solve all of the 'How do they use it?' questions now. Don't worry about style, and layout can just be approximate... but you should be able to walk me through exactly what each of our 5 users would see and do in order to accomplish their stated goals.
NOTE: it is not required that your wireframe go through the full purchase/checkout process. Getting us to the 'Add to Cart' button is sufficient.
Based on your research, your style tiles, your wireframes, and our user stories, build a fully visualized prototype of your bike finder. Make sure that it visually demonstrates how the interactions in our user stories are acheivable. Your prototype should look like a finished website. Functionally, it should at least give us a linear walk-through of all relevant pages, but ideally it provides individual controls allowing us to approximate the actual interaction. However, as stated in class, our number one priority is to solve the design/user experience problems, and functional HTML is only a secondary objective.
We have a greater and greater expectation that online content will be both device-agnostic and device-aware — that is, not only will it be accessible from any device, but it will tailor itself to the capabilities, limitations and contexts presented by each device.
Restaurant websites are a good example of reasonably straight-forward content that can benefit from this sort of device-friendliness. In this project, you will design a website for a restaurant (real or imagined) that demonstrates how device-friendliness extends the capability and utility of web-based digital content.
The first step of the process is research. Applying (as appropriate) what you'ved learned about research and synthesis, post an HTML page that documents your understanding of the challenge, and proposes one or more high-level approaches to addressing it. Feel free to reference (via hyperlink) existing sites — for resturants, or for interfaces from other places that you think provide a good model.
Create HTML document(s) representing the pages you will have in your restaurant site, and use HTML markup to create a structured outline of the content within each page. Don't worry about styling, let the default styles provided by the browser be your guide for which tags to use as you structure the page. Think less about how things look, and more about prioritization of content. In what order should content be presented in order to deliver on the top goals from both a user perspective, and a business-owner perspective?
DO NOT USE PLACEHOLDER TEXT. Get real text content from an existing website, or write real content yourself, but don't use lipsum or generic placeholders such as “Description goes here.” This set of documents is the text content of your site. Include all necessary details: prices, names, descriptions, labels, categories, introductory copy, footers, copyrights, etc. right down to how many chili's it takes to indicate spiciness.
Design the full-width version of whichever page in your site contains the menu. If the menu is split across multiple pages, design whichever page comes closest to containing entrées. Our goal is to see exactly what the fully-realized menu will look like.
Some things to consider as you make layout choices about this page:
Design the full-width version of the remainder of your site. When complete, you should know exactly what the site will look like in a full-width (desktop) browser.
As we did with the menu page, consider the following: