Podcast: Play in new window | Download
Video Transcript:
Paul: Hi, it’s Paul Clifford from Disruptware.
In today’s session what we’re going to talk about is how to create a design. It’s the most common question, “How do I get that idea out of my head and into the head of my developer or my technical team?”
The key things to understand here is that the more time you spend in this process then the less cost your overall project will be. I know in a way that makes sense, but literally if you spend more time in the design process, just yourself mapping it out, then you’ll spend less money on your development, your communication, your changes, your bug fixing, your testing, everything like that because you would have thought through a lot of issues that your developers will come back with and a lot of issues and bugs and things would already be taken care of. It’s really worth investing some time in this process.
3 Things You Need to Know:
- Persona (user, client, administrator)
- Wireframe (picture of what's on screen)
- Use case or use story (interaction)
There’s three essential things you need to know. First of all, define what’s called a Persona. A Persona is basically a description of your user. So what type of users are you going to have for your system, are they just going to be administrators, clients...what are their roles and rights? What interaction will they have? Will they have access to everything? Will you limit them? Will you have different license restrictions around certain people? Will you have power users in the system? You just need to define what type of users you have and their called Personas.
The second thing then is you need to Wireframe. A Wireframe is essentially a picture of the screen. You could just draw that out on paper to start with or even a white board - I use this a lot. You just map out and draw on screen what it’s going to look like. Draw your forms, your labels, your buttons, lists, all that sort of stuff. Draw it out on screen and make sure it’s logical. It makes sense.
Once you’ve done that process then transfer it to a wireframing tool. A wireframing tool is a tool that is a bit of a design tool, but has a lot of the widgets all built-in. The thing is if you want a button you can just drag a button in, if you want a list, you just drag a list in and basically enables you to build the screen really, really quickly.
With these tools what you can also do is link screens together. If you build a wire screen of your login screen then you can link login buttons for example to the next screen within your wireframe. So the whole wireframe starts to become alive. When you go through this whole process then you’ll start to really understand how your application can work and you could even then at that stage take it to someone and show them and communicate it really easily. You can even take it to a customer and get their feedback to make sure you’re actually building an application that is actually going to sell.
The third thing you need to know is Use Cases or User Stories as their more commonly used within the leading start-up world. Basically, what all this is describing is the interaction between your users, or your personas, and the screens. So behind every button, behind a list, behind any action that you want a user to take you just need to write a couple of sentences on what result when the person clicks on that what’s the result in terms of the users eyes.
Basically that’s it, your three factors. You’ve got your Personas, your Wireframe and your User Stories and when you put those together and map that out on your wireframing tool then you really start to get a design that makes sense not only to your technical team, but also to you because remember the more time and the more effort you put into this whole process then the less cost and the less risk your whole project will be at the end.
I hope you found that useful. This is Paul Clifford from Disruptware.
Two Recommended Wireframing Tools:
1. Mockingbird - https://gomockingbird.com/
2. Balsamiq - http://balsamiq.com/products/mockups/