GoFrugal – Web Navigation

Overview

GOFRUGAL is a digital-first company offering cloud and mobile ERP solutions to Retail, Restaurant and Distribution businesses. The aim of the project is to redesign and update their corporate website navigation.

Problem Statement

The current navigation is minimal in the sense that several frequently accessed and needy pages were hard to find or were available in the footer. When users were given the task to navigate to a page, they were taking more time. Users had to scroll to the end of the page to find them in the footer. The navigation lacked consistency among pages and this posed as the major challenge for the visitors. The business names categorized into business types and the sub menus are based on assumptions and that were not validated with real users. Conventional best practices such as consistent logo that is linked to home page were missing on few pages. Links such as ‘Home’ and ‘Back To Home’ were among other inconsistencies.

Users and audience

Business owners who are setting up their new brick and mortar store, enterprise shop, or those looking for a digital transformation by upgrading their conventional billing, POS (Point Of Sale) system and inventory processes are typical customers for GoFrugal.

Roles and responsibilities

My role was to find problems that users were facing with the current navigation through testing, bring in best practices for navigation menu design and validating the business types and the business names being categorized under them through card sorting exercise. Other tasks were to rebuild the site map, competitive audit and work on an interactive prototype showcasing the new menu. We were a team of three designers.

Scope and constraints

Timeline for this project was 4 weeks. Interviews were with real users and active customers who had a valid license to company services. Due to the pandemic and safety measures, all interviews were conducted over the phone or virtual meet. There was no budget for buying UX tools to execute remote card sorting and analyses and hence the execution and analyzations had to be done manually.

Process

Research & Strategy

I initially did an expert review on the menu. I came up with a list of possible improvements that could be made on the menu navigation based on conventional best practices such as having a logo that is pointing to the home page consistently in all pages, important and informative pages that were only accessible from the footer links such as Contact, About, Blog to be easily available for the visitor from the main menu.

Persona

Understanding the typical user was my first step in research. I had several discussion with company key stakeholders such as the CEO, Marketing Team Head, Sales Executives as well as few selected real customers. Questions were related to their knowledge on computers and internet, openness to explore new softwares, social and demographic types. Below is a persona that matches a typical store owner.

Site Map

Current site map was prepared to understand page hierarchy and to get an overview of the structure.

Competitive Analysis

Competitive Analysis was done to understand their strengths, weaknesses and most important findings.

User Stories

User stories were written on post-it-notes by each designer and were placed on the whiteboard. Similar stories were stacked together. Some of the user stories were:

As a user I want to navigate to the solution offering page for my business easily so that I am informed of features, integrations, pricing and other details that interest me.
As a user I want to navigate to pages that talk about the company so that I gain trust before investing.
As a user I want to navigate back to the home page by clicking on the main logo so that I can view the contents of the home page.
As a user I want to navigate quickly and view a content section within a long page so that I need not scroll a lot.

Card Sorting

Closed Card Sorting exercise was done to validate the business lists under each business type. This was conducted remotely without use of any dedicated online analysis tool due to cost constraints. Simple cloud based spreadsheets were adopted where users were asked to move labels listed in one column to several other columns as groups. While the participants were asked to think aloud during their sorting over the phone, the spreadsheet was monitored remotely. Given the pandemic situation and reduced access to real users, only 15 selected participants performed the sorting.

The above new groupings were used for the prototype menu.

Open card sorting exercise was conducted for the main menu items. Group names were given by users themselves. Several of the pages were consistently grouped.

Ideation

Objective and idea to list frequently and important pages as part of the main menu navigation was clear among the team. We had a break out session where each designer came up with their ideas for various layouts and menu patterns and then we reassembled to share and discuss the pros & cons of each idea. Sketches were drawn on the whiteboard.

Design

Quick wireframes were drawn and were shared with the stakeholders for a review. They were also tested with a few users and the feedback was positive.

Wireframes

Hi Fi Interactive Prototype

An interactive prototype of the new menu was developed in Adobe XD using existing components from the Design System. Since the mega menu was getting replaced, new styles were developed for the sub menus and secondary menu. The following link can be used to experience the prototype.

https://xd.adobe.com/view/098d414d-76bc-48ca-8324-1ebe423f731f-5cde/?fullscreen

User Testing

5 test participants were selected. They were real users (customers) to whom tasks were given on the current menu design on the live website. Users were struggling and were finding alternate ways to complete the task.

Example Scenario: Users were asked to show how they would navigate to the ‘Retail’ landing page from Home page and then navigate back to the home page. The menu item ‘Home’ which is inconsistent would be removed. Users commented that they would use browser’s back button, retype the URL, scroll to the footer and click on the GoFrugal logo, navigate to another page and then click on GoFrugal logo, etc.

Same users were presented with the new prototype that had increased consistent menus and they were able to navigate easily.

Outcomes

Users were able to navigate to the different pages back and forth without any difficulty. Important and significant pages were brought into visibility such that they were easily accessible and available for the user as part of the main menu navigation.

Time to find and navigate to the pages reduced significantly. Businesses mapped to the business types were mapped more accurately through user centered design approach.

Task Success Rate was higher by 40%.
Time on Task improved as users did not have to scroll to the footer to find the page they wanted. As they were presented in the header navbar, they could quickly find and navigate.

© Copyright 2022 skwork.in  |  All rights reserved.