Vaisala Online Store

Streamline the product exploration experience

This is Vaisala's online store website refresh and re-platform case study. Vaisala is a global leader that develops, manufactures, and markets products and services for environmental and industrial measurement. I was responsible for the user experience design, wireframe development, and interface design. I focused on designing four key screens: homepage, product listing, product details, and the cart screen. I balanced the users’ needs, business strategy while adhering to Vaisala’s style with my own design intuition to create an effective customer journey.

Role
UX/UI Design, E-commerce, Website

Duration
3 Days

Year
2018

Vaisala online store project focus

Project Focus

I met with solution architects to understand the company’s business goal for their clients and evaluated the pages on their website according to good design practices. Based on my evaluations, I designed a set of rough wireframes that focused on streamlining the product exploration experience to make it easier for customers to navigate the website.

Branding

Once the wireframes were finished, I adhered to Vaisala’s branding guidelines based on its current website to refine its visual identity and reinforced a consistent perception for their brand new online buying experience.

Vaisala online store branding

Current Homepage & Category

The current homepage featured a long products listing, which halts the customer’s buying momentum. Additionally, collapsing the entire product catalog navigation within a solitary navigation item (e.g., “Products”) causes confusion to new users who land on the site as they do not fully understand what types of products Vaisala carries. Most of Vaisala’s users have done extensive research on the products as they often already have specific products in mind that they want to purchase. The search field is under the top navigation which effects the users efficiently search their desired items.

    Current Vaisala online store home and category
    Screenshots taken from Vaisala online store
    May 2018
    ‍

    #001 Product Home

        With Vaisala's new homepage, I focused on reorganizing the navigation and also features an obvious search field on the page header as their primary product finding strategy. I also added a new featured called Quick Order to allow customers to efficiently add the selected items to a shopping cart; in turn, reducing the amount of clicks to perform the desired action. By improving the top navigation, emphasizing the search field, and adding Quick Order, users can now spend less time searching for their desired products and quickly checkout.

        Vaisala online store prodcut home
        Vaisala online store drop down menu

        Main Drop-Down Menu

        • The new Vaisala navigation features thumbnail previews that informs the users more about what the company does and allows them to deliberately consider subcategories of the products before displaying hundreds of products at once.
        Vaisala online store search and quick order

        Search & Quick Order

        • The search field now offers autocomplete suggestions that allows users to easier scan the different search queries in the dropdown list; in turn, guiding them and lending them a helping hand in constructing their search query.
        • Customers can place orders by directly using individual product SKUs or CSV file to place orders for multiple products. This feature helps them to efficiently add many products to their shopping cart at the same time.

        Current Product Lists & Filtering

        Currently, its horizontal filter with many filtering options made the site look cluttered and ruined the user’s experience as the filter menu would disappear when the user scrolls down the page. Additionally, when users select many filters, the website would display zero results, which present a dead end for users. Furthermore, users suffered from poor scannability on the product lists because all product specifications are simply thrown into the long product title. Lastly, when comparing the products, users must scroll all the way back to the top of the page in order to click the compare button, which interrupts the user experience.

          Current Vaisala online store product lists & filtering
          Current Vaisala online store product lists & filtering
          Current Vaisala online store product lists & filtering
          Screenshots taken from Vaisala online store
          May 2018
          ‍

          #002 Product Listing

            To tackle the flaws of Vaisala's product listing screen. I enhanced the overall sorting and filtering experience. Instead of horizontal filters, I changed the design to vertical filters to display applied filters in both of their original position and overview to let users know that the filters they’ve selected have indeed been applied. In the product list items, I distinguished the product title and the category-specific attributes with different front weight to allow users to easily compare the item across products. In order to improve customer satisfaction and allow customers to make informed buying decisions, real-time status of the stock levels is shown.

            Vaisala online store product listing
            Vaisala online store product comparison

            Product Comparison

            • Product Comparison includes the product title and thumbnails sticky below the screen, allowing the user to always have access to compare different products.

            Current Product Details Screen

            The current product description went on and on without any visual hierarchy, which caused a low level of legibility. The users, therefore, couldn’t scan the information quickly and had to make a significant effort to distinguish the data they’ve been looking for.

            Current Vaisala online store product details
            Screenshots taken from Vaisala online store
            May 2018
            ‍

            #003 Product Details

            For the Vaisala's product details, I focused on improving the browsing experience and enhancing product findability. I reorganize the breadcrumbs, a type of secondary navigation scheme that reveals the user’s location in a website, to enable users to easily navigate to a product’s category to find related products. Articles, video, FAQs, and customer reviews are listed to provide an in-depth product information for early-stage researchers. Suggestions for alternative products ensured that users could explore different options or find additional products that suit their needs.

            Vaisala online store product details
            Vaisala online store product details

            Current Cart Screen

            There was no shopping cart page on Vaisala. The shoppers could only view the cart in a small area on the current home screen, which cluttered the screen with overwhelming content that forced the shopper to do more work to see items in the cart.

            Vaisala online store current cart screen
            Screenshots taken from Vaisala online store
            May 2018
            ‍

            #004 Shopping Cart

            In order to make their purchase decisions, review their selections, check details, and compare items keep the user more focused during the checkout process I provide a full shopping cart experience access. I provide a Mini Cart that displays the products added to the cart when the users hover over the cart icon to avoid disrupting the flow of their shopping process.

            Vaisala online store shopping cart
            Vaisala online store mini cart

            Mini Cart

            • Subtly animated popover notifies users when an item is added to shopping cart. This feature Immediately acknowledges the added items to give them a clear feedback about whether the site successfully processed the add-to-cart action.
            • Hovering over the cart icon allows its visitors see products added to the cart without taking them out of the shopping process. When they are finally done shopping, they can then navigate to the checkout page, which ultimately enhances their shopping experience.
              Vaisala online store 3d mockup

              Browse more projects

              Flyhomes Website Redesign — Breaking Down the Homepage to Capture More Leads

              UX/UI Design, Branding, Website, Mobile

              Vaisala Online Store — Streamline the Product Exploration Experience

              UX/UI Design, E-commerce, Website

              Spotify — Redefine Mobile Experience

              UX/UI Design, Mobile

              Sprinka — Smart Watering Experience

              UX/UI Design, Animated Prototype, Mobile

              Waken  — Prosthetic Leg for Amputee Wakeboarder

              Industrial Design, Research, Model Making

              Unistrol — Eco-friendly Stroller

              Industrial Design, Research, Model Making, Sustainability, CMF
              copyright
              © 2018 Jocelyn Ma
              Email
              jocelyn.y.ma@gmail.com
              Social
              LinkedIn — Dribbble