HOW TO PRODUCT DESIGN PT. 3
This is the third part of a 3-part article.
Part 3 is my own approach to the design process, step-by-step by step based on my experience working in a big company and therefore considering many teams and constraints involved, so feel free to skip or add some steps while in your own path :)
We’re still designing ‘X’, don’t forget it!
Phase 3 — Ideating: Sketch it and Wireframe it
3.1. Be brave & draw it like you mean it
Maybe search from some privacy if you need it to draw some fearless sketches. Feeling comfortable is the first step towards feeling confident considering you are projecting the ideas from brain to paper.
3.2. Request extra sets of eyes & think on it
3.4. Build a wireframe & test it / show it to PO and Stakeholders
Depending on the size and complexity of ‘X’ it can be a smart idea to test your design while it’s still on this very skeleton-like phase. It prevents people getting distracted by the aesthetics, therefore it is a good trick to getting insight on functionality only.
Phase 4 — Mocking-it-up
4.1. Go digital
The best phase, AM I RIGHT? Finally! Enjoy it, let your OCD and your creativity cohabit your mind and make some beautiful & pixel-perfect screens for your clients to be delighted!
Useful tip: Don’t let all the excitement make you forget to design (if they apply): error messages and empty states.
4.2. Wedding event: Your Ideas & The Design System are getting married!
Is you company using a design system? If so, try using as many already built components as you can. This doesn’t mean you can’t update them by giving them new features or combining them in ways they haven’t been combined before — this just means you are ensuring visual consistency across all your product.
4.4. Are new baby components being born?
If there’s a need for an update or even creating a whole new component simply talk to your team and state one or more use cases that mirror the necessity of having it built. Maybe that meeting could even lead a simpler solution to make everyone’s life easier ;)
4.3. Request extra sets of eyes: think & act on it
Phase 5 — Prototyping it
5.1. Dimension, level of complexity and data accuracy
Find the right tool and method to prototype: does it have animations & sounds? Are the interactions and transitions complex regarding layout? do you need real data?
Here’s a small list (but still, do your research):
Sketch Cloud: very simple prototyping
InVision & Framer: medium complexity prototyping
Adobe Xd: complex prototyping
Framer X: real data prototyping
5.2. Sanity check + team design review
Get your team together (even if only for a brief period of time) and walk them through your flow showing every feature and screen. They might spot something you missed and it’s good to keep the teams updated on what is being done and how: it contributes to consistency of design.
5.3. Have a meeting with engineering & iterate accordingly
Find out if something in your design is impossible to be built or not desirable for some reason, for example:
the logic your company’s structure (architecture, data storage, etc);
a certain feature increases loading time dramatically and will have the page feel like it’s opening on Internet Explorer;
one hundred other super valid engineer-reasons I did not memorize but they will tell you for sure.
Quick tip: Don’t settle for the inconvenience, work together to find out the best solution possible, otherwise they will find it for you and you will see your design’s look&feel damaged.
Phase 6 — Testing it
6.1. Testing Session prep
How can you test this? A/B Testing? In loco testing? Using a prototype and just listen to the user inside a meeting room?
Do your research, there are a million possibilities. And again, don’t be afraid to get creative as long as you are serving the specificity of ‘X’: the more tailored the methods are, the more accurate the results.
6.2. You design for people, not for yourself
Don’t blame the user. ‘X’ is meant for them, they should be the ones to be amazed by it and finding it easy and intuitive.
Also, don’t take feedback personally… you are a talented designer, you got no time for feeling sorry for yourself. Feedback is a gift — the best gift — and good designers know it. ❤
6.3. Iterate (go back to the steps of Phases 3, 4, 5 & 6 until you’re done)
Phase 8 — Grooming Session
8.1. In praise of harmony and stress-free future
A final meeting between you, the PO and the engineering teams involved is a must-happen. This meeting should be exactly as the previous one you had. Except you have to make sure all of you are on the same page when it comes to what is to be built and how:
Preferably, run the meeting yourself
Walk them through the entire flow
Describe all the possible interactions
Be detailed about behaviours
Be detailed about components
Be detailed about limits (like number of items per page, e.g.)
Encourage anyone to ask questions even after the meeting is over
8.2. Update your design with the last necessary updates
8.3. Specs
… or specifications. This step is for you to document in text your finalized design. Want my pretty practical advice?
Screenshot every page of ‘X’
Put numbered badges near the relevant features/feature group
Describe your X by going through all the numbers & matching it with the screenshots
8.3. Sharing your work with people that don’t speak Designer
There are specific tools to make your design constantly available for those who are building it. This is important because it will be their go-to when in doubt, so you better pixel-perfect the hell out of your screens’ designs.
Here’s the two I think are most important:
Zeplin: for sharing assets, paddings, measurements, palettes,and more.
InVision: for sharing the flow
Phase 9 — The “these things happen” phase
9.1. No company on Earth is perfect
… or has infinite financial resources, and people make mistakes or forget things which can make new requirements or constraints pop up. There can even be a more chaotic apocalyptic scenery in which some other initiative is an emergency and every asset of the company is mobilized to work on it. I know I’m exaggerating, but you get the point.
So… instead of having a mental breakdown in the form of rage attack because you thought you were about to wrap things up or before you have nightmares about POs, engineers, lines of code and APIs, remember:
Keep calm&collected, for the conclusion of X is closer than ever.
Try understanding what the problems are by having as many conversations as necessary with the involved teams and the PO.
Along the whole project it is important to keep all the Teams in the loop: this is one of the jobs of the PO, but if for some reason collaboration isn’t happening there is no reason why you can’t propose or lead that dynamic.
Trust me: This is an important piece of advice… it will save you from a lot of unexpected frustration and from loads of hours of work in the wrong or impossible direction.
9.2. Every Designer’s pet peeve has three letters: M V P
MVP — Minimum Viable Product: a monster concept that haunts every perfectionist designer’s dreams and hopes of insane features and crazy screens.
Phase 10 — What is dead may never die
A Product is never finished… never closed forever. It may not even be you the one to work on it at some point in the future, but I guarantee you that if your company doesn’t go bankrupt or explode, someone, somewhere, will go through all the finalized documentation and designs as a starting point for them. And I think that’s pretty cool.
