UI UX DesignProcess ZohoInventory Web

Download UI UX DesignProcess ZohoInventory Web

Post on 15-Feb-2016

9 views

Category:

Documents

0 download

DESCRIPTION

Designing the user experience for this product was very challenging and intellectually stimulating. So we decided to share what we did with this book.In this book, we go in-depth into the entire process behind how we designed the user experience for Zoho Inventory.Some of the things we talk about:- How we identified the key design challenges - How we came up with a wireframe that would solve for such challenges- How we holistically made user experience decisions- The principles we used to make key visual design decisions- How we handled presenting of empty states (blank screens) to the user by showing contextual help- A sneak peek at an upcoming feature that promises to make order management insanely easy

TRANSCRIPT

Elumalai JayaramanUX Designer - Zohohttps://www.zoho.com/inventoryUI/UXDESIGN PROCESSAN INSIDE LOOK AT OURWe recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.A visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.We recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.The Design ProcessA visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.We recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.A visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.We recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.A visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.We recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.A visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.We recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.A visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.The nal Visual Design for Zoho Inventory. To view live interface at https://www.zoho.com/inventory/We recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.A visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.We recently launched Zoho Inventory, our inventory and order management solution.We're denitely learning a lot as we expand our suite of products. Our goal is to not only ensure that each product is fantastic to use, but also to make the experience consistent across products. This is important because our products are designed from the ground up to work together and to be used with each other.Let's see how we accomplished this for https://www.zoho.com/inventory/.A unied, consistent experience across products.In my previous article about how we redesigned https://www.zoho.com/books/, our online accounting solution, I talked about how we improved the overall UX through lots of experimentation and learning.Zoho Inventory, on rst glance, looks a lot like Zoho Books. Thats because we designed it that way. We used the same basic design skeleton and built upwards from there. This design style persists across many of our products: Zoho Invoice: https://www.zoho.com/invoice/Zoho Books: https://www.zoho.com/books/Zoho Subscriptions: https://www.zoho.com/subscriptions/And Zoho Expense: https://www.zoho.com/expense/This uniform design provides a level of UX and visual consistency across products that you simply will not nd when you integrate independent solutions from dierent providers.a) Identifying the key design challenge.The very rst thing we needed to do was to ask the key question: What problems are we trying to solve? Problem-oriented thinking provides structure to the entire design process. Once you start thinking in terms of problems, the specic solutions will automatically follow.For Zoho Inventory, the entire inventory and order management process is centered around managing sales orders and purchase orders. Theres a lot of complexity here. For example, sales orders contain a lot of information. Imagine you order some items from a marketplace like Amazon. If youre ordering a lot of items, the seller cant ship all of them at the same time. Depending on various factors, like the size limit of the package and the availability of dierent items, some boxes may be shipped at dierent times.The seller needs to keep track of which of those items have been invoiced, which have been paid for, and which have been shipped. Multiple items are often placed into a single package, while there are also orders with multiple packages for dierent sets of items. All of these things need to be tracked.Before we started designing the UX to solve these problems, we rst needed deeper insights into how business owners and inventory managers approached these problems in the real world.b) Stepping into the shoes of the user.You cant build a great car without knowing how to drive.Similarly, you cant build a great user experience without knowing exactly what users want.You need to get all that background information long before you start putting pen to paper (or cursor to screen). Only then will you be actually designing something thats nice to use and allows the user to get things done as quickly as possible.Luckily, we had all the background information we needed before we started designing the interface for Zoho Inventory. Weve been running Zoho Books and Zoho CRM for many years, and weve had numerous requests for an inventory management solution that ties right into these products.Heres just one example of a customer asking for an inventory management solution on our forums over 4 years ago. Weve gotten hundreds of such requests over the years. A customer requesting a product to manage their inventory.These requests provided a treasure trove of information. We got a peek directly into hundreds of real-world scenarios and problems that needed solving by a dedicated inventory management solution. All this experience meant that we had a very good idea of what kind of software that our users would like before we even started the design process.Plus, months before we released Zoho Inventory, we opened up an early-access version of the product for over 700 users.The feedback was golden.Wed never have gotten these insights by working on the UX using only internal feedback from design and management. You need user feedback to design a great user experience.It is easier to talk than to listen. Pay attention to your clients, your users, your readers, and your friends. Your design will get better as you listen to other people. ELLEN LUPTONc) Getting some structure: Designing the Information Architecture and wireframing.Weve seen that inventory managers need to handle a high level of informational complexity when it comes to managing orders. Theres lots to track and manage to make sure everything is going smoothly.The goal with designing the interface was to empower the user to handle all this information and take action on it quickly.If a picture is worth 1000 words, a prototype is worth 1000 meetings. TOM & DAVID KELLEYThis process starts with designing an information architecture this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.For order management, this is the basic information that the user has to track:Items: Number of items, quantityPackages: Number of packages, items in the packages, status of package: packed, shipped or deliveredInvoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdueIts pretty simple, but this is the essence of the information architecture, and its a good illustration of the complexity and the innite number of use cases that the user will have to handle.For example, a sales order can have ten dierent items, and these items are packaged into three dierent packages (taking weight into account) and one invoice is issued for one package while another invoice is issued for the other two packages. And there will be lots of dierent sales orders with very dierent congurations. The nal interface should allow the user to handle and take action on all of this information.Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designers head.With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information in a sales order, and any action you need to take can be done right from within the above interface.Wireframe for the Zoho Inventory order management screen.d) Nailing the visual design.Visual design is exceedingly important to a products success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, rst impressions are persistent. Its very hard to shake that rst impression you create with a customer.A visually appealing design primes the user for good expectations even before they start using your product. Once that rst impression is created, the user leans toward viewing the entire product through a positive lens.Its important to have a consistent visual experience as well. Good design has to extend right from your website to your entire product in order to maintain that positive impression.With all this in mind, and after much experimentation, we carefully put together the above visual design for Zoho Inventory. Now, since visual design is a creative process theres no denite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.Here are the things we took into account:TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of our products. We carried this over to Zoho Inventory and it worked out beautifully.COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what youre wearing. If you want that kind of judgement in your favor when people look at and use your product, its important to choose a color scheme that is visually appealing.While for many of our products (such as Zoho Books), we went for a pastel-style color scheme, we did something dierent with Zoho Inventory, going for a dark and at color scheme that mixed elements of black and blue. This gave it a clean, professional look.ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as items and packages (which inventory managers have to deal with everyday) than solid icons were.VISUAL HIERARCHY: While the layout, hierarchy and grouping of dierent elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to nd what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.Hand-holding users throughevery new featuresInventory management software is complex. But we wanted to make it so easy to use, the user should be able to start using it and get things done even if woken up in the middle of the night.That means hand-holding the user through each and every feature, provid-ing relevant information right when he needs it.We needed to deliver information to the user at the right time so that he can do what needs to be done, like the markers on the road that tell you the right direction to your destination.Its about catching customers in the act, and providing highly relevant and highly contextual information. PAUL MARITZThis information has to be delivered to the user in some way. Help docu-mentation is one way to achieve information delivery. And good support, of course, is essential for the user to get the information he needs.But theres a detour involved there. The user has to move away from the app to get information. These things take time and a lot of tab-switching and talking and emailing.But what if there was no detour? What if you provided the user with all the information he needs exactly when he needs it? To do this, we decided to include relevant information inside the user interface.For example, the user needs help when he needs to integrate Zoho Inventory with another service. Zoho Inventory has a lot of integrations.While experienced users will know how to make these integrations work, a lot of users wont know what is possible with these integrations. Thats why once you land on an integration page we provide a brief summary of what the integration can do.For example, consider marketplaces. With Zoho Inventory, you can integrate with eBay, Amazon, Etsy, and Shopify. There is a business advantage to selling your products on as many marketplaces as possible, but a lot of businesses dont diversify the marketplaces on which they sell their products. This is partly because of the dierent nuances (and diculty) involved with each marketplace integration.Right within Zoho Inventory, we have prominent instructions on how to integrate with each marketplace and how exactly each integration will behave.We articulate how data items (such as product and order information) in Zoho Inventory will be labeled in the marketplace and vice versa. This gives customers all the knowledge required to integrate these marketplaces with Zoho Inventory.Were providing instructions. And while thats nothing really new, contextually providing this information in an easily digestible manner right within the user interface is new. We are removing all emotional (and knowledge) barriers to getting integrations done.ConclusionInventory management is complex. It can be hard work. I think we successfully distilled that complexity into something that is really simple to use, and made some lives easier in the process. At the risk of sounding a little boastful, we think thats pretty awesome.I hope you took something away from this post. Tell us what you think by leaving a comment below. And if you liked it, dont forget to share it with your friends & other network!Originally published at https://www.zoho.com/inventory/blog/zoho-inventory-ui-ux-design-process.htmlInventory management software is complex. But we wanted to make it so easy to use, the user should be able to start using it and get things done even if woken up in the middle of the night.That means hand-holding the user through each and every feature, provid-ing relevant information right when he needs it.We needed to deliver information to the user at the right time so that he can do what needs to be done, like the markers on the road that tell you the right direction to your destination.Its about catching customers in the act, and providing highly relevant and highly contextual information. PAUL MARITZThis information has to be delivered to the user in some way. Help docu-mentation is one way to achieve information delivery. And good support, of course, is essential for the user to get the information he needs.But theres a detour involved there. The user has to move away from the app to get information. These things take time and a lot of tab-switching and talking and emailing.But what if there was no detour? What if you provided the user with all the information he needs exactly when he needs it? To do this, we decided to include relevant information inside the user interface.For example, the user needs help when he needs to integrate Zoho Inventory with another service. Zoho Inventory has a lot of integrations.While experienced users will know how to make these integrations work, a lot of users wont know what is possible with these integrations. Thats why once you land on an integration page we provide a brief summary of what the integration can do.For example, consider marketplaces. With Zoho Inventory, you can integrate with eBay, Amazon, Etsy, and Shopify. There is a business advantage to selling your products on as many marketplaces as possible, but a lot of businesses dont diversify the marketplaces on which they sell their products. This is partly because of the dierent nuances (and diculty) involved with each marketplace integration.Right within Zoho Inventory, we have prominent instructions on how to integrate with each marketplace and how exactly each integration will behave.We articulate how data items (such as product and order information) in Zoho Inventory will be labeled in the marketplace and vice versa. This gives customers all the knowledge required to integrate these marketplaces with Zoho Inventory.Were providing instructions. And while thats nothing really new, contextually providing this information in an easily digestible manner right within the user interface is new. We are removing all emotional (and knowledge) barriers to getting integrations done.ConclusionInventory management is complex. It can be hard work. I think we successfully distilled that complexity into something that is really simple to use, and made some lives easier in the process. At the risk of sounding a little boastful, we think thats pretty awesome.I hope you took something away from this post. Tell us what you think by leaving a comment below. And if you liked it, dont forget to share it with your friends & other network!Originally published at https://www.zoho.com/inventory/blog/zoho-inventory-ui-ux-design-process.htmlContextual help for setting up a marketplace integration. Visit at https://www.zoho.com/inventory/Inventory management software is complex. But we wanted to make it so easy to use, the user should be able to start using it and get things done even if woken up in the middle of the night.That means hand-holding the user through each and every feature, provid-ing relevant information right when he needs it.We needed to deliver information to the user at the right time so that he can do what needs to be done, like the markers on the road that tell you the right direction to your destination.Its about catching customers in the act, and providing highly relevant and highly contextual information. PAUL MARITZThis information has to be delivered to the user in some way. Help docu-mentation is one way to achieve information delivery. And good support, of course, is essential for the user to get the information he needs.But theres a detour involved there. The user has to move away from the app to get information. These things take time and a lot of tab-switching and talking and emailing.But what if there was no detour? What if you provided the user with all the information he needs exactly when he needs it? To do this, we decided to include relevant information inside the user interface.For example, the user needs help when he needs to integrate Zoho Inventory with another service. Zoho Inventory has a lot of integrations.While experienced users will know how to make these integrations work, a lot of users wont know what is possible with these integrations. Thats why once you land on an integration page we provide a brief summary of what the integration can do.For example, consider marketplaces. With Zoho Inventory, you can integrate with eBay, Amazon, Etsy, and Shopify. There is a business advantage to selling your products on as many marketplaces as possible, but a lot of businesses dont diversify the marketplaces on which they sell their products. This is partly because of the dierent nuances (and diculty) involved with each marketplace integration.Right within Zoho Inventory, we have prominent instructions on how to integrate with each marketplace and how exactly each integration will behave.We articulate how data items (such as product and order information) in Zoho Inventory will be labeled in the marketplace and vice versa. This gives customers all the knowledge required to integrate these marketplaces with Zoho Inventory.Were providing instructions. And while thats nothing really new, contextually providing this information in an easily digestible manner right within the user interface is new. We are removing all emotional (and knowledge) barriers to getting integrations done.ConclusionInventory management is complex. It can be hard work. I think we successfully distilled that complexity into something that is really simple to use, and made some lives easier in the process. At the risk of sounding a little boastful, we think thats pretty awesome.I hope you took something away from this post. Tell us what you think by leaving a comment below. And if you liked it, dont forget to share it with your friends & other network!Originally published at https://www.zoho.com/inventory/blog/zoho-inventory-ui-ux-design-process.html