Look at UI/UX Design Process

Download Look at UI/UX Design Process

Post on 13-Apr-2017

1.203 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

  • An Inside Look at Our UI/UX Design Process

    UI & UXDESIGN PROCESS

    Elumalai JayaramanUX Designer

    Zoho Finance Team

    https://www.zoho.com/inventory/

  • We recently launched Zoho Inventory, our inventory and order management

    solution.

    We're definitely 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 unified, 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 first 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 find when you integrate independent solutions from

    different providers.

    a) Identifying the key design challenge.

    The very first 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 specific

    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 different items,

    some boxes may be shipped at different 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

    different sets of items. All of these things need to be tracked.

    Before we started designing the UX to solve these problems, we first 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 LUPTON

    c) 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 KELLEY

    This 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, quantity

    Packages: Number of packages, items in the packages, status of package: packed, shipped or delivered

    Invoices: Number of invoices, packages/items in the invoices, status of invoice: sent, fully paid, partially paid, overdue

    Its pretty simple, but this is the essence of the information architecture,

    and its a good illustration of the complexity and the infinite number of use

    cases that the user will have to handle.

    For example, a sales order can have ten different items, and these items

    are packaged into three different 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 different sales orders with

    very different configurations. The final 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, first impressions are

    persistent. Its very hard to shake that first 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 first 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 definite 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 different with Zoho Inventory,

    going for a dark and flat 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 different 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 find 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 definitely 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 unified, 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 first 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 find when you integrate independent solutions from

    different providers.

    a) Identifying the key design challenge.

    The very first 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 specific

    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 different items,

    some boxes may be shipped at different 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

    different sets of items. All of these things need to be tracked.

    Before we started designing the UX to solve these problems, we first 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 LUPTON

    c) 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 wo...