Redesigning Hamrobazar mobile app: UX Case Study
After ruling the Nepali online marketplace for almost two decades, Hamrobazar, or “Hamrobazar.com” ( as they prefer to be branded) has finally announced they’ve been working on a new User Interface & functionality upgrade when they unveiled their new logo mark on social media last week.
It created a little buzz on Facebook & LinkedIn amongst tech enthusiasts as the CEO, Mr. Rohit Tiwari publicized the new logo mark. And why not? Hamrobazar is, after all, a product associated with the sentiment of many Nepalis for getting their first prized possession; mobile phone, laptop, vehicle, or even land & house.
What is Hamrobazar?
Hamrobazar was conceptualized & started in the mid-2000s as a classified ad marketplace primarily for second-hand items. It has grown to become one of the most loved Nepali digital marketplaces.
Call it a second-hand marketplace, an e-commerce platform for any tangible items (although it isn’t accurately an e-com), retail for non-tangible services, or a reference station for price comparison, Hamrobazar is the go-to place you want to check out for fulfilling your requirements of the most miniature commodity to sophisticated electronic gadgets, automobile, rental rooms, real estate, and even jobs.
Most Nepali millennials & zoomers with technology access would have at least heard of Hamrobazar even if not interacted directly.
Reportedly, it has ground-breaking stats of 2 million page views per day, 150–200 thousand daily visitors, and an average of 12–13 minutes of customer retention per user daily. Thinking of this profusion of traffic volume, you might have guessed their revenue model correct; it’s the traditional banner ads.
Why UX Case study on Hamrobazar ?
Although Hamrobazar has been successful to monopolize the digital classified marketplace of Nepal, there are some design problems costing usability apart from the overall look and feel of their digital product.
I’ve seen a few Nepali Designers’ portfolios with re-designed Hamrobazar screens. However, most of them are modern high-fidelity prototype screens lacking a proper breakdown of the problem solving part in their Design solutions.
Disclaimer
I am in no way associated with Hamrobazar at the time of working on this study, and the branding elements (color palette, logo & typeface) I’ve used are merely conceptualized. The logo has been concept-colorized which is derived from the newly revealed black & white logo mark.
‘HB’ has been used to denote “Hamrobazar.com” throughout this article for convenience. I hope this won’t bother stakeholders.
Overview
This report will walk you through how I have worked on the entire process to understand the users’ behavior towards Hamrobazar and their experience using the mobile app. I’ve also described how my Design addresses one of the significant problems faced by sellers in the buyer/ seller communication part.
The course of action:
i) Understanding & categorizing the problem
ii) Primary research (Survey & 1 to 1 interview)
iii) Secondary research (Google Play store comments reference)
iv) Research Analysis ( Site map, Affinity map & Persona)
v) Pen-paper wireframing & High fidelity Prototyping
vi) User Testing
The Problem
After studying the insights from my primary & secondary research findings and getting a diverse range of response, it occurred to me that it would be simpler to break down the problems and categorize them into these different sections for the existing Hamrobazar mobile application:
a) User Interface (Visual aspect)
b) Overall User Experience
c) Product description page & seller-buyer touchpoint section
While sections ‘a’ & ‘b’ are the obvious motive for doing any UX case study but unlike a typical product, I discovered there exists several room for improvements in terms of both UX and UI.
Section ‘c’ Product description page & seller-buyer communication section borrows Information Architecture & Visual Hierarchy part from the UX umbrella ‘b’ , and the reason I have segregated it as the primary problem in this study is that this came out as users’ primary pain-point from my findings.
Primary Research
A user survey was conducted via google form encompassing the topics to study the demographics of respondents, recognize behavioral patterns about online shopping in general, and evaluate the user experience on the HB mobile app.
The survey participants were mostly tech-literate population lying in the age bracket of 16–45, most of them under the 20- 28 age group. There were a total of 17 responses in total out of which 17.2 % were female respondents. 82.3 % of participants were working professionals.
While 76.5 % of them had used Hamrobazar either to sell or buy products at some point in their life, only 11.8 % of them consider HB as their primary choice of the online shopping platform, and 29.4 % percent of them would check HB as the last option.
23.5% would come to HB just to check prices with other platforms for the best deal comparison.
Among the respondents, 58.8% have said that User Experience is essential for them, and they would migrate to a different app if one gets launched with a similar volume of item(ad) listings, alike features but a better user experience. On the other hand, 17.6 % have stated that they have trust issues with a new platform and would choose to stay loyal to Hamrobazar.
Participants have rated an average of 4 on a scale of 10 for the user experience of the HB mobile application, and most of them have complained about its poor visual interface and demanded modern & clean design. Their first impression of seeing & using the HB mobile application was not pleasant overall.
Most of them are compelled to use the HB website over the mobile application due to poor user experience particularly associated with difficulty in use and buggy occurrences although using mobile for shopping would be their preference otherwise.
In Design terms, it is the usability issue that is keeping them from using the HB mobile application.
Secondary Research
I spent a good amount of time trying to understand the frustrations and demands from existing users on the comment section of Google Play.
Following that, I isolated the concerns with the highest frequency. Without any particular order, the major complaints were about i) app logging out automatically, ii) need improvement on the visual design part, iii) many bugs and crashes, iv) need improvement on the search algorithm, v) need seller verification & vi) feature to hide the contact details & in-app chat preference.
User Interview & Persona
Without talking to the users in detail, it was difficult to gain qualitative insights as the survey and review section would only give quantitative figures. Therefore, I conducted user interviews with 2 users among the respondents that roughly lasted for about 15–20 minutes.
From those sessions, I was able to understand the user’s challenges: their experience, expectation, pain points and needs.
User persona of these two participants was created to represent my target audience.
Here are some of the key insights and quotes from the users💡
Get non-converting buyers’ calls frequently for price negotiation (even for items listed non-negotiable) and to know the item feature details that would already be mentioned in the description area of the listing. It is a huge time waster. -Ashmit Ghimire
HB platform is the ideal solution for me as I get to check the authenticity of the item before purchasing but the app is not user-friendly at all. Everything looks like a chunk of description text on the cluttered interface. I have to ask my husband to help me locate items and connect with the seller. - Aayushma Karki Luitel
Affinity mapping
To visualize and synthesize all the bits of information collected from user research, persona, and interview, I mapped the responses and sorted the major needs and pain points of the users while using the app.
Site flow
A quick sitemap considering Information Architecture and User Journey was sketched to plan the design for further processes and help me recognize patterns for UI prototyping.
Wireframing & Prototyping
Based on the outcomes of research, User Flow, and Affinity diagram, I created paper-pen wireframes for multiple screens.
Following a couple of paper iterations, I had a general concept ready, so I wore my pixel cap and switched to Figma for high-fidelity mockups.
Solution
a) User Interface:
It has been long realized and debated between Nepali tech enthusiasts that HB needs a clean and easy user interface. Not to be misunderstood, we are referring to the visible side of the product here and not about demanded features or bugs.
Not that I have kept track, but they seemingly have not worked on the interface upgrade since first launching on the google play store.
Visual appearance plays a significant role in developing trust and determining the usability of digital products. Fellow UXers should already have made guess what I’m trying to highlight here. Yes, I am referring to the “Aesthetic Usability effect”, a fundamental law in the User Experience realm.
Simply put, it’s a tendency to think that a good-looking design is more usable than a less appealing design even if the less appealing design has better usability.
I’ve tried to highlight the most problematic UI aspects here in the image. Though there are many more, these are the main ones that I could assemble to showcase on a single screen.
Linking this effect with HB visual cosmetics, the finding indicates that some of my survey participants tend to gravitate towards the competitors (e-com items) or ditch the mobile app for the website because of a comparatively easier experience on their web interface.
The primary brand color they’re using in the current mobile app #2BABCE does not adhere WCAG accessibility guidelines on white text, and this is a big red flag in terms of accessibility.
In my mockup screens, I’ve slightly tweaked the color so that it doesn’t look totally distinct from their primary color while still trying to harmonize with the WCAG guidelines.
The categories have been laid out in the classic grid view for easy navigation of items on the home page which is complemented with the prominent search bar at the top.
Bottom navigation has been added featuring the most essential options for quick navigation. Besides displaying information at a glance without having to tap like in the oldie hamburger menu, it also has an edge of easy reach area for large screens which are popular these days.
b) Overall User Experience
With the visual aspect being just one of the many parts affecting the overall user experience, there are many more contributing factors.
In the current HB app, there are several mini-bits where the experience of using it is not up to par.
For instance, not being able to set location while searching items upfront(need to apply filter every time), not being able to select multiple images while posting ads, displaying sold-out items (simply increases the visual load), no distinction in primary and secondary buttons, and even microcopy for error messages.
The gibberish microcopy for the error state as mentioned in image significantly affects the overall experience. Software these days are made friendlier than ever just by revising the microcopies as it contributes to storytelling about the brand, product, and the way you it does business.
While my small set of participants have not specified a particular point that impacted their experience, they’ve generalized it using words like “difficulty in using” and “simplifying the process”, it’d be pretty safe to assume that they are not enjoying using the product.
As the cliched (yet rational) UX definition goes “UX is what it feels like”, it’s tough for users to recognize the exact bit, but it still feels that something is not just right.
In my prototypes, the location selector to the display location-specific ads sits at the top on the home page. This reduces the extra step of having to apply the filter every time to see location-relevant ads.
For instance, Ram Bahadur from Pokhara would only want to see the ads of mobile phones nearby his location should he wish to purchase a handset using the platform.
A striking FAB (Floating Action Button) hangs on primary screens facilitating the users who wish to post ads from any primary screens instantly.
Option to change profile details, read the T & C and guidelines, contact HB support team, and logging out of profile has been neatly arranged beneath the sliding bar which pops on tapping the user avatar at the top left.
In the original app, these options are scattered haphazardly which impedes the smooth user flow.
There is a dedicated option on the navbar for favorite marked ads/items which is generally the buyers’ bookmark to come back and contact the seller swiftly.
Coming to the real mobile app, this feature is concealed behind an extra tap inside quite an unnatural section under the name “Watchlist ads”.
Users in my design can select multiple images at once for an ad, and I’ve given the description section extra attention and designed it to look less cluttered, avoid redundant information and maintain a visual hierarchy for an easy interaction experience.
The general description and item-specific specs are separated making the information comprehension easier lessening the cognitive load. One of the users’ most demanded features, a distinct sellers’ verification badge has been added on the top along with the display image.
The elements layout and information arrangement in the original app has a poor overall visual balance and feels like everything is competing for the user’s attention.
c) Product description page & seller-buyer touchpoint section
For one of the questions from my primary survey, “If Hamrobazar was to come up with a new User Interface. What features/ design changes would you love to see in the update ? “, one of the participants responded, “Need to hide seller mobile number. I receive too many useless calls.” which also happens to be one of the most requested features in google play’s HB app’s Rate & Review section while working on this case study.
There is an existing option where you can opt to communicate with buyers via email on the original app, but the icon and copy label on the buyer’s end makes the choice ambiguous.
While the icon on the button signifies email, the text on the pop-up menu says (private message) in the bracket. This can be a head-scratcher to a lot of users. Email, private in-app chat message, or both?
Moreover, providing only an email option if the seller opts to hide the number isn’t an efficient feature for these reasons:
a) With increasing digital services, we are bombarded with so many push notifications these days that people often clear them all by tapping “Clear all” without checking. So, it’s easy to miss the email unless you have the habit of checking your inbox now and then.
b) The buyer’s email can land in the Spam folder for which sellers don’t get the notification and miss the prospects.
c) So many important email vanishes amongst the plethora of marketing campaigns & newsletters in the inbox.
Considering this vital gap in the sellers’ end, my design aims to find a workaround.
I’ve included an option to directly chat with the seller to perform the trading. This way, a seller can filter his/her prospective customer and get the best value for his service/ item with great convenience without leaving the app.
Imagine this versus noting down bargains made by all the calling customers or checking inbox to find out the best deal from the plethora. What a time waster!
I’ve not displayed the sellers’ contact number on the description page but added an on-demand feature where the buyer receives their contact details over email/ contact number only after his/her request.
This extra layer of information obtaining process not only helps by saving the sellers time but also reducing the spam contacting & information abuse by the third-party people which is ubiquitous these days.
The idea is that only the interested buyers request the contact details if the internal chat doesn’t work out between them for some reason. This is how my design addresses the problem of time consumption (of both seller and buyer), helps strengthening the sellers’ privacy, and may even improve the userbase (due to this feature) thus contributing to the revenue.
User Testing
The second iteration of this screen was made following the user testing with my interviewee. Instead of the “Contact Seller”, Call to Action which facilitates fetching the number directly on the dialer, I’ve changed it with the “Get details” option which as the label explains, sends the details over email/ message to the buyer.
Extra friction in the process means less motivation to ill-intent Ram Bahadurs.
Conclusion
Rebranding is an extensive process. Brand in itself is a persona that has grown, changed, and evolved like all of us have.
All these years, Hamrobazar has not only survived but has succeeded to emerge as a trusted marketplace besides becoming a primary source of livelihood for many Nepali families. It may have gone through updates appending several new features and verticals but it seriously requires a visual identity change to exhibit what transformations in business process and service were made being one of the most loved consumer-facing companies.
I am eager to see what features they’ll re-work on, and how the users will respond when this legacy product reincarnates. I have this strong notion that they’ll attempt to preserve their vintage look & feel not completely overhauling the UI in their first update but pushing it gradually over time.
It has matured to become a habit-forming product, and decision-makers here need to be careful not to swamp their humongous user base with a completely different-looking product overnight.
Nonetheless, this case study was an attempt to address the visual and experience perspective carried out with standard methodology. I tried to make this study as comprehensive UX case study as possible. I hope reading it was able to add value in any way possible.
Medium compresses images up to the point that costs legibility, so if you’d like to access any image files I’ve used, you can download all of them here.
Thanks for making it up to here. 🙏
I’d be much gratified if you’d leave feedback and thoughts.
