go back home...

Design Requirements to Wireframes: We Actually Did This

The current topic in my Human Factors in Computer Interface Design class focuses on how to go from interviews to an actual interface. This week we focused on the part of going from design requirements to wireframes. After being divided into groups, we were given design requirements and were tasked with creating wireframes detailing the steps required to accomplish a process. By this, I mean we had to design an app where we could accomplish the goal of ordering pizza, but we had to incorporate requirements into this design.

My group went about it in the most simplistic way possible. How many screens are actually needed? Can we cut something out here? Is there a way to eliminate a screen in anyway? There are just some of the questions that went through my head when we were creating our interface/wireframe, which you can check out below. Thank you Eddy for the picture.

After completing this activity, I looked back on what we actually accomplished. It was amazing what we actually did and getting voted the best design was pretty cool too. We started from nothing; just a blank whiteboard. We actually had to make decisions based on design requirements, which I was really confused about before. For example our home screen includes only two links: deals and order pizza. This was made this way because we had to have a deals section on our app. We also used the requirements in various other parts of the design, but those will not be detailed here.

Lastly, I liked how we used whiteboards. It really helped with changes needed throughout this process. I would recommend using low-fidelity stuff more than high just because of the ease when making changes.

Overall this was a cool exercise. We were able to take requirements and turn them into a design. While the requirements don’t determine every screen on the interface, there is still a good amount of thinking required to make a good interaction design.


I am a life-long learner, adventure seeker, and front-end developer for @ExactTarget