When in the UX process to start wireframing screens


#1

So I’m currently enrolled in the CareerFoundry UX course and what they have you do as part of the lessons is to create a task or project management app called “Taskly” (You don’t go so far as having it actually coded but you do go up through prototyping, visual design, even some A/B testing of your proposed design for the app)

What I’m wondering is WHEN in the “real world of UX” wireframes should actually be created because in my course I can’t decide if they are having us do wireframing too early in the process. Here’s what I mean:

What I’m finding is it doesn’t make much sense to wireframe screens UNTIL you understand the workflow, simply because you don’t know what’s needed on screen and what’s not. Yes the course has taught us to understand first the business requirements, the users, competitors etc but then we jump right into designing wireframes and/or paper prototypes.

For instance I’ve found, for Taskly, you really need to understand how things like projects and tasks relate to each other before you can design the appropriate screens.

On the other hand wireframing screens early in this course has led me to better understand how I need Taskly to work so, bottom line, I could see in the real world doing many rounds of wireframing (iterative) until the flow makes sense enough to bring it into a protoyping program and start having users play around with it and give feedback.

Perhaps doing multiple rounds of wireframing is inefficient or maybe its unavoidable - what do you think?


#2

I agree workflow diagrams are necessary in the early stages especially when there are multiple paths a user can take. IMO it doesn’t hurt to start rough wireframing early to capture ideas and just get your mind going but doing it on a whiteboard/paper is more efficient as you can rapidly make changes before investing more time on digital wireframes.


#3

Hi Steve,
I think you have touched on an interesting point about wireframing, that it really serves two purposes.

  1. To help you flesh out your ideas to uncover issues you hadn’t considered and explore alternatives that initially might not have occurred to you. This is a normal part of the process.
  2. To see the design at a high level before proceeding and communicate it to others. This is often misunderstood as the only reason for wireframing.

If you find yourself stalled in the wireframing process, it sounds like maybe you should spend more time defining the problem. You should have a good understanding of the general workflow, at least in part, before starting. A workflow diagram or even a list of questions you’re hung up on can really help.

But I think that part of the wireframing process is that it tests your knowledge and assumptions about the problem and your proposed solution. So I think it’s OK to jump back and forth between wireframing and requirements (unless you really don’t even know where to start).

One last tip on wireframing. Stay rough. If you get locked into one specific idea and start into the details right away, you’re really creating a prototype. Wireframes should be “just enough” to answer the big questions and get your idea across. Try to push yourself to explore in this phase. I wrote a little article here that has a bit more detail.

Good luck, you’re on the right track!
Leon


#4

Thanks @leonbarnard Leon, that’s helpful to me. I think first understanding the workflow should have been emphasized more in the course I’m taking but it does get rather complicated. I’m not exactly stalled per se but I did realize that I didn’t yet understand key parts of the workflow.

I may be guilty of putting too much effort into my digital wireframes because I’m not very comfortable yet hand sketching so I tend to go right to Sketch 3. I will be sure to read your article and thanks again!


#5

@mrgeoffwong Yes, I am beginning to reach the conclusion that workflow diagraming (is that the same as flow mapping?) makes a lot of sense before starting to wireframe. I’m not real comfortable hand drawing so I tend to go right to the computer!


#6

I’m obviously a bit biased, but may I suggest Balsamiq? It’s designed only for wireframing so it’s optimized for this stage of the process.