We are Zajno, an international digital solutions boutique. Having started only 3 years ago, we’ve come quite a long way since then. Some of our clients are Huawei, Intel, Avia, Versalift. And we got here thanks to lots of hard work, dedication, passion and the design process we stick to. Sharing is caring, therefore we’d love to share it with y’all now. All we’re about to tell you is not a silver bullet, it’s just the way we do it here at Zajno, and since it works out pretty well, we thought you might like this lil’ recipe of ours.

It’s not a recipe to just a single meal, it’s more like a big 6-course dinner with all the main courses and side recipes, reasons why and what we make each course for, with some tricks of the trade to top it. Before we start, there’s one more thing I wanna tell you, and that thing is important. It’s about a person who always tries to crash the party with a bouquet of jalapeños and dumps all this stuff on the dinner table. His name is Mr. Fiasco, and believe me, you don’t want him on your guest list. I’m gonna tell you how to avoid this weirdo.

Menu

• Appetizer — Idea and Concept Canapés and Brainstorming Salsa
• Relevés — Research Salad with Presentation Dressing
• Soup — Prototyping Gazpacho
• Main Course — Design Carbonara
• Cold Dish — Pâté de Specs and Documentation
• Dessert — Sweet Release with Deliverables Eclaires
• After dinner — coffee, cigars and useful tips

Who is invited to the table?

• clients who want to find out what digital product design process looks and tastes like;
• aspiring designers;
• designers who wanna learn more or find a new approach to digital product design process;
• top-notch designers who could share their secrets to delicious digital project design process and teach us how to make our dinner even tastier.

Who is not invited?

• Mr. Fiasco (duh)

1. Idea and Concept Canapés and Brainstorming Salsa

Ingredients

• project team members
• 1 manager who’ll write everything down
• text editors, notebooks, recorders, white boards
• 1 barrel creativity
• 4 jugs patience
• 5 cups attention
• 9 glasses experiment
• 1 drop audacity

Directions

1. Get all the information on the new project, then analyze and discuss it with the whole team.
2. Bring the debates to a boil over high heat, then reduce the heat to medium-low, cover, and simmer until you get the greatest possible number of ideas, sketches, comments, tips and solutions. Your objective is to have as many perspectives on the new project as possible.
3. Don’t be shy to experiment. Accept all ideas even if they seem weird at first. Think outside the box.
4. Make sure the manager isn’t overdone and is putting all the thoughts down using any tools he/she likes.

2. Research Salad with Presentation Dressing

Ingredients:

• 1 team lead
• 1 manager
• 1 art director
• 1 tech lead
• 1 designer
• Google Search
• 17 pounds social media
• 1 bucket persistence
• 5 tablespoons critical thinking
• Sketch, Keynote or any other visual editor

Directions

1. Sift through the ideas to choose the best solution. There are three main criteria-filters:
   — it should meet business needs
   — it should meet users’ needs
   — your company should gain some profit from it both in terms of experience and resources. Taking a project that doesn’t contribute to your company growth isn’t rational, you should always think what’s good for your crew. Obviously, the best is a win-win solution, or rather win-win-win: for your clients, for users and for your company.
2. Another way to choose the best solution to your chef-d’oeuvre is by studying trends and web search queries in the field. Google it and use such tools as Analytics, Keywords Planner, Trends and turn to social media including Twitter, Facebook, Dribbble, Behance, Abduzeedo, Medium and Muzli. Remember that at the end of the day, the one responsible for the product success is none but you, so spare no effort in doing the research.
3. The most interesting part of the project begins when the product goes live and actual people start using it. Better understanding of what is likely to happen after the product release and what should be done to promote it will only increase your chances to hit the nail on the head and not to clam up when explaining why you chose this particular solution to your client.
4. After choosing the tastiest solution and getting the team leader and developer to review it, present it to your client in lay terms. Always bear in mind that your objective is to choose the most effective way of achieving the goal at the lowest cost, but quality comes first. Depending on the client’s approach you can prepare your presentation using anything from Sketch to Keynote.

3. Prototyping Gazpacho

Ingredients

