Hi there – I'm Surabhi, an interaction designer with over six years of experience. Currently learning how to design experiences outside the confines of a screen @UW.
Formerly @flipkart and @unacademy.
Hi there – I'm Surabhi, an interaction designer with over six years of experience. Currently learning how to design experiences outside the confines of a screen @UW.
Formerly @flipkart and @unacademy.
Hi there – I'm Surabhi, an interaction designer with over six years of experience. Currently learning how to design experiences outside the confines of a screen @UW.
Formerly @flipkart and @unacademy.
Flipkart Online Shopping App — redesigning the customer shopping experience on iOS and Android
Project Brief
Revising the consumer app in form, function, and content based on Flipkart's new design language
Company
Flipkart
Year
Early 2016
Role
UX/UI Designer—Design owner of iOS consumer app (2M MAU)
Skills
Interaction Design, Visual Design, Project Management, Usability Testing
Flipkart is India's leading e-commerce marketplace with products across 80+ categories and over 100 million registered users. In 2018, Flipkart was acquired by Walmart at a valuation of $22 billion.
Version 1.0
Brand Refresh
In 2015, Flipkart launched a new brand identity. The refreshed identity, including the new logo, was a reflection of Flipkart's promise to its stakeholders — youthful, innovative, fast, and reliable. As design owner of Flipkart Online Shopping App for iOS, I was responsible for the end-to-end customer experience for 2M monthly active users. I executed the UI mockups for the pre-order experience and independently managed the iOS consumer app redesign from conceptualization to launch.
iOS consumer app—final mockups
Impact
I tracked development progress on a daily basis and prioritized design features by taking a phased approach. My work on the app led to a higher app store rating of 4.5 from 3.5 stars.
Version 2.0
Flow Improvements
Our goal during phase I was to bring design parity across all platforms. Once the form had been revised, it was time to focus on the app's function and content. Since the majority of our customers were on Android, I took an Android-first approach to explore the next set of improvements. I reorganized the content and made structural improvements to the product page and high-level navigation.
Product Page
While working on product page v2, I prioritized information based on business goals and what's critical for the user to make a purchase decision.
High-fidelity prototypes: Exploring thumbnails vs. carousel and financing options
-
I highlighted financing options because India is a highly price sensitive market and showing affordability would increase chances of conversion
-
Securing customers through PREXO and No Cost EMI would give Flipkart the first mover advantage because these options were exclusive to our company at the time
-
I introduced the Flipkart Assured badge to promote the company's promise of quality products and fast delivery, keeping in line with Flipkart's strategy of consolidating supply of products among a few trusted sellers in key categories
-
I added a slide-in drawer to make variant selection easier and to create a perception of speed
Product Categories
Previously product categories were hidden under the fly out (hamburger) menu and were also accessible through a link on the homepage. I moved the most popular categories out for better discovery.
Navigation Bar
I proposed a navigation bar to make it easier to explore and switch between top-level destinations through a single tap. While the bar performed well in the usability tests I conducted, we ultimately decided not to go ahead with this change. Reason being that the engineering bandwidth required to build this feature was high and we knew this navigation pattern would be new/unfamiliar for most Android users because Android N hadn't even launched at the time.
Nested Alerts
Another change I proposed was removing the fly out (hamburger) menu altogether and moving its contents into the Account page. By moving Notifications into Accounts as well, we would have been able to completely clear up the header space and use that for theming purposes. This change would also be accompanied by Instagram inspired tooltips to alert the user on new messages and notifications.
.png)
Product Exchange
In the offline world, 40% people opt for exchange programs when purchasing a new phone while the conversion rate on Flipkart is only 13%.
The top three reasons for low adoption are:
-
Discoverability
-
Usability issues in the purchase flow
-
Liquidation value
Building a quality assessor that calculates the liquidation value based on the condition of your phone in real time is probably the best way to compete with the offline market. However, designing a radically different PREXO flow required time and engineering bandwidth. So I decided to take a phased approach and tackle problems 1 and 2 first. I made usability fixes in the funnel in order to reduce friction and solved for discovery by giving PREXO more visibility across the user journey.
