Blog

Mikuláš Beskyd

We've put together 6 quick tips we are following in Webscope that could help you when handoff your design to the developer team.

When you're kicking off a design project, it's totally fine to hold off on picking text styles and colors right away. At Webscope Design, we prefer waiting until we're super clear on how we want our design to look. This helps us be more creative because, at the start, things can change quite a bit. If we decide on styles too early, it might put limits on our creativity, and we might end up spending more time fixing things later on. Waiting a bit allows us to be flexible and make choices that really fit the project.

This is one of the things that makes many designers nervous 😀. We admit that even at Webscope Design, we don’t always manage to follow it, mostly depending on the project’s size or deadline. If it’s a project that needs to be done quickly and time is pressing, then layer naming isn’t as crucial. However, for large projects where we know we’ll be working long-term, we do name our layers. Give it a try, it’s not as complicated as people say. You’ll definitely feel proud of yourself, and your colleagues working on the project will appreciate it, too.

Making sure designers and developers work well together is really important. That's why we think about all the different ways a user might interact with our design. This way of working helps the collaboration between designers and developers go more smoothly, making the whole process faster and more efficient. By planning for different user interactions, we create a foundation for a design that's not just pretty but also easy for people to use.

Whether it’s a large or small project, we always design for both desktop and mobile. This makes the work easier for the development team, and we know that the design will function perfectly on smaller devices as well. We’ve also encountered cases where it was necessary to create multiple templates for various sections (Hero Section, Text Row, Image Row, Icon Rows…). These sections were then prepared for different breakpoints and used throughout the entire website.

We have two options to choose from. We can either use a pre-existing design system, or we can create everything from scratch. If we opt for the second choice, we centralize all the components, colors, and fonts. Essentially, we create a catalog that encompasses everything from design to instructions on how to maintain and correctly utilize these individual elements.

At Webscope Design, our use of sitemaps is tailored to assist both designers and developers by visually mapping the connections between pages. By outlining all pages and their connections, our sitemaps become a strategic tool in our workflow, helping to enhance handoff between designers and developers and making the entire process more efficient.

We dare to say that this is something that is most often forgotten, yet it is one of the most crucial aspects of UX. Often, this empty state can provide the user with very useful information. 

We recognize several categories of empty states:

Error or Failure: Empty states in this category appear when something goes wrong, such as a network error or an invalid input.

Search Results: If a search query returns no results, an empty state can inform users about the lack of results and provide suggestions for refining the search criteria.

No Data: This occurs when there is no content available to display. It's important to communicate to users why there is no data and what actions they can take to populate the screen with content.

Onboarding: These empty states are used to introduce users to the application or feature for the first time.

Subscription or Upgrade: In applications with subscription models, empty states may encourage users to upgrade their subscription or unlock additional features.

We believe these insights can be a valuable resource for designers, enabling a more effective handoff to developers. By incorporating these points into your daily design practices, you can contribute to a seamless collaboration, helping developers in their work. 🚀🚀

How we prepare design for development team

Andrej Marfiak

Cafeco is a local cafe located in a suburban area. They are offering a variety of products and trying to target younger/middle-aged and busy people, who don‘t have time to prepare products on their own.

Based on the user research we find out that people mainly face the same problem - the amount of time spent waiting in line for a product to order and collect. So, we have decided to conduct UX research to come up with a solution of allowing users to order products in advance and skip the waiting line.

Conducting the research and creating empathy maps helped us understand users' needs. The main issue for users was lack of time and the fact, that they did not want to wait in line for products.

It was not all about lacking the time and need for a faster process. These people are really enjoying their coffees and the products that are offered by Cafeco are meeting their exact needs, but often frustration stopped a lot of people from enjoying them.

People nowadays are too busy to wait in line for products.

People visiting coffee houses do not have apps to order something from their favorite place.

Even though people visit the same coffee house, they are not getting any rewards.

“If I don’t start my day with a cup of nice coffee, I will be unbearable.”

Amy is a 40-year-old single mother living in Brno, Czechia. She has a 7-year-old daughter. She is working as an accountant in an international corporate. She has really stressful job and does not have much free time.

To enjoy a nice cup of coffee on a regular basis

Visit the coffee house as often as possible

Afraid of not getting high-quality coffee

Amy is a busy accountant who needs to get a cup of coffee as fast as possible because she does not have much free time.

Mapping Amy‘s user journey revealed how helpful would it be for users to use Cafeco app for mobile ordering.

We have created wireframes and conducted user testing to ensure we found the perfect solution for the users. During the user testing, critical things were discovered that helped to general user flow. These discoveries were then incorporated into the designs.

After finalizing wireframes we dived into making the app's user interface design. We chose neutral colors of violet, supported by brown colors on coffee thumbnails to represent the taste and smell of coffee.

Case study of Cafeco - a local cafe located in a suburban area. We came up with a solution of allowing users to order products in advance and skip the waiting line.

Case study: Order products from the cafe in advance

Do you use Figma for your web&mobile designs? We love this tool so we decided to share with you 7 plugins we are using daily to boost our productivity. Keep reading!

