top of page
Vitaran is an e-commerce mobile and web application, a distribution platform targeted to digitize the process of fast-moving goods distributions and inventory management among multiple stakeholders in the B2B segment.
This project involved providing a setup for distribution and supply of FMCG products among 4 stakeholders:
Retailer, Rider, Wholesaler and Distributor.
TEAM MEMBERS
iClimb Systems India Pvt- Project Manager, a Mobile Developer, a Web Developer,
UX-UI Designer (Me)
MY ROLES
UX Researcher, UX Designer, UI Designer
DURATION
1 year (2021-2022)
Anchor 1
DESIGN IMPACTS
The product saw an average of
33 new customers sign up every week.
The retainment rate of 83% overall and some zonal retainment rates reaching upto 90%
STAKEHOLDER CHAIN
02
RIDER- Delivery Agents
-
Orders from Wholesaler
-
Retailers places bids on Rider's order
01
RETAILER
-
Small business owners
-
Cannot place Bids
03
WHOLESALER
-
Orders from Distributors
-
Retailer & Rider places bids on Wholesaler's orders
04
DISTRIBUTOR
-
Cannot place Orders
-
Wholesaler places bids on Distributor's orders
Define
1
Research
2
Ideation
3
Design
4
5
Testing
WHY IS VITARAN NEEDED?
.png)
INTERVIEWS
The interview and research for this project involved talking to people from the business, the shopkeepers (retailers), wholesalers, and investors.
-
What do the users expect when they think of buying and selling FMCG items online?
-
What would motivate them to switch to online methods?
-
Would a user be comfortable with bidding for goods?
-
What are the expectations of the investors?
-
How would they like for the application to benefit them?
​
RESEARCH FINDINGS
-
92% agreed to have dependency on supplier relationships.
-
87% were open to using technology to source new suppliers.
-
98% agreed that their motivation to switch would be options in better pricing.
-
No competing product in the market using bidding to buy.
​
COMPETITOR ANALYSIS
.png)
Udaan operates a business-to-business online marketplace for trading and fits closely to the list of competitors. Analyzing Udaan's product features will help in understanding the trends of the market—'what' works and what does not'.
USER PERSONAS
With the data from the interviews, personas of users were mapped out to build empathy with the target users of the application.
The 2 user personas:
-
Ken Adams, a Retailer in commercial regions of Malleshwaram
-
Deepak Reddy, a Distributor from the same region.
CARD SORTING
IThe cards are classified into three categories- features and elements that will be on the app, the means by which we can increase the engagement with the users and listing the methods by which we can retain the new users on the application (consistency).
FEATURES
MEANS OF ENGAGEMENT
MAINTAINING CONSISTENCY
INFORMATION ARCHITECTURE
The flowchart diagram helped in understanding the sequence in which the features should be laid out to maximize the efficiency of completing the task. With a detailed site map, important features were highlighted and the low-priority elements were put in secondary categories.
LOW FIDELITY PROTOTYPES
The low-fidelity prototype consisted of all the screens in the applications. The low-fidelity prototypes were tested out with people from the team, investors, and the target audience. The shortcomings of the low-fidelity prototypes were rectified in the high-fidelity mockups.
MOBILE APPLICATION SCREENS
WEB APPLICATION
The web application was made to be run by the admins and the Vitaran Partners. The focal point of the web application was to make it data-centered; therefore high-level importance was given to making it easy to access information and data to run the mobile application easily. The visual interface for the web application was of low priority.
VISUAL STYLE GUIDE
HIGH-FIDELITY PROTOTYPES
MOBILE APPLICATION
WELCOME SCREEN
SPLASH SCREEN
The Splash screen and the Welcome Screen invite the user and gives a brief about Vitaran and its benefits to them.
VERIFICATION SCREEN
SIGN UP SCREENS
SUBSCRIPTION
The new users have to avail a subscription to the zone/s of operation to be able to order or place a bid. The subscriptions can be renewed when they expire.
HOME SCREEN
Home Screen
New, Renew, Expired and Expiring Subscriptions are indicated in the Home screen.
The Home Screen contains the Deals of the day, the statistics for Bids & Orders for the last 7 days and the product which are classified into four types- Popular Products, Popular Categories, Popular Companies and New Launches.
BIDS AND ORDER LIST
The Order List & the Bid List gives the status for the number of the orders or bids placed. The Bid list is further classified into- New, Pending, Confirmed, Completed, Cancelled and All orders. The Order list is categorized into Pending, Confirm, Delivery, Completed, Cancelled and All orders.
Bids List for PickUp
Bids List for Delivery
Orders List for Delivery
Orders List for PickUp
Anchor 2
PRODUCTS
Products icon from the navigation bar leads to the catalog of items available. These are further classified into- Popular Products, Popular Companies (ex- ITC, Inaayat), Popular Categories (ex- Cigarettes, Mouth Freshener), Other Products and New Launches.
Popular Products gives a list of popular items available. Products can be added either from this page or by clicking on the product image which leads to the Product Details screen.
Popular Companies gives a list of items available. Products from different companies can be selected from the Show List option which has the images of all available popular companies.
ORDERING SEQUENCES
The sequence of ordering begins when the user adds items from the Products screen. The list of items is collected in the Raise Order page. Once the Order is raised, all the bidders within the radius get a notification to start bidding. After the bidding time ends, the bidder with the lowest price gets selected. The orderer confirms the order and awaits it to be dispatched.
As a part of making the user experience visual, the stakeholders were differentiated with colors
Retailers, Rider (Hawker), Wholesaler, Distributor.
Order is marked completed.
The Orderer raises the order and picks delivery or pickup of orders, selects the duration of delivery and address.
Once the order is raised, the orderer has to wait for the lowest bidder. The orderer has the option to Cancel the order.
After the order is confirmed, the orderer can contact the bidder to coordinate the delivery.
The bidder with his rating is displayed to the orderer. The orderer has the option to either Confirm the order or Cancel the order. Along with the bid price the Vitaran Labh (profit) is also provided.
ORDERING SEQUENCES- OTHER STAGE
Without a subscription the orderer cannot Raise Order.
The orderer has to select a reason if they wants to cancel the order.
Order is cancelled.
No bidder is found.
When the timer runs out, the orderer gets a message asking if the order is completed.
After completion of the order the orderer is asked to rate the bidder and give a review.
If the bid gets cancelled by the bidder the orderer gets the next best option available.
BIDDING SEQUENCES
The sequence of bidding begins when the user gets notified to start bidding on an order. The bidder submits their price, and the one with the lowest bid is selected. The bids can be accessed from the Home screen.
Order is marked completed.
The bidder puts in prices which are lower than the prices of the orderer within the provided time and gives Raise Order.
The bidder has to wait for the orderer to confirm the bid. The bidder has the option to cancel the order.
Once the bid is confirmed by the orderer the bidder has to deliver the order. At the time of delivery the bidder puts in delivery pin given by the orderer.
BIDDING SEQUENCES- OTHER STAGES
If the bidder wants to cancel an order he has to specify a reason.
Order is cancelled by the bidder.
Bidder has to have an active subscription to place bids.
Order is not confirmed by the orderer in the given time.
When the timer runs out, the bidder gets a message asking if the order is completed.
Top 3 lowest bidders get locked during the confirmation period.
The lowest bidder gets selected.
The other two not selected bidders get this message.
After completion of the order the bidder is asked to rate the orderer and give a review.
INFORMATION ARCHITECTURE FOR WEB APPLICATION
HIGH-FIDELITY PROTOTYPES
WEB APPLICATION & RESPONSIVE DESIGN
DASHBOARD
The Vitaran Dashboard gives an overview of the daily reports based on the performance of a product and the metrics of the orders at a glance. They are laid out in colored graphs and tables to have an efficient, clean and simple understanding of the daily progress.
RESPONSIVE DESIGN FOR IPADS AND MOBILE
ANALYTICS
SUBSCRIPTION MANAGEMENT & PRODUCT MANAGEMENT
Subscription Management holds the list of Vitaran subscribers categorized based on the stakeholders. The user list can be further refined precisely with active, never active, expiring, expired, and renewal options.
Product Management encloses all the products available on the application. New products can be added, and existing products can be edited or deleted here.
Subscription Management
Product Management
SUBSCRIPTION ANALYTICS & MARKET ANALYSIS
The analytics for the subscribers on the platform can be obtained here. They are further examined by subscriber user analytics and Average value per transaction of the subscriber, which are categorized into low, medium, high, and very high.
Market Analysis gives a complete report on the performance of the Product, Company and Category. The top performing items are highlighted. A comparative analysis can be drawn between the items to track their highs and lows. They are presented in graphs and tables.
Market Analysis for a Product
Subscription Analytics
Responsive designs for Market Analysis can be found here.
VITARAN PARAMETERS
Vitaran Parameters shares a detailed survey on the Orders and Bids in the platform. The daily and weekly data can be obtained here. It also shows the Subscriber's Labh(Profits) and Avsar (Lost opportunities) which is categorized into Low, Medium, High and very High.
CHALLENGES
-
Since the application caters to a demographic of users who are unfamiliar with technology it was necessary to keep the User experience simple, engaging and intuitive.
-
The most important element of the application was to aid the user with visual clues and familiar regionalism content.
-
It was challenging to work on web application and make sure that it coordinated with the mobile application. For example: A product has to be first added in the web application along with its details for it to be reflected on the mobile application.
-
Managing the needs of the stakeholders and designing features to fit their requirements needed constant iterations based on the results from the usability testing.
LEARNINGS
-
With each new feature release, I recognized the critical role of usability testing. I learned that not every idea succeeds—what seems promising to a designer may not resonate with the audience.
-
Being actively involved with the development team throughout the implementation process allowed me to gain a deeper understanding of the application. Additionally, investor involvement and their feedback provided valuable insights into their expectations for the project.
-
The time constraints added both a challenge and an exciting dynamic to the project, as frequent brainstorming sessions pushed us to generate fresh ideas and refine the application.
bottom of page