JioMart | 24 Hours | UX Case Study
Let me take you through my 🕛24Hours design challenge, I select Jio Mart.
Disclaimer!
This is a personal project. In a short time, I try the maximum process. Low-fidelity and also compare with other industry apps and check the app using Heuristic evaluation and apply UX Laws to improve the current app.
📝Low-Fidelity Paper Wireframes
I started with low-fidelity wireframes before moving to high-fidelity digital wireframes to come up with detailed ideas and to decide the user flow.
💎High-Fidelity Design | UI
After completion, the wireframe started the UI stage
🏠Home Page
➡️ Remove the upper section “Cart”🛒 option. It was added to the bottom. Considering the order and cart, the cart is more important because the business 📈has done more cart sections. Inside the Cart product will next pay. The Order is included in the Profile.
On the mobile📱 lower side user can quickly access consider the top side.
➡️ In the upper section Cart🛒 option will replace with the Help option.
➡️ In the Bottom Menu the Help option will remove and replace with the Profile option.
➡️The upper search bar provided the “Shop Fast” option. It is added to Bottom Menu, and the center option will add “Shop Fast” for quick access. On the mobile lower side user can quickly access consider the top side.
🚩The “Shop Fast” will work quicker.
The “Shop Fast” option is placed in the center because of the “Center stage effect / Middle effect”. The user is more likely to notice the center option.
Also, added the tag for “Fast” quickly identify the “Shop Fast” option.
“In Fitts’ law, The longer the distance and the smaller the target’s size, the longer it takes”.
🔎Search Page
➡️There is a “Mic icon” on the homepage for voice search. But click the search bar there is no Mic icon for voice 🎤search.
“In Jakob’s law Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”
The other e-commerce apps will include voice search on the search page.
🛒Cart Page
👉🏻On top, the user can change the address but there is no easy reorganization. So by adding a button it is easy to recognize that the user can change the address.
User Control and Freedom (Usability Heuristic #3)
Summary: Users often make mistakes or change their minds. Allow them to exit a flow or undo their last action and go back to the system’s previous state.
👉🏻The order detail page “Place Order” button in the existing app user could not visible in the first view. When the user scrolls the page visible the button.
“In Fitt’s law, The longer the distance and the smaller the target’s size, the longer it takes.”
The “Place Order” button is fixed position so that the user can see the button at first glance which helps the user to place the order quickly without having to scroll the page.
👉🏻Add price details💵 button so the user can see the order details in a good format.
👉🏻Change the button color to create more urgency, and it helps to stand out from the page. Create more attraction at first glance.
❄️Benefits
👉🏻The “Place Order” button is a fixed position that helps the user to place the order quickly. It decreases the session length.
Filter
Each product has different filters mentioned. Here some of the common filter options will update for a better experience.
In the existing app, users confuse the “Sort & filter by” option, that option will stick on top. The user thinks it will be the heading of the 4️⃣options “High to Low”, “Low to High” etc.
Clearly mention the heading “Sort & Filter By” Add a background color so the user can easily identify the heading.
➡️All 3 options have been brought under the category of “Sorted By”.
It did not mention on what basis the four options were categorized.
Added Price headings for “High to Low” and “Low to High” options.
“Discount” is also mentioned below so remove it.
Vertically arrange the option.
➡️The Filter page “Clear all” and “Done” buttons in the existing app user could not be visible in the first view. When the user scrolls the page visible the button.
The “Clear all” and “Done” button is a fixed positions so that the user can see the button at first glance without having to scroll the page.
Change the word “Done” to “Apply”. Done does not have the same meaning as apply. Apply means we are selecting different attributes we needed and by this, the user can select different available attributes. Done means have finalized our decision, not have further possibilities to apply other filters.
The user will apply the filters, not “done” the filter.
➡️Despite the Price option having multiple options, the user can select only one option. So change the radio button to the check box to select multiple options. It helps to select multiple Price ranges.
User Control and Freedom (Usability Heuristic #3)
Summary: Users often make mistakes or change their minds. Allow them to exit a flow or undo their last action and go back to the system’s previous state.
➡️ Although the discount option has multiple options, the user can select only one option. So change the radio button to the check box to select multiple options. It helps to select multiple discount ranges.
User Control and Freedom (Usability Heuristic #3)
Summary: Users often make mistakes or change their minds. Allow them to exit a flow or undo their last action and go back to the system’s previous state.
✅Learnings
A problem should be identified and make a solution to the problem, should be found within a short period.
In this project, I unlearn to be a perfect way and I cannot solve every problem in this app. I tried to solve current app problems in comparison with other industry apps and check the app using Heuristic evaluation and apply UX Laws to improve the current app.
🙏🏽Thank you for your valuable time to read this article! 😃
Comment 💬your feedback