UX Design
〰️
Research
〰️
Ideation
〰️
Wireframe
〰️
UX Design 〰️ Research 〰️ Ideation 〰️ Wireframe 〰️
UX Case Study
Bajaj- 2021
Navigating Better
Evaluating and reimagining the website of Bajaj MARKETS, a digital financial marketplace that is constantly growing with the addition of businesses, partners and products.
My first interaction with the Website was that of chaos, unknown journeys, and filling of endless forms. I quickly realized that I was clicking CTAs which left me wondering where I would be taken to next and what information would be asked of me.
Why is the Website Important to business generation?
The MARKETS website not only is important for brand visibility but acts as a guide and information trove. Users can use the platform to directly purchase any product from the platform or calculate and plan for their future purchases. The website is also a platform to make informed and educated decisions for the users. If the experience for the above is satisfactory and seamless it would lead to an increase in consumers and also lead to a better relationship with the user.
Problem Statement
The Website Navigation is confusing and on only a page-level for both devices.
The CTAs don’t instigate the user to purchase products or view offers they are eligible for.
The information provided is overwhelming and often not consumed because of the visual clutter that obstructs the natural reading pattern for the user along with very long paragraphs that require a lot of time to read.
Proposed Solutions
1) A 60/40 approach for desktop
To visually balance and align the content where the screen would clearly be divided.
This approach would mean that all the informative content would be occupied by 60% of the screen while the rest would be a dedicated space for quick links and or a running campaign that needs to be pushed from a marketing or business point of view.
2) Navigating MARKETS
After evaluating the information on each page and analyzing the user behavior during my primary research I identified that there were more than 10 different subtopics with a lot of informative intel which not every single user would want to go through but since the scroll was so long the user also didn’t get to the subtopic which they were looking for. This led to me exploring different solution approaches such as making all components collapsible and only having them expand when the subtopic was of use to the user. This Approach quickly fell flat in the guerrilla test I did with different colleagues on the floor. The feedback and observation were:
The Collapsed components were only expanded by 2 out of 7 users.
5 users said they didn’t perceive it as important information and hence just went to purchase products.
The two users that used the expand feature for a subtopic were for the subtopic “How to Apply” and “Documents Required” and went to Purchase/ Apply for the product.
I was at the same time exploring the idea of Jumplinks and decided to test the same. The results for the same were much better as that allowed the user to further interact with the webpages and also use the jump link in case they were looking for something specific. This then had to be linked to the product pagination. I took some inspiration from Venn diagrams where a, b, c, d were part of L2 and the Jumplinks (L3) were part of L2 but each had a different relationship with a, b, c, and d respectively. Let me explain this better with a venn diagram!
Navigating MARKETS on a Desktop
The website navigation inside a product consists of two components that together allow the user to visually understand where on the page they currently are and also how they can get to other pages. The two components are the L2 Menu which indicates the Page in the product description page while the L3 acts like a child to L2 consisting of jump links that are easy to use and reduce long scrolls.
Both these components can also be used without each other under certain scenarios.
Navigating MARKETS on a Mobile
The navigation concept for the website on the mobile remains the same. The obstacle I faced here was that of real estate. Accommodating the web navigation component proved to not be the most effective experience on the mobile. So to make the most of the pixels a small nudge indicating it can be expanded and collapsed was created that accommodates both the L2 and L3 menu.
As visible in the image (Left to Right) We see a collapsed menu followed by an expanded view of the same. while the third image shows only the L3 menu that is triggered only when the page scroll is actively used and the scroll bar allows the user to navigate to and select a subheader that they would like to jump to.
3) Placing business front and Center
The current design only leads the user to purchase, apply or interact with the product after clicking a CTA that doesn’t clearly state what the user should be expecting. To solve the problem the first fold of the web page was used to have all business interactions front and center so that is the first Call to action a user will take if they are in fact on the platform to purchase.
For example, if a user is interested in a loan they will clearly be able to see how the loan can be applied for buy a short form that clearly indicated the system status of the same along with clear CTAs telling the user they can view their offers, check eligibility and apply for the same.
As seen in the image the green highlighted screen indicated the ratio of screen used for business interactions clearly allowing the user to start the process of purchase of the product.
4) Optimizing the Information
The current design although has valuable information is visually overwhelming. To solve that problem I further categorized types of components in context to the layout of the content. Where even if the user has limited time they can understand their topic of interest on a surface level with just the header to each point. Each point also has an icon attached to it to easily communicate the crux of the written content visually.