• the entire project team
• all the info you get on the project
• Google Search
• 1 dozen design platforms
• 1 barrel effective communication
• 9 cups creativity
• 3 1/2 pounds logic
• Marvel/ InVision
• any text editor
• 5 drops empathy

Directions

1. Knock up the sitemap for the future product. Don’t forget to blend in all the pages including the error pages, modal windows, widgets and additional design elements. Get the project team to review it, then ask the client how it tastes. Use any convenient text editor.
2. Mix up some dough to shape a few user personas so that they could represent all the target groups. Give them names, describe their usual day, their habits, preferences, tastes, hobbies. Learn all the aspects of their lives to come up with a product that better fits their needs. Find some photos of them and put them on your wall to always remember who you’re creating this all for. You may even ask them which design they like more… it may be too much, though.
3. In a large bowl, combine the info you got from the manager, clients, research, analysis, and create use cases and usage scenarios in Notes or any other text editor. Use a web browser to find content.
4. Create a flow chart to show user interaction with the product in detail. To do that take the use cases, usage scenarios and sitemap you’ve already cooked, add some logic and engage the entire team to work together. Make sure you show all possible scenarios. Check all design ideas with the team leader and developer to avoid reinventing the wheel, and remember: effective communication is the key to success.

1. Now it’s time to put together some moodboards. Their main purpose is to generate the necessary style both you and your client agree on. Starting with moodboards also helps get the ball rolling: we all know how hard it is to start, so begin with gathering some ideas and inspiration. This way you’ll streamline your design process and cut down the time you spend staring at a blank screen. Your objective is putting together 2 different boards of images, each illustrating the intended style. The first board includes photos and renders of objects you can see in real life, something tangible. The second one is about digital stuff. Each board should include at least 5 images. To create moodboards use such platforms as Dribbble, DesignInspiration, Muzli, Medium, Behance, Abduzeedo, Design Milk, Fubiz, Unsplash — you name it.
2. Time to bake some wireframes.
   — Start with low-fidelity wireframes, bake them in the preheated oven in Sketch. Engage the entire project team in the process, including developers.
   — Create a clickable prototype in InVision or Marvel.
   — After finishing the prototype check its efficacy with the project team. Actually the more opinions you gather, the better, so ask around, don’t be limited to your team members only.
   — After testing the finished clickable prototype, send it to your client to get their feedback. Fix it if needed. In theory, you’ll have several iterations gradually increasing the level of element/component/section detalization on each stage. As a matter of convenience, use version control tools.

4. Design Carbonara

Ingredients

• the entire project team
• clickable prototypes
• wireframes
• moodboards
• user flow
• Marvel/ InVision
• Google Search
• 100 barrels feedback
• 9 cups creativity
• 3 1/2 pounds logic
• 2 bottles consistency
• 1 suitcase experience
• 4 bottles critical thinking
• 3 teaspoons experiment
• 2 tablespoons empathy
• 1 pinch magic

Directions

1. Start with a draft — a design concept of the main screen/homepage. You already have all the ingredients to cook it: use low-fidelity clickable prototype, flow charts and moodboards. Regularly ask the whole team for some feedback, it’s essential to move forward. The main thing is to ask the right questions. If you feel like asking anybody else, make sure this person is qualified enough and fits for the job.
2. You’ve reached the stage of reviews and updates. It’s the art director’s responsibility to make sure that the final design is consistent, thought-out and most importantly, hits our mark. After another round of reviews and updates, and once everyone is happy and on the same page, send it to the client together with some notes explaining why you chose this particular solution to show that you thought it through and it’s not just a random idea. Get the client feedback and update the design if needed.
3. Now it’s time to design the rest of the pages. The procedure is the same: create a new page design, get the project team feedback, update the design if needed, send the page to the client, get the green light.