This plugin integrates all accessibility tools to ensure your designs are accessible and meet legal requirements and standards. Its main functions are contrast checker and colorblind simulation.

Learn more about Stark here

With this plugin, you can easily create the most popular charts using random data, tabular data (Google Sheets, Excel, Numbers, and CSV files are supported), or JSON data. The built-in edit feature allows you to change chart type or style.

Read more about this Chart here

This plugin allows you to batch rename layers and frames. Rename the current layer name, sequentially rename layers or replace any word(s) or character(s) from selected layers. Keep your design files organized.

Learn more about Rename It here

Using this plugin you can select similar layers based on a whole range of properties. It’s perfect when you want to change all layers with a specific Text Style to a new one or just select all “cards” with the same corner radius.

Find out more about Similayer here

Do you need to remove the background of the image? There is no easier way how to do it than using this plugin which allows you to do it automatically with just a single click. It works perfectly!

Learn more about Remove BG here

This plugin contains literally tons of icons, (the well-known packs are included) which you can easily import into your designs. With the built-in edit feature, you can also change icon color, size, and rotation.

Find out more about Iconify plugin here

Do you struggle with the content of your designs? This plugin offers a palette of text strings, images, avatars, icons, and many more. Just find what you need and make your content look more real.

Read more about Content Reel plugin here

We hope these plugins will help you increase your productivity as in our case. Do you have your favorite ones? Let us know, we’re all ears!

7 Figma plugins to increase your productivity

At the peak of the pandemic when it became clear that we are not going to get rid of it anytime soon, public institutions became burdened by the task of providing daily information about new rules, restrictions, and guidelines for how to cope with it.

As it usually goes for the public sector, the idea might be well appreciated but the execution often trails behind. Most of the time we have gotten used to it however, with the pandemic affecting our everyday lives it became more and more vexing.

When European Union 🇪🇺 came up with the idea to unify all the information across the member states we were really thrilled with it. With the #strongertogether hashtag they unveil their new portal. Have a look below 👇

With a strong message and a lot of useful information - this had great potential. But after seeing the final result we have decided to put it through our standard design process starting with UX research 🔎.

The tool informs about the current coronavirus situation in European countries in one place and keeps the data up-to-date. However, we discovered that users had trouble finding what they were looking for. We realized that the website includes too much information which, in most cases, is not clear.

In our UX research, we also saw people using the Travel ✈️ section the most. They had found this to be the number one reason why they would visit the platform. That is why we decided to focus solely on this use case and to adjust the information presented in this way.

Once we decided on the general use case we had to better understand our target audience, in order to identify what exactly they need from the product. We focused on their goals and observed behavioral patterns. Based on these we have defined user personas to cover their needs. 🙋

We have noticed that users were missing some functions in the current platform like watchdog 🐶 to be reminded about the actual status of the restrictions, the ability to search for routes based on different means of transport or find specific restrictions based on the type of traveler.

After collecting all of this information we have created preliminary wireframes to be tested and edited before applying the final design. Once we had this confirmed we were ready to publish our results.

Based on all the information we gathered in our UX research we have created a simple travel app where you could search for your destination in the EU and find out all the restrictions that apply along the way.✈️ 🌍

When you are visiting a particular country you want to know the route - not just the destination. In this way, the user journey follows the most common behavior and saves time spent searching for the information.

For a better understanding of your route at first glance, we decided to implement a simple color palette. We follow the 3 categories already created and used by re-opening the EU platform and applying them to our use case.

We also included most of the features to further complete the user journey. To make sure the user has always up-to-date information we introduced a watchdog 🐶 that you can set up as in-browser notifications 🔔 ​or via email. 📧

We have tested our concept with users and they loved it. ♥️

Everything is much clearer compared to the current platform. From finding your route to getting notified about restrictions, it is faster and much smoother.

If you want to know more about the process or want to give us feedback check out our case study on Behance.

After we have completed and shared our version we got really positive feedback within our community. Therefore we have decided to contact EU representatives and present them our ideas since as they have put it we are #strongertogether.

We have sent them an email with our solution explaining the reasoning and the whole process behind it. After some time after sending the email, we noticed that the reopen.europa.eu portal introduced a new functionality - Travel plan.

Here is a little sample of their implementation.👇

When we forget about UI :smirk: and focus solely on the functionality of the feature it accomplished the basic idea we had set out to do. So good job EU for listening to our feedback! 🎉

Once the Travel Plan has been published we even got a response email from the team behind Re-open Europe. They piqued our interest by explaining a few behind-the-scenes obstacles that they have to deal with while building this feature.

“Due to the high number of variables, individual situations, and fragmentation of rules, it is nearly impossible to offer concise sentences describing the restrictions in place”

When we hear that something can't be done, we see it as an opportunity for creativity, therefore we agreed to schedule a call with the EU team 🇪🇺 to get to the bottom of this and make the portal better for all of us.

We came up with our own concept on how to approach traveling during the Covid-19 pandemic. Check out our case study!

Blog

Our design journal