Challenge
Beta version of the mobile application considerably lacked basic concepts of user experience design. Given the platform has a plethora of services to offer it’s imperative to simplify user navigation, information architecture and front-end design across all modules for a seamless experience. Objective is to give Passerby a design overhaul which involves ideation and creation of app design : UX research and Front-End design (UI) for a better user experience, gain higher service orders and provide better visibility of the products and vendors.
Solution
UX tools used : Here’s a quick tip for designers : You’d almost always be crippled by the number of UX tools available out there and all of them would seem to be useful. And yes, they are but every UX project is one of it’s kind and the trick is to understand what tools would lead you to discover the fundamental need that you or your design is trying to fulfil. Pick your weapons basis the outcome you want from your research. Here’s what we picked before going to the battlefield : 1. UX dashboard 2. User Persona board 3. Empathy Mapping 4. Feature audit tool 5. Experience Mapping tool 6. User story board 7. Miro board (we use Miro for all our collaborative projects). Understanding user and business level problems We kicked off the project with understanding the business value of the solution. To do so, we focussed on finding answers to these fundamental questions: 1. Does the market exist? What business value might the solution bring? 2. Market demand and size. What’s the likelihood of success of this app? 3. Competitive landscape. Are there similar products in the market and where are they positioned? 4. Value Proposition. What’s the core value the app provide and who are the target users? 5. Business metrics. How to measure success? Insights : Market level challenges : Below mentioned challenges are in context to Passerby’s hyperlocal services – Restaurants, Grocery, Medicines and Events. – Most of the services are heavily dependent on the platform you’re using right from warehousing to logistics. – If app’s logistics service is down users can’t expect any services to be functional – No solution for making multiple service orders at once – Most times users are dependent on stocks to be full at one single warehouse of an app (amazon, big basket, etc) – Customers don’t have enough time to toggle b/w different apps for different services as most of these services are used ‘on-the-go’. – Can’t calculate lifestyle expenses without collating information from various different mediums – individual platforms and offline billings – To choose items (for food delivery or grocery) is time consuming and not an enjoyable process for most – Users not realising they need an item at the right time Product level challenges : – Passerby does not have customer’s mindshare like an Amazon or Swiggy does. – Onboarding a medical store inventory is complicated (because of the sheer size of the inventory) and brings down the scale – Dynamic tracking of local vendors (for e.g. grocery vendors is a big roadblock) – Platform relies on vendors for logistics and inventory – Complexity increases as you bring so many services together on one single platform both from a User experience and Product development standpoint. Understanding existing User Behaviour We studied various groups of people who use hyperlocal mobile apps on a regular basis (not discounting prospective late adopters). Divided the user persona into 6 focus areas : 1. Personality 2 Interests 3. Skills 4. Persona specific reasons to use the product 5. Overall reasons to use the product 6. Tech savviness Using these focus areas (mentioned above) really helped us understand various scenarios and context as to ‘why, when and how’ the product is going to be used & by whom. We uncovered a few major concerns that could lead to a bad user experience or worse entirely abandoning the app : a. Having multiple modules/services on one single application can lead to extremely complex user navigations b. Having 4 different user journeys and different features per service (restaurant dine out & delivery, Grocery, Medical Stores and Event discovery) means a huge learning curve even for a regular Amazon/Swiggy user | tech savvy. c. Simultaneous access to 4 – ‘discovery and ordering’ service means a complex tracking and management system for users. d. Contextualising user experience basis the particular service (restaurant dine out & delivery, Grocery, Medical Stores and Event discovery) users are onto is of utmost importance since a user’s intention/psyche while using a dine-out service V/S ordering daily groceries is on opposite ends of spectrum. As a matter of fact your psyche differs even when you’re on the same module (say, Restaurant) deciding on which restaurant to dine-out at V/S desperately choosing which food to order while at office getting late for a meeting. e. Given that a hyperlocal service is generally used ‘on-the-go’, accessing either of the (4) modules on the platform should be equally easy to navigate or toggle through from the dashboard or home page. f. Designing different navigation system across 4 modules would mean the modules would be highly contextual but extremely difficult to use for different services simultaneously for majority of the users. Creating a contextual design system We did a thorough research around habit forming products and various dilemmas that exist out there around product design. Here are some fundamental principles we developed to create the design system. a. NUMBER OF CLICKS DILEMMA : While the number of clicks or taps are a good metric, it is essential to take into consideration other problem areas, and opportunities, otherwise, you could overlook other aspects that add up to the interaction cost and the cognitive effort of the experience. Keeping clicks to a minimum is important, but more important is to keep users informed about: what is going on, where they are, where they are going and what they need to do even if it means to add another click or two. b. INFORMATION SCENT : It’s is what you use to guide users amidst various product features and flashy interaction designs. There are two concepts in play here: The ‘Actual Source’ which is the page you want users to go to and it’s ‘Remote Representation’ which is the link/button/text in display. The content of your ‘Actual Source’ just cannot be compromised. For people to prioritise your Information architecture your ‘Information Scent’ to your ‘Remote Representation’ needs to be strong. And it’s often the thing that designers ignore and don’t give much thought to. It’s important for the link/button label, and the content that goes with it, to give users a sense of how relevant your ‘Actual Source’ might be. (I adapted this framework from the NN Group article on Information Scent) c. DESIGN BASIS USER INTENTION AND MINDSPACE : When you’re designing a complex system it’s extremely essential to realise what is your user’s intention at the time they are using your product. This is best understood by storyboarding just how animators would go about defining different frames to stitch up a complete story of their characters. It’s also important to understand that you will not always be able to capture every intention or scenario when/where your product is going to be used hence defining 4-5 sharp user personas is of the essence here. As mentioned above I used these 6 focus areas to understand the group of people and their mind space : #1. Personality, #2 Interests, #3. Skills, #4. Persona specific reasons to use the product, #5. Overall reasons to use the product, #6. Tech savviness Understanding the nuances such as the difference between user’s psyche when she is planning a dine-out V/S desperately ordering a sandwich on her way to an important meeting is core when you’re designing with empathy. And these are exactly the insights you gain by studying various User’s mind space. We used the above mentioned personas as my guiding principle to contextualise User Experience across the entire product. It also helped us shorten the learning curve for users to understand and take hints from one module and apply it on functionalities of other modules (more on this in the next principle). d. DESIGNING FOR MASSES – shortening the learning curve : Biggest challenge to designing a product with 4 different services was to shorten the learning curve in terms of using various functionalities across the modules. So, we went about designing a global user work flow finding core similarities between the 4 modules and thereafter sticking to a common flow across all the 4 modules. Impact of this global app user flow was multifold : – Commonality in flow/navigation means Users understand better in terms of what to expect next especially when they are familiar with one of the modules (say, Restaurant) and exploring another module (say, Grocery). This significantly reduces their learning curve. – Once you have the core user navigation figured out it’s easier to customise and contextualise different modules basis their usage. Also, users are more comfortable and primed for it. – Basis this framework we were able to design a dashboard which gives one click access to all the 4 modules. Given that this product is mostly going to be used ‘’On-the-Go’’ this meant a significant decrease in the interaction cost. – Deriving a global UI design framework led to a major breakthrough in terms of Designing for masses and shortening the learning curve while keeping it contextual. Designing a habit forming product Design principles, which guided our designs as we moved into ideation phase : a. CONVENIENCE : The product is designed to be used on-the-go and is very high on utility across all modules saving users’ time at multiple instances while they are discovering and ordering services/products. This eventually leads to a significant reduction in user frustration also. b. RECOGNITION NOT RECALL : “Minimise the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.” – An adaptation from NN group’s UI/UX heuristics has been a core focus through out the product design phase since the aim is to reduce the learning curve and faster adoption of the app functionalities. c. ENCOURAGING : The product is designed to encourage faster decision making and provides intuitive and guided navigation to help users close the loop faster. d. SCALABLE : The Design architecture of the product is extremely scalable to absorb multiple feature and module additions as per the product roadmap requirement for the next 9-15 months. It saves cost and brings in flexibility. Deriving a global UI design framework from User navigation flow – A Major Breakthrough Struggle between keeping the modules contextual V/S keeping the learning curve within limits led me to create a design system which runs on the common DNA of the product flow – Discovery (vendors, offers) -> Shopping Experience (product view, details, add to cart) -> Check out Experience (delivery address, payment methods, coupons, special request) -> Rating the app.
Results
We were able to design and develop a hyper scalable model for Passerby by significantly decreasing the complexity of the design architecture and increasing the intuitiveness of an on-the-go platform.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.