Portfolio: The Big Idea Website Project

The Big Idea Website

It starts with an idea, a solution for a perceived need or problem. How to turn that idea into a functioning web site or app?

We will explore this process and build a high-fidelity prototype for our big ideas. Along the way we will test our theories and assumptions, using the results to inform our design choices.

The Details

We will manage this project a little differently. We will approach the design through an iterative process of design/build, test, feedback, and refine. At the end, we will collect our process artifacts and reflect on the process and decisions we made.

We will also rely more on classmates’ feedback. This time, we will post work to discussion threads to share what we’re doing. We will give and receive feedback, both in class and online.

Discussion Topics

What’s your big idea?

Post your project idea/concept here. What is the problem you are trying to solve? Why is this problem relevant? How do you think this problem can be solved with the creation of a web site?

Project Personas

Who are the people you are trying to reach with this project? Who do you think will benefit from or use this website? Post your audience descriptions and personas to this thread.


Describe a scene or two of the character you created (persona) using your web site service. Give as much detail as needed to get the point across.

User Flows

Post your user flows describing a user’s path through your web site. Start with the happy path and refine. You may break up processes into separate charts as needed. You may also have multiple charts describing different tasks available to the user on your web site.

Prototyping on Paper

Using your user flows as your road map, create a series of paper prototypes by sketching out what the user sees during those steps of the process. In class, we’ll go over ways to use the paper prototype for testing and refining. We’ll step things up a notch by turning the paper prototype into an interactive prototype the user can click through and those interactive prototypes will be posted here for everyone to try out.

To accompany your paper prototype, state the task you want a tester to attempt using your prototype. For everyone else, try the stated task with the posted prototype. Offer any feedback you might have based on your experience. Was the task easy or effortless to complete, based on what was presented? Was anything missing you felt should be there?

Prototyping With Screen Designs

Time to flesh out the paper prototype and take it to the next level. Create screen designs using your favorite graphics or design software to replace the paper sketches already completed. As you work on your designs, be sure to address the UX issues identified when you tested your paper prototype. Create a clickable/interactive pdf with the screen designs like you did with the paper prototype.

It’s designer’s choice on screen dimensions. Design for the screen most likely used for your concept. Feel free to go extracurricular and design for multiple screens.

Post your prototype to this thread. Indicate a task the user should be able to walk through in your prototype. Check out what others have created and offer feedback.

Test your prototype with other people to make sure your are on the right track and didn’t obscure the UX with your GD. You can also show your screen designs to people and ask if they ‘get it’. If they can tell what your prototype is about without you explaining it to them, you are on the right track.

Completed Hi-Fi Prototype (HTML & CSS)

Post the URL to your prototype’s entry (or home) page to this thread. Indicate the optimal screen type/size for viewing your prototype. Test your prototype with 3-5 users, using the same task you’ve tested with your previous prototypes. The goal is to make sure the design layer and functionality helps, not hinders, the user experience you’ve been designing with your prototype.

To test your prototype: Load your prototype on a suitable device (ex. if you designed for a mobile screen, load the prototype on a mobile device). You will likely need your prototype uploaded to your web hosting for easiest access. Hand the device to the tester (or have the tester sit at a computer). Describe to them what the prototype is. Ask them to complete a task. Ask them to tell you what they are thinking about (“think out loud”) as they try to complete the task. Try not to lead the user. Listen and observe as they work through the task. At the end, be sure to thank them for helping you test your prototype. You may ask them additional questions about the prototype, like what they thought of the overall experience.

Describe to us here what you learned about your prototype through testing this version. What feedback from users did you receive? What changes would you make, based on that feedback?

Finally, share your impressions about your prototype. What do you feel was successful?What would you add or expand if there were a “Phase II” of the project?

Be sure to come back and comment on your classmates’ prototypes.