Navigation is a crucial part of any product experience. It helps users use the product efficiently. I worked on the user pattern that grows with newer use cases for ModeMagic to enable users to discover the product and improve their conversion rates.
About mason
Mason is an all-in-one growth platform for E-commerce that turns online stores into sales magnets. ModeMagic is its SaaS tool on Shopify, Magento and Bigcommerce that helps brands automate and gamify in-store experiences.
The Challenge
In the fast-paced world of e-commerce, ModeMagic's ability to run frictionless promotions, Increase customer trust, and run daily deals & flash sales is a game-changer for brands due to increased conversion rates and more profits without code. However, we observed a concerning trend where nearly 40% of new users were uninstalling the app shortly after installation.
Context
The user is a brand owner with a digital store on Shopify. Finds it convenient to start an online store.
With time faces difficulty in managing and organising it.
Problem Statement
To find a user pattern that grows for newer use cases in-app which helps the users (Brand owners) to discover the product and improve conversion rates.
Problem Setting
How do we aid users to understand different features for faster adoption? How do users navigate in the application?
Secondary Research
We considered various segments of Retail & E-commerce to identify areas where we can launch new features. B2B, B2C, C2C, E-commerce, M-commerce and Social media commerce. We focused on E-commerce store essentials - Homepage, List page, Product Details page & Cart page. Understanding the Sales funnel helped us understand the customer journey.
End users (Customers) - Insights from the Customer Journey
Customers are of various types - price-sensitive, need-based, loyal, high-value, demanding, tech-savvy, impatient and new customers.
.
Customer behaviour patterns vary based on their types and are important in shaping good retail experiences.
.
Customer Behaviour patterns we found - Media consumption reached record levels, screen time has increased and customers are more receptive to ads.
.
Consumers want people advocates, and people before profits. Online shopping is the new normal.
ModeMagic users
Merchants - These are individuals or businesses who sell their products online. They have to keep a close eye on what are the consumer needs and have to be updated timely about the e-commerce trends.
Merchant Characteristics
Entrepreneurial & customer-focused
Results-oriented & adaptable
Data-driven & tech-savvy
Creative & resourceful
Passionate & risk-takers
Merchant Challenges
Developing & maintaining an effective website
Balancing profits with pricing
Provide excellent customer service
Managing Inventory & Brand trust
Logistics and shipping
For Merchants, the marketplaces seem to be an easier entry point into e-commerce, most of the processes are taken care of but profit margins are low and lessor customisations are available as compared to an e-commerce store.
Learnings from Competitor Analysis & Benchmarking in Shopify
Progress indicators are helpful to motivate users to complete tasks within the app successfully.
The editor pattern is visually clean, layered with a hierarchy and clear navigation to avoid user drop-off.
Segregation of commands based on editing capabilities and publishing capabilities.
Primary Research
Shadowing, ethnography and interviews were conducted to observe and understand current gaps faced by customers..
Insights
The editor pattern is too complicated and is not uniform across all the features/apps.
The navigation panel lacks in-depth information about features & their impacts.
Need of central space for accessing active features tips to improve store performance.
With fast-changing e-commerce trends, there is a need for an expandable user pattern for new features.
User Scenarios
Affinity mapping & Need prioritisation index
Redefined brief - To design a centralised navigation pattern and a supporting onboarding flow to enable browsing and publishing for the merchants.
Design Sprints | Develop and Deliver
We adopted a fast iterative process while solving this problem and we solved it with 5 design sprints.
Sprints - Agile framework
Every time a team creates a digital product, best practice is to:
Think if the product is worth building
Build the smallest possible version
Ship it to 5 - 10% of your customers
Make it available for everyone and tweak
Sprint 1
Emphasise: The navigation panel is overflowing with additional features.
Define: To design the Navigation panel in the editor & guide users
Ideate: To sketch & decide what can work better.
Testing: 5 days - user calls & Hotjar recordings.
Observations: The automation feature was unexplored by users.
Further steps / Tweaks: The navigation panel failed. The checklist passed but was followed halfway by users.
Sprint 2
Empathise: Users are unable to explore and browse features.
Define: To design the homepage and an improved onboarding flow
Ideate: To use an e-commerce home page and to understand the intent of users with onboarding.
Central Idea: To gather information from the users for a personalised experience.
Design Consideration: The App loading took 10-15 seconds and had pre-designed loading screens. The idea was to have continuity in the loading and onboarding flow. We designed a 3 step flow.
User Psychology: Zeigarnik Effect - People remember incomplete tasks better than completed ones.
Lewin’s field theory states that a task in progress creates task-specific tension.
Testing: Users were interacting with the checklist but it was completed by only 10% of the users.
A major feedback we received was around non-uniform usability patterns in terms of automation or widgets.
The Homepage was getting user views, but users were not sure about the impact after using the features.
Sprint 3
Empathise: Users are unable to understand the potential of features. What? Why? How?
Define: To create a segregated homepage to enable users to choose features.
Ideate: Homepage with goal segregation.
Design consideration
The features were grouped into apps, campaigns and Store set-up blocks.
Navigation panel with app filters for customer acquisition, visitor engagement, and buyer upsell.
Right panel with insights, notifications & nudges.
Testing
We did A/B testing of sprints 2 & 3.
Observations - Users interacting with sprint 3 explored more features than in sprint 2 design but had doubts about new features like banners.
Further steps / Tweaks - The homepage had repetitive navigation and lacked descriptive cards.
Sprint 4
Empathise: Users are still unable to understand the potential of features.
Define: Goal-oriented homepage to accommodate more features.
Ideate: Declutter & better card design.
A/B Testing
20 users tested the homepage with the metrics being session duration and the number of clicks.
In approach 1, the categorisation based on the funnel required an effort of retrospection for the merchants to choose apps. Approach 2 performed better in terms of the session duration and feedback from the testers.
The Homepage for ModeMagic
Sprint 5
Emphasise: Existing users will feel lost whereas new users will need guidance to understand the App.
Define: To define a first-time user experience with progressive disclosure & nudges.
Approach 1: Funnel-focused onboarding to help merchants browse apps.
Testing: In the internal testing, we found the details on the app cards in the onboarding were not enough. The user was lost in the editor. The checklist was essential to motivate users to finish the task.
Approach 2:
Adding the goal gradient effect and continuity in the onboarding flow. Breaking down the bigger tasks into simple steps
Testing: 70% of the users were able to complete the task. Hence this flow was developed.
Implemented seamless onboarding wizards across the app to provide consistent guidance without being intrusive.
The strategy employed involved utilising the concepts of labour perception and the goal gradient effect to enhance onboarding completion rates effectively.
Impact
Endorsement from Leadership
Thank you