1. Cook up a high-fidelity clickable prototype in InVision or Marvel using the design you’ve already prepared. Put the prototype together and test it. Fix it if needed until it’s really tasty. In theory, you’ll have several iterations gradually increasing the number of states so that even a person who has nothing to do with the project could get the clear picture of the product.
2. Having cooked the prototype, make a clickable map of user interface interaction, linking it first to each wireframe, and then to the final design. As a result, you’ll have 3 prototypes:
   1 — low-fidelity clickable prototype with wireframes,
   2 — high-fidelity clickable prototype with designed pages/screens,
   3 — clickable map of user interface interaction.
   The third one is really important as it solves the problem of designer-developer interaction because interactive user flow gives developers a very clear insight into what they’ll have to work with.

5. Pâté de Specs and Documentation

Ingredients

• 1 designer
• 1 project manager
• the prepared design
• Sketch
• 3 barrels patience
• 7 bars accuracy
• 1 handful structure

Directions

1. It’s 2018 man, every app needs to be responsive, so you’ll have to adjust your designs to most popular resolutions your target audience use. We usually cook up the following set of dimensions: 2560х1800, 1920х800, 1680х1050, 1440х900, 1366х1024, 1280х800, 768х1024, 320х568.
2. As soon as the design is ready and steaming hot, start baking the guidelines by putting together the elements you already have. Structure it all. Put text, graphic and visual content into separate folders. Categorize all the elements.
3. Always update the guideline when needed. It’s essential to keep it up to date to avoid miscommunication and keep the design consistent, especially if you need to hand off the project to another designer or anyone else.
4. Specify the transitions, interactions and animations, attach videos. If an element has multiple states, remember to show them all.

6. Sweet Release with Deliverables Eclaires

Ingredients

• all the files on the project
• Avocode or Zeplin
• 1 cloud storage
• 1 teaspoon accuracy
• 3 bags structure
• 9 barrels patience

Directions

1. Get the files ready for development stage. Make sure all your files are properly named. Install Avocode or Zeplin plugin to easily upload design files so that developers could interact with all the data.
2. Keep all the cooking ingredients and files you work with in order so that other people could easily interact with them too. The same goes for your design prototypes: — name the layers and the files properly when exporting, — create complex shapes properly, — close the paths or keep them open when appropriate, — maintain your design consistency by reusing the existing shapes/elements, — make sure all the data in the project folder is up-to-date.
3. Eventually, your folder should include: design source files; prototypes, wireframes, moodboards, user flow; fonts, visual assets; guidelines.
4. Upload files to cloud and share the link with your client and the development team.

Coffee, cigarets and useful tips

1. Always bear in mind that you’re cooking this digital product for a user, so make sure it’s user-friendly, healthy and tasty.
2. Don’t forget that the dinner doesn’t end after the design stage, the development team can’t wait to take over the cooking process. So do your best to make this process as smooth as possible.
3. Cook in version control software.
4. Use web fonts.
5. Double check the folder with deliverables contains all the necessary elements, especially the style guide.
6. Don’t change the design/ guideline/ set of colors/ you name it after you hand off the assets to the development team. Explain to your client that it would give developers a hard time and will cost a lot.
7. Don’t use double opacity, it’ll confuse the developer.
8. Make sure you show all the required states.
9. Structure all the elements creating proper folders, organize them all in a logical way, especially if you need to animate something, create a folder for visuals, a folder for titles, you got the idea.
10. Get all the copy before designing not to do the same work twice.
11. Try to gather as much feedback as possible from qualified people.
12. It’s really handy if your cloud storage has a synchronized folder on your computer.
13. And last but not the least, rationality. The recipe we shared is not a strict rule, it’s a kind of recommendation, a perfect scenario, if you’d like. The entire process, the method and the number of stages depend on the project. If it’s a tiny 2-week project, the cooking time and number of courses will be different. Bottom line: stay practical and rational.

Voilà! The digital dinner is ready! Do you want a second helping? ;)

That’s how we create delicious digital products here at Zajno. However, we’re sure you have great recipes of your own to share! So don’t be shy, share your experience! After all, we’re all working for the same purpose here — making the Internet (this world) a better, tastier place!

Leave a comment and tell us how we can improve our storytelling for next time, ask us a question, arrange to meet up, or make a suggestion for a follow up piece.

Website | Dribbble | Facebook | Twitter | LinkedIn | Instagram | Vimeo

If you liked this, click 👏 so other people will see this here on Medium.