Old-school Design Workflow that Works
When you’re doing one same thing for quite some time, you’ll find your favorite ways to doing it. At some point maybe you will find other methods that you read or hear somewhere, but you just can’t helped it. You will go back to that old-school method, again and again.
Well, if that not sounds like you, it definitely applies to myself. I’ve been a full-stack web designer since 2009. Although I’m focusing being a Product Owner in this past 2 years, I still love to do some sketching and wireframing. When I’m designing or started working on a new product, I tend to use these workflows that eventually works for me (and hopefully works for anyone who want to try it).
#1 Start with a mindmap
When a project is about to start, there must be some kind of brief or requirements that need to be accomplished. It’s become my habit to map and visualize all the information I got from the brief, because I can easily forget things. Mindmapping can help you organize big-puzzeled-chaotic information into a more easy-to-understand one. This is the first and the most-took-time step.
In 2014, we want to redesign our career site. I started to do some interviews and usability testing to evaluate the existing design. In the interviews I asked our founders and colleagues what they think about the career site goals, what is the barriers with the existing design and asked what they wish to have in the new design. Those three simple and short questions gave me a lot of insights and information. One person give 3 answers, then multiply it by 10. You’ll get 30 paragraph of responses.
“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. “ — Steve Jobs
Now that you have a ton of stuffs, you have to think and find a way to make it more sense and meaningful, and of course simpler. Like I said earlier, I will spend most of the time to think on this part. To visualize all the information and requirements in a mindmap. To make it easier for me and everyone else to understand.
You can follow this simple steps to start creating mindmap:
- First of all, group all the similar informations.
- Give name to the groups. Make it clear and obviously represents “the group members”.
- Be mindful when to joined the information in a group and when to “detach” it and form a new group.
- If necessary, create a connection among the groups to have a better understanding of the whole topic. Usually connection comes with a verb, while the group is the object.
The mindmap above is a sample of a simple mindmapping for landing page redesign that we’re currently working on. We create this mindmap to make sure all the components in it are being included in our sketches or wireframes. No matter how far we imagine or create the concept for the new design, we have to look back at the mindmap and make sure we covered it all. I also find that mindmap can really help you to bring everyone on the same page, to share the same understanding and the same vision across the team involved in the product.
#2 The super-low-fidelity wireframe (SLFW)
Before jump-in to sketching the wireframe, I always love to enter the “dumb state” where I don’t have to think too much about the design aesthetic. I called it SLFW, a super simplified and super low fidelity version of the wireframe. This SLFW is more like an information architecture of the wireframe that I want make. It only consists of two things: placement and labels. When you’re done creating the mindmap, now’s the time to place those objects in your canvas. But, instead of thinking where to put the title, subtitle, image placeholder, buttons, field and so on, I start with a very small step: Where to put that main objects?
For example I have these main (parent) objects in my mindmap for our new project, designing an analytical dashboard:
- Logo + title
- Navigation
- Overview
- Data table
- Filters
What basically I will do is draw some lines and give them labels. I’m starting with the end in mind (just like Stephen Covey said in his awesome book), about where I want that objects/sections to be positioned. Usually I create up to three SLFW alternatives, and then choose one or mix-n-match for final SLFW.
When I have decided what to put where, it will make the actual wireframing later much easier. I can focus more on the aesthetic rather than think about section placement.
Some tips in creating alternatives: when you’re done doing alternative #1 but don’t satisfied with the result, don’t erase on the same canvas. Move to different canvas and create your new ideas there, that will be your alternative #2. The reason is so that you can see how your ideas evolved, you can pinpoint which works/suitable and which are not. It’s like looking back on history, if it was bad you know you must not repeated it, if it was good history than you will tend to repeat or even improve it.
#3 It’s wireframe time!
Now that you know all the requirements and all the objects that need to be exist in your design, and also you already know where to put those objects, it’s time to sketch some wireframe.
Remember to keep an eye for your SLFW when you’re wireframing. What I usually do is start wireframing per object/section on the SLFW. Let’s say I want to draw the navigation first, I will start by finding reference of good and highly usable design on Dribble. Then I start to create my own design by drawing some lines and boxes for image placeholders. When you’re done with one object/section, continue to other objects remaining.
Some tips on wireframing: don’t overthink about the copywriting, just replaced it first with lines. Give thicker lines to titles and subtitles, and draw thinner lines to paragraphs. Also find out how to validate your wireframes with some simple techniques here:
Done! That’s how I typically do my design workflow in every product or project we have. Start with a mindmap, draw some SLFW, and then jump and sketch wireframes.
Hope you find this workflow useful. If you have other methods or tricks that works for you, you can share them here to all of us. That would be super-great.
Feel free to reach me if you have some great ideas for collaboration, or if you just want to say, “Hi!”: trinugraha.com
