Kibo- Smart Shopping for Smart People
--
Introduction
Kibo is a smart shopping solution that allows its users to compare the product of their choice from various e-commerce platforms. It also collects and applies vouchers and coupons automatically to the enable the best shopping experience possible.
This is a personal project that I thought of and took upon individually. This project was created to enhance my portfolio.
Story Boarding
Have you ever been frustrated by searching a single product on tens of platforms only to realize it was cheaper on the first platform?
Here is a little conversation between me and my dad:
Papa: Arre sunn! Your mom has been complaining about that old fridge since last month. It’s time we get a new one.
Me: Sure! Check this one out on Amazon. Its 10% off too.
Papa: That’s cool! But still a little out of budget. You got any coupons we can redeem?
Me: Sorry papa! I’ve used them all up.
Papa: Did you check the price on Flipcart?
Me: Ya right! It’s cheaper here.
(10 platforms later)
Me: So, India Mart it is then?
Papa: Nah! I bet we can get it cheaper at the local Croma Store.
(Just wasted 30 min)
You see where I am going with this. In a world where time is money, spending boatloads of precious time on buying items like hairdryer is just not worth it.
My Role
As the sole designer on the project I was responsible for everything. Just like most of my projects I noted down all the work and made an action plan on how to execute all the steps efficiently.
My responsibilities include the following:
· Realize pain points to the idea
· Conducts surveys and interviews
· Make personas
· Collect job stories
· Do competitive market research
· Make user flows
· Make wire frames
· Test wire frames
· Decide on a design language
· Make final prototypes
UX Challenges
A good design is one that allows the user to navigate through the platform with ease. The expectations of the user must be met in the efficient of ways. For that it is important that we know where one can go wrong. So, I put myself in the shoes of the customer and thought of pain points of such an application.
· User can be overwhelmed by looking at a single item from various platforms
· One can also get confused due to a vast plethora of options, some of which the user might not even need.
· Bad User Flow: the user can be misguided to unnecessary pages, or land on a pages which serve a different purpose and not what was expected by the user.
· Heavy engagement: if the application involves heavy engagement from the user’s side then it would completely defy its purpose of being a virtual assistant
· If the user flow of this application is vastly different from that of any other e-commerce platforms then people might have difficulty connecting to it.
· The return policies on various platforms vary widely.
· Price of the item cannot be the only deciding factor for an item. Some customers might consider the item with the quickest delivery time more appropriate.
UX Goals
To develop a seamless e-commerce platform that allows the user to explore a product of choice from various platform and make a purchasing decision saving time and money. The user flow should be such that one is guided from beginning to start in making the right decision. I must avoid adding adding unnecessary options ad the application should be focused on its primary goal. I would address some of the UI challenges on other platforms. I’ll try my best to reduce any kind of friction from the online shopping experience.
Interviews
It is very important for any experience designer to know his customers, after all they are the one who make or break or the product. Also I think the questions to be asked must be open ended to get a better insight of the how the user would like to interact with any product. My main intentions from these interviews were as follows:
· Know about the users shopping experience
· Any problems that they face
· How often do they find themselves comparing items on various platforms
· How often do they use e-commerce websites
· A guide to buying shoes online
· How they find their desired products
· How many items do they purchase at once
Some Interview Responses
I got a lot to learn after interviewing almost 20 people personally on the phone. Here are some of the stories I got from my customer base.
Saket Kumar Singh (Finance & Marketing Expert): “I almost always shop online and Flipcart is my usually my goto platform for purchases. What I look for in a product is a tag of authenticity and good specifications. Reviews given by other customers help me make my mind. Items purchased together are really helpful. I compare on various sites before making a purchase, but usually stick to Flipcart if the price gap is not too high because their return policy suites I and I have never received any late deliveries or damaged products from them. I simply scroll on the home page and keep an eye out for offers. I wish online retailers also told me about service shops especially for electronic products, because I have faced problems getting items repaired that I purchased online. I usually buy one item at a time.”
Tanishq Dubey (Software Developer): “I live in a place with no fast delivery options thus I am not a very heavy user of online platforms. Whenever I do use them I usually have very specific items in mind that I want to purchase. I almost always use the search box to reach my desired product. I prefer comparing on at least one more site before making a decision. In a product all I look for are the specifications. It is variety that I find missing especially in clothes and shoes mostly because I really can’t find my size. Inver buy in a hurry and wait offers.”
Harsh Dixit (Programmer and Student at NITR): “For the past few years I have been shopping almost online. I use Flipcart and look for a mark of authenticity and quality in products. I always check out YouTube reviews before buying any product. Also comparison is a must and good ratings from other users always help out. I apply a lot of filters while searching and keep an eye out for offers.”
Meghan Pisupati (Aerospace Engineer):” I shop mostly offline but have also enjoyed online shopping in the recent years. I set an intention of what to buy, then search for it, apply filters and set a price range. I select a couple of products and add to my wish to compare later on. I would make such lists on multiple apps. I usually shop ahead of time, so I really am never in a hurry to purchase anything and would love a sale notification to pop up. I scroll on the home page and look for offers. Also I buy multiple items so the recommended items on a product page are really helpful. I don’t have any complaints from online platforms but will mention that video demos of the product do come in handy.”
Personas
Primary Users
According to 2019 statistics millennials are the largest user group of e-commerce platforms. Thus, these people form the primary user base of my application.
Secondary Users
Millennials might form the largest user base but when dealing with such large population, one cannot ignore even the smallest group of people. So, I also prepared a persona for a secondary user.
Job Stories
A job story encourages the product’s design process to focus on context, causality and motivations instead of assumptions, subjectiveness, personas and implementations. These contain a situation, motivation and an expected outcome. I’ve taken these stories from the interviews conducted.
· When an order is submitted, I want to see a message so I avoid resubmitting
· When I scroll on home screen I want to see hot deals so I save money on what I might want.
· When scrolling on home page, I want to see personalized products so I don’t waste time on deciding on what I want
· When proceeding with cart order, I need to edit list to match my current preferences
· When I scroll on product page, I need to see product details to make a purchasing decision
· When scrolling through product page I need to see similar products for comparison
· When I scroll down on product page I need to see items purchased together so I can get the best deal possible.
· When I see my orders I need to track it so I know when its being delivered
· When I am not available on the delivery date, I need to contact the logistics team to reschedule the delivery
· I need an order list, to replace the items in case they have any defects.
Analysis
After collecting data from online sources and interviews I compiled the results to know exactly what my solutions must be aimed at.
· 4/5 people don’t have any problems with their e-commerce experience: this tells me that the current applications are highly refined and I must closely analyse the flow of top platforms and try to inculcate some elements from there so people also get a sense of familiarity.
· 5/5 people compare products on all platforms: Almost all people like to compare an item on different platforms before making a purchase decision. This assures me that my idea will have a strong consumer base and would save people time.
· 3/5 people like scrolling through such platforms: A sizable chunk of the population likes to simply scroll on a homepage to keep an eye out for discounts and take advantage of shopping festival sales. So, a platform must be designed keeping in mind the importance of incentives and combo offers on product page.
· 3/5 of the people use the search bar often: this tells me that attention must be placed on the search bar. Though many people only have a vague idea of they really want, an evident search section and proper filters allow one to make the best decision.
· 1/5 people buy multiple items: People usually have their head set on particular items that they need and purchase it one by one. But, I must also keep in mind the people who add multiple items to their cart and check out at once.
Competitive UX research: Honey
Before jumping into a pool of solutions it is necessary to look at what the others have done. My job was to see how effectively my competition had achieved success and through which means. Also I noted down the pain point I found in these apps. The platform I primarily focused on was Honey.
The following is a step by step analysis of the Honey app
· Welcome Page: contains clay illustrations and brand name
· Login/Join: contains options to sign up or sign in. A new comer can tap on the get started option to see the on boarding
· Login Page: one can log in this platform through google, Facebook or by entering his/her email and password. A join honey option is also available in case a person needs to create a new account.
· Permissions: before entering into the application it asks the user to give permissions for notification for one to know about the various offers and coupons.
· Home page: An evident search bar flanked by a cart button. Underneath one can select various online stores, see categories and best sellers.
· Discover: this page contains two sections, one for shopping and the other for coupons. Advertising is visible along with category tags and sections like “Hot Deals”,”Trending Now”and “Explore Categories”.
· Product Page: Contains large pictures of the product along with name and other important information with the store name, save button and add to cart button. After this one can also see the price history and return policy along with similar products.
· Activity and Notifications Page: This page gives us information about the brands we follow and items in our wish list
· Profile Page: This page contains a profile picture, cart and an option to edit profile. We can also view history, information about store emails and wallet. Settings option is also available on the page.
Along with Honey I also examined Amazon and Gadget Flow to get an idea of how differently these platformed have solved problems.
Ideation
Now that I’ve collected necessary information and closely analyzed the needs of my users it is time to pick up a pen and start sketching ideas,
My thinking process
After I’m done with the research phase I think of solutions. For this I put myself in the shoes of my primary user. I think of the various activities the user can do and the different options they might need. After this I categories the options and arrange them in order of prioritization. Once, I know the options to be included I start sketching multiple renditions of the same screen. When I’m satisfied with the number of options I pick the best one out or best bits of a number of designs. I never rush my designs and do everything at once. If a page has multiple important components I do them one by one.
- According to Jacob’s Law the user spends most of his time on other sites and hence would expect my site to work in a similar fashion. So, I closely studied the flow of various e-commerce giants to draw up a user flow that closely resembles what a user is already used to.
2. I got to know from my analysis that many users have at least a vague idea of what they want, This tells me that a search bar highly important and must be isobar upfront. So, I pulled out some heat maps from the internet and found out that the area are of highest concentration is not right up to but a little underneath. This is where I decided to put my search bar.
3. The user changes his/her mind within 3–5 seconds. If, one is able to get to the desired page in the shortest time possible he/she might consider not using the app at all. And a user losing interest right at the beginning is not desirable. To tackle this I’ve added a skip option in the Sign In/Sign Up page, in case the user is not patient enough. One can be prompted later about entering their credentials. They are less likely to leave after they get engaged.
4. Advertisements play a very important role in telling users about the various offers going on. In the case of Kibo I also had to add which company is displaying the advertisement. People make quicker decision when they under a deadline, so I also added a timer at the bottom of advertisements allowing the users to view time period of a particular sale.
5. I realized that not all cards convey the same information. Some products like clothing require more focus on the the image of the product while others like electronic items require some important details to be shown. So, I decided to make two card designs for the different category of products.
6. The product page is the important when it comes to e-commerce. Only after looking at this page will the customer make a purchase. Kibo provides its users with all the information they need. One can know what platform they are buying the product from and see if they have any vouchers they can redeem on that platform. Kibo also provides useful information about the price trend and return policy on the website in question. Since most of the people watch unboxing videos or video demos of the product I have also included a link to a trusted review. On scrolling further one can also comparisons and frequently bought products along with real customer reviews.
7. The Cart page contains all the items added to cart with quantity, price and coupons redeemed if any. One can also view the total amount and a range of tentative delivery dates. Many people have to delete some of their items or go through the cycle again of shopping for a cheaper item. The adjust budget option allows the user to see similar items at a lower price which can be directly switched in the cart itself.
Some more designs:
Design Language
The product is cleverly named Kibo, to give characteristics to the application. The personification allows people to connect with the product. I have used Poppins for headwinds and Roboto has been used everywhere else. Poppins provides beauty and weight to the headings and Roboto provides a sense of familiarity to the readers. The logo of the brand is a cute fox which is supposed to symbolize clever shopping. The orange color of the fox has been used as the brand color and the rest of the application contains mostly whites and off whites. The text used is mostly grey or black in color.
Welcome Aboard
First impressions must always be good. Keeping this in mind I kept the welcoming pages as simple as possible. With minimalist design and conversation with Kibo the fox, I intent to connect user to the application. Also I did not want the user into formalities so I also added a very visible skip button that allows the user to go straight to the home page. Credentials like the phone number can be filled later on while purchasing the item.
Home page
This is the page where the user lands once he opens the app so I paid close attention here. The search bar is placed conveniently where it is most easily spotted. One also has access to vouchers associated with his/her account. Ads also play an important part in online shopping experience, so I’ve ensured that one knows who the provider of the ad is and also how long the offer will last. This is followed by categories and other products.
Search Listings
Not all products are required to be displayed in the same manner, so I categorized the items and made two different card styles to best present the item. The listing page again gives you access to the saved items and the cart option along with the menu on the top left corner. A prominent floating filter button is present at the bottom right for the convenience of the user. There would have been mass confusion if I displayed all similar products from various vendors’ right here, so the system automatically makes the right choice and displays a product only from the vendor who has a good rating and sells it at the cheapest price.
Product Page
This is where the user makes a choice of selecting a particular item. The page starts off with big pictures of the item itself followed by its name and the vendor along with important details and rating. One can then see the vouchers that can be availed. Next one is able to the different vendors selling the same product and the prices at which they are selling it. From the interviews I conducted I found that adding a link to a trusted review or try on of the product would be really helpful. Next one can see the price trends associated the product in question and also see the return policy of the company delivering the product. A notification reminder for the product can be set by tapping on the button or by saving the product. Then one sees the detail given by the manufacturer followed by similar products for compassion and items purchased together. The page ends with customer reviews.
Cart
One can see all the added products along with vouchers used and a tentative delivery date for each. The proceed button also contains the total bill. And adjust budget option is also available under the button. What this allows user to do reduce his/her payment amount. One can use a slider to adjust and the system intelligently shows them similar product at cheaper prices,
Conclusion
Kibo was a brilliant experience and got a lot to learn. With this project was on research and ideation. It is important for every experience designer to keep the user at the core of the product. I tried my best to add options that would be beneficial for the user. I also tried to remove unnecessary options that would otherwise interrupt the experience of the user. I am open to suggestions and I hope every reading this likes my efforts.
