Published on <a href="http://ift.tt/2p2M1vG">| Prototyping: From UX to Front End &mdash; Medium</a> Anuj Gadre 
<h3>Zopper — a UX case study</h3>
<h4>Bringing shopping assistance to Indian consumers.</h4>
<img alt="" src="http://ift.tt/2p33TWX">
Zopper is a price comparison app with an emphasis on local stores. I started working at the company in early 2014, when it was on a cusp of changing its business model from a review aggregator app. It was my first startup experience
<h3>The market</h3>
2014 began with the e-commerce business scene flourishing in India. Around 150 e-commerce businesses were competing in this ever-expanding market. There were so many options, that the average consumer was confused in making a buying decision. Further dividing the consumers was the persisting retail industry comprising the brick &amp; mortar stores. E-commerce still was only 7% of the retail market. There was immense value and opportunity in these local. The company’s existing product was Reviews42.com, and it was changing its business model around these consumer pain points.
<h3>This is where I started.</h3>
As the UX Designer, I looked at designing a solution that caters to such market needs. Thankfully for me, being the only designer in the team, I got to be involved in a lot more than just the product. I also got to implement all my understanding of design process that I had acquired during NID, Ahmedabad.
As for any design exercise, my first target was to understand the market, and the users, in this case, consumers. Understanding users and the context is at the core of any design process. Of course, as a technology company, we were more interested in people using smartphones and computers to shop. My other aim was to understand the pulse of the market, consumer buying behavior and the factors that affect it.
The research was done in two ways. First, I circulated online survey among my friends and friends of friends, asking questions about how they buy, what they buy or, where they buy. The information from these surveys was then collated and inferences were drawn from that. The interesting part, was the other research method I adopted. I, along with the program manager, went to local markets and interviewed people of all kind; buyers and sellers. We learned a lot about buying behavior and shopping pattern of people, across different product categories and the factors that affect their decisions.
<img alt="" src="http://ift.tt/2pQFuH9">We were based in Noida, India, and Connaught Place in Delhi was one of the markets I chose to do the ground research.
We got many insights from the exercise, but these were the key takeaways.
<ol>
<li>Generally, a consumer was confused in buying from local stores or online. The decision would be based on multiple factors like category, price, location, occupation etc.</li>
<li>One thing was clear that “Price” was the ultimate factor. Price-sensitive people would not shy away from hunting for deals.</li>
<li>People use online stores as a tool for product research. They may or may not buy from there.</li>
<li>For a lot of people, local stores meant trust or approachable. With apprehensions on making transactions online, they would always look for local stores giving them good deals.</li>
</ol>
One thing was clear, after considering the subject matter, that the product direly needed a makeover. The whole product team huddled up to find out the most suitable name. That’s how we found Zopper. As a designer, I helped the company to look for agencies who could give us great re-brand. Read about that experience <a href="http://ift.tt/1wjoliY">here</a>.
Meanwhile, I focused on learning more about android as an app platform because that was the decided direction. Android dictated 91% percent of smartphone market share and it was the obvious choice.
As the next step, I started with creating personas and user flows. From these user flows, I understood the key pain points. I then identified areas where Zopper could intervene and found out new scenarios. I worked with the program manager to look at competes and studied why, how and what they are doing. The key challenge here was building something from ground up. Not only we had to find features that will make Zopper compete in the market but those USPs that will make Zopper unique.
<img alt="" src="http://ift.tt/2pQqHw6">Creating personas and walking them through user flows, helped me to identify key pain points where, Zopper could intervene and help.<img alt="" src="http://ift.tt/2p38AQH">There were several iterations in the wireframe stage, which helped to achieve feature parity, and final structure of the app.
After finding the desirable feature set, I would create wireframes which would be then reviewed by the core team. The core team would consist of all stakeholders, i.e. the co-founders, PM, Dev, and Marketing leads and me, Design. After getting feedback from all stakeholders, I’ll iterate and then the loop will repeat, until the changes were finalized. It is only then I’ll move to the visual design part.
<h3>Your personal shopping assistant</h3>
Zopper was not supposed to be just an app. It would be ‘the’ app to help you make an informed buying decision. It will help you find the right product, at the right price, and from the right place.
<h3>App Navigation</h3>
The app was structured on four main pivots. Products, Stores, Offers, Categories. The Product pivot lets users dive in into product discovery. The Stores pivot let users discover local stores near them. The Offer pivot provides deals. The Categories pivot dives into the product browsing experience.
<img alt="" src="http://ift.tt/2pQl80Q">
For the visual design, my main influence was material design. It had just released in the 2014 Google I/O. During initial product development, and post the first release, there were a lot of experiments with the visual design. I got the chance to understand what resonated the most with users from feedback and user data. For example, in terms of imagery vs iconography vs illustration, which appealed most to users.
<img alt="" src="http://ift.tt/2p3c6L4">
Information was delivered using cards. Cards of several kinds provided actionable touch points to dive deeper. I also worked with the dev team to automate the process of generating images for deals card based on the deal type and category.
<img alt="" src="http://ift.tt/2pQw26z">
The Products pivot had strategically designed hooks that would let the users discover new products to buy. One of the unique hook designed was Save big every hour which will list product from impulse-buy categories, that had a price drop, refreshed every hour. All hooks had12–15 cards and a dive deep experience. In fact, all the pivots were designed to provide an engaging experience within them.
<img alt="" src="http://ift.tt/2p3e8uF">
The Stores pivot had information about local stores near user location. Users could find local stores near them based on categories or popularity. Special care was taken to showcase only those stores, which provided rich data so that user experience is not mitigated.
<img alt="" src="http://ift.tt/2pQt6Xs">
The Offers pivot showcased deals that were collected from online stores within the Online Offers tab. The Zopper Exclusive tab showcased deals that Zopper gave its users partnering with the local stores near them. Even simpler was to redeem the deal for the user, by just showing the app installed on their phone.
<img alt="" src="http://ift.tt/2p38WXz">
Within the Categories pivot, each category page let users deep dive into the category and find sub-categories, popular products, new arrivals and fresh price drops. There was also a unique feature designed, called Find the Right Product, which strengthened the idea of shopping assistance.
<img alt="" src="http://ift.tt/2pQKPyi">
Find the Right Product, asked users a set of questions that would narrow down their product search to suit their specific needs. The questions were laid down on cards. The whole experience is designed to facilitate one handed use. For example, the price slider can be easily used with one hand and it will show an approximate price as the slider moves.
<h3>The product page</h3>
<img alt="" src="http://ift.tt/2p31KLd">
The product page experience was designed to be immersive. In the user journey, it’s the last link in the chain. A user can decide to buy the product and leave the app to go to the e-store or the shop detail page to take further action. Hence, it’s designed in a way that users don’t have to leave the page to find prices for products that offer multiple variants. Users could find prices for all variants, look at specifications, read reviews, or find similar products.
<img alt="" src="http://ift.tt/2pQHnDM">
I also tried looking at ways in which the product image can provide the accent color for the UI. The product experience also scaled well for different kinds of categories.
<h3>Key Learnings</h3>
Zopper was designed from the ground-up and was released expeditiously thanks to the combined efforts of a great team. We heavily relied on user data and user feedback to improve the app after the launch. It was my first experience of working in a PM-Design-Dev triad and my learning was immense, both in design and the business aspects of it. The start-up environment, boosted my confidence in data driven design, and quick-gratification from user feedback.
<img src="http://ift.tt/2p3ihyI" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pQLeR5">Zopper — a UX case study</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Zopper — a UX case study

Zopper — a UX case study

Bringing shopping assistance to Indian consumers.

Top Stories