14 Different Ways of Product Design
What I have learned during my 2-year journey of a Product Designer
I’ve review my current design process in October 2016 and decided to write new piece about my design thinking. I shared it on Medium as well, just follow this link to read about the new process and design tips — https://medium.com/sketch-app-sources/26-steps-of-product-dashboard-design-c97af84c4146
After my dribbble post with picture of a Diagram with very positive feedback and lot of questions, I was motivated to create this article about my process and what I’ve learned after 2 years of this journey.
It’s a bit hard to say that I’m always using this same process, but you can read it similar to an ideal process. I’ve divided this process into 4 parts — Pre-process, Work process, Post-process and tips for Productivity.
Pre-Process
1. I’m drawing
It doesn’t matter if it’s paper, a notebook or just a small piece of something. I need to share the ideas in my head. I need to put these ideas down where they can be saved and not forgotten. Consequently this means that I have some sketches on my bank statements, bills from restaurants, book covers etc.
However, for me it is ideal to have something tangible, for example, on Moleskine. It’s always nice to go through these lists from time to time, look at my old ideas and try to reinvent or recreate something for this particular project or different idea.
2. Collecting Pictures
Another pre-process phase is the collecting of pictures, I do this everyday. There is definitely hundreds of styles on how to collect and view these images, however I particularly prefer old school style — Dropbox folder separate to different categories (Dashboards, iOS, Illustrations etc.). Then, when I receive an inquiry or project, I’m going through these images and I’m trying to find inspiration. Dropbox is pre-caching low quality previews of files so you’re able to list them without an internet connection.
3. Moodboard and Preparation
We have plenty of sites for inspiration — Dribbble, Behance, Pttrns, Pinterest etc. and it’s really easy to find similar projects like the one you have. Additionally, it could be a solution for a problem that you’re experiencing and you’re trying to solve.
So when I begin working on a new project, I always prepare a folder with — PSD, Screens, Inspiration and Resources folders. I’m saving everything to the Inspiration folder that I find on the internet and is related to this project.
It should be everything from swatches to full case studies from Behance. Yet it also could be pictures of attractive people if the app has users’ profiles. It sometimes happens that I don’t even use that folder but that’s different story!
Work Process
4. I don’t care about wireframes quality.
I’m not a big fan of spending half a year on wireframes. I also prefer it if a client has prepared wireframes.
A good client is one who has prepared his ideas on paper.
I’m taking wireframes as just more about understanding the purpose and not the actual final result. The final result matters about you and your UI / UX skills and ideas which you want to present. Wireframes can help with the imagination of how many screens you’ll need and what’s the client’s idea.
On another page of the wireframes is a nightmare for the designer in which someone wants just the replication of prepared wireframes and to use the right details from the wireframes. That’s monkey’s job not the designer’s. In this case, every designer would just quickly finish that job and run away from the project like Usain Bolt.
5. PSD — Big Canvas (back to the Illustrator)
When I started 7 months ago at Badoo, I saw how my colleague works (Hi Sasha!), I thought that he didn’t understand how Photoshop works. However, now I’m trying to get into this technique, and in fact this style make sense to me. It’s good to use this style when you’re working on something really big, for example, a web application or a rich dashboard.
Basically, I work with a big canvas for example 8000*5000 pixels. Furthermore, my work isn’t more than just creating one big UI kit. The work is much faster because you see every element together and I can easily see what’s happening in every state. Additionally, it is much quicker to make a screenshot for developers with a small flow or just one states for one thing.
6. All screens in one PSD
In another case, which is not that revolutionary or different. If I’m working on a mobile app I’m working in different extremes. That means — All screens are in one PSD.
I know in this case it will be better to use Sketch, which could be really helpful with work. But I prefer one instead of 40 because it’s hugely quicker, I can easily pick one element from a different screen and copy that to another folder/screen. So that means if I change the background or a few icons on the top bar, I don’t need to change hundreds of other PSD’s.
7. Folders and Etiquette
I’m a tidy person in every respect — I have one icon on my desktop, folders per clients, per projects. Every folder is structured in the same way as I mentioned before. The same as in PSD. Every of my PSD’s is nicely structured in every folder. I use the rule that if you have more than 8 layers in folder then you should create a new folder. I think about my PSD’s like I’m preparing them for someone else. I’m not a big fan of naming layers because you can easily go through my folders.
But lately I’ve started working with @LukášKus and he always complains that he doesn’t have these folders in AE. Therefore, a particular situation always matters.
If you would like to know anything else about PSD Etiquette you can look at this — http://photoshopetiquette.com/
8. Communication with friends
A network of people who can provide you with relevant feedback is something critical for me. I can easily do mini user testings and listen to what people think about these specific problems This usually opens the doors to other solutions and other points of view for these problems. I do these calls/tests as much as I can in every state of my project or screen. Moreover, it doesn’t matter who you are testing. It could be anyone, I prefer to combine two segments — people from the community, the UX designers and normal regular users. This is because you’re usually working on project for regular users not for designers and UX principals.
9. Diagram
After my client or I prepare wireframes, I prefer to take them and merge them in one PSD. Then I try to think about interactions, what happens when I click here or there. Usually, we find a lot of missing screens and additional errors which clients or I don’t realise, when I was thinking about just one particular screen when I was preparing wireframes. For me, it’s this pre-prototype phase which I don’t consider a double job. It’s actually also a visual overview of all the screens and the elements. When I’m working on 15+ screens project it’s hard to keep the same visual style across the whole app and I can easily break the guidelines.
About style — I use the same style similar to a lot of designers, however instead of spending a lot of time with creating these lines across whole canvas, I use circles with the numbers of the next screen. It’s a little bit like gamebooks which I was reading back in the days, but it’s a better solution than creating of printed circuit boards. You can see more states on the picture.
I add a link for the Diagram PSD for a better understanding these diagrams (The iPhone render is done by GraphicBurger)
Post Process — Guidelines
And we are finally close to end of the process, the last part is the creation of the guidelines and the final check for visual consistency. It turns out for me like such an important part of the process for small and also for big projects. Usually, when I work on a big project I want to change something in this part of process and I’m never a 100% sure that I’ve changed every of these properties. I use these for myself and also for developers to be sure that they won’t use 50 shades of grey or 14 different sizes of fonts.
10. Colour Specs
The specification of colours is one of the first thing which I try to keep in mind. It’s really nice in these flat design age to keep as few colours as possible for the buttons and for text. It’s nice to prepare this in your PSD like a painter’s palette or like swatches in Photoshop, which is basically the same.
11. Typo Specification
One other thing which can remind you of the logo specification is the guide for text sizes and the weight of fonts across the application. Again, it’s good for developers, but also for your overview.
12. UI Kits
The UI kit is a really important thing if we are talking about consistency across company apps and websites. It’s also important when you’re working in team of designers or you have more front-end developers who work on that project. I can use a UI kit in way that I’m always taking these elements from UI Kits. Also the developers can easily see how this button will look on hover and they don’t need to ask about everything.
Note: I’ve realised that in big companies, it is a big problem that nobody has heard about these things and teams basically re-create these same CSS lines again and again. Then you realised that you have 3 different interpretations of one button in 3 different applications. So you can’t forget about consistency.
Productivity
13. Todo
My key aspect of tidiness is working with todo lists. It doesn’t matter what type of app or paper you use. I prefer Things by Cultured Code and sometimes piece of the paper. That feeling of completing lists is always great. I was possessed with accepting every project which ends up in my email inbox, but now I’ve realised that it is much too comfortable to focus on 1-2 projects and 100% focus just on these 2 projects and then go to another one instead of fighting with 5 different ones.
“If you chase two rabbits, you will not catch either one.” — Russian Proverb
14. Goals
It’s really nice to know what you want to achieve, but also don’t be too bound to them. I make goals for 14 days (like a sprint) and quarterly goals. Also, I try to set these goals in way that I can achieve some new experiences (for example: make my first animation in After Effects) and also keep working on current things (finish 2 Behance case studies).
And what else?
I don’t use a mouse, just a tablet, I don’t have Tools panel I have learned all keyboard shortcuts. For streaming Photoshop to iPhone I use Skala Preview and I want to learn After Effects and Sketch. For prototyping, I use InVision App for web projects and the newly MarvelApp for iOS designs. It’s quicker for me to work with a pen instead of dragging and swiping on the iPhone screen. I sometimes still work with PopApp for some early prototypes, when I have time on the Tube for clicking and dragging on Screen.
The last few words
It’s really hard to say that I will always complete and follow the exact process for each project, because I sometimes skip some steps or I start in Photoshop if I see that the design in my mind and I have an exact idea about that.
In companies where I have worked, I’m still not experiencing real feedback, user testing and these things where designers can profit and take and experience them for thinking about new projects or updates for the current one. Especially User Testings, these change the thinking about all the things and show us that regular users usually work in completely different ways than we expect.
The End
I’d be happy to hear about your work processes, which steps you usually take in your personal projects or your thoughts about additional steps in my process.
More about me on dribbble
and I’ll be happy to hear from you on twitter
I’ve review my current design process in October 2016 and decided to write new piece about my design thinking. I shared it on Medium as well, just follow this link to read about the new process and design tips — https://medium.com/sketch-app-sources/26-steps-of-product-dashboard-design-c97af84c4146
Thanks @dashgopinath for advices about structure of this article!
