Scrolling through Youtube one afternoon, I came across this talk organised by Harvard Innovation Lab featuring Rohan Puri
on ‘Why you are overthinking your UI/UX’.
The speaker in this session talks about his disagreement with the tons of videos and talks that elaborate on foundations and guidelines that can help startups come up with better design solutions, and instead focuses on a process that after a certain amount of research and thinking relies on learning from mistakes. The speaker even walks us through a case study of an app he designed where data and analytics showed and unexpected user behavior, demonstrating the fact that you can not predict everything and just have to fix your mistakes when they come your way.
Rohan also introduces a Harvard Business School's Innovation Lab startup called Tisket and conducts a small user testing session for the same.
Tisket is essentially an e-commerce application that allows friends to discuss potential purchases in a public or private setting. The intended target group was women between the age of 18 and 30.
I immediately loved the idea and thought it would be a cool exercise to do further ideation and conceptualize the overall app from ground up.
Since, the idea was described in short as ‘social space for e-commerce’, It was necessary to understand the best practices and principles to follow while designing for e-commerce. I headed over to the internet to look for some guidelines that would help me to design a better e-commerce experience.
I tried looking up for any available literature regarding the same and luckily found this study
conducted by Shopify on Impact of Pinterest on e-commerce.
I found an article on best practices while designing for e-commerce and am mentioning the points which I thought were useful in my context:
Big images and lots of them
People want to see the products they’re buying prior to making a purchase. And since shopping online prevents them from seeing in person what they’re buying, they need images that give them as close to the same experience as possible.
That means there should be photos from every possible angle, and that those photos should be large (and preferably zoomable). There are a few ways to handle zooming on images, but the standard has basically become a magnifier over the image, displaying the zoomed image on the side or directly over the main image.
Draw attention to related products
Unless you’re only selling a single product, every product page should include links to other, related products. Selling dresses? Include links to matching shoes, handbag, or other accessories.
These should be given a prominent spot on the page, and be integrated into the design from the get-go, rather than something tacked on at the end.
Ensure product descriptions are detailed
A bad product description can make or break a sale. While as a designer you may not always be the one writing those descriptions, you should make sure that your design can elegantly handle descriptions of more than a paragraph without looking awkward (or breaking all together).
One solution here is to use a mini description or summary next to the product (and near the “add to cart” or other call to action button), while including a longer description further down the product page. Another option is to use a “read more” link that either opens a modal window to reveal the full description or reveals it in-page, moving other content down (or creating a smaller scrolling section). Just keep in mind mobile usability when designing these things.
I already had a certain understanding of what the product should be like since Tisket was discussed in great details in the talk. But I wanted to add a couple of more elements to the app that would broaden the target audience from women of 18 to 30 age to almost all the millenials who have ever tried hands on online shopping. I call my version of Tisket as ‘Hash’.
Hash can simply be defined as Pinterest for e-commerce. It is a social commerce application that allows users to add/pin products from various e-commerce platforms to their boards in public or private modes separately.
With the whole world shifting to online shopping, I think people need a platform where they can discuss their potential purchases, in a fashion similar to a group of friends shopping together. Several E-commerce platforms have started chats in their apps, but they are restricted their own website only. Hash is inclusive of several, different online shopping platforms making it diverse in its experience.
- View items of purchase coming from various ecommerce platform in their home screen.
- View detailed descriptions about an item in the feed.
- Create and add items to boards in a public or private mode.
- Follow other users.
- Like and comment on items appearing in feed.
- Search for an item.
- Start a purchase flow for an item of interest.
Login and signup
A commonly observed trend in e-commerce is to not force users to create an account unless absolutely needed. There are exceptions, of course (like if there’s ongoing support included with the purchase), but in general, it’s just a barrier to making a purchase.
I saw this ideology fitting aptly in my use case and took the decision to prompt the user for signing up only when they choose to do an action like creating a board, liking an item, following a fellow user etc that essentially require a user account.
Carousal for various categories of items.
Recommended items from various e-commerce platforms appear in the feed in categories they belong to e.g items of clothing,stationary, furniture, kitchen. These categories are selected by the user themselves as a part of on boarding process.
Information about items.
The items in the feed come with data points mentioning item name, seller/platform where it is originally sold and price.
Adding an item to a board
Just tap the ‘add ‘ icon and choose either an existing board or create a new one. Same item can be added to multiple boards also.
Two things worth making sure, that came from understanding design principles for ecommerce were to describe the product in great details and always show similar items that may interest the user.
Product details like reviews, product description, likes(a measure for popularity) and comments(opinion of other users) are easily available for an item.
Purchase flow for an item can also be started here, clicking on ‘Shop’ should take the user to checkout flow.
User can choose to create boards that can be set to be public or private in nature.
Creating a new board.
New boards can be created by tapping on the ‘add’ floating button, choosing a name for the board and checking the box to yes if you want the board to be private.
Search results are grabbed from various ecommerce sellers.
For example while searching for shoes, results from sellers like Nike, Adidas etc appear.
Activity section is divided into tabs as ‘You’ and ‘Friends’.
Activities of other users around you such as them following you, liking or commenting on an item in your public board etc shows up in this tab.
Whereas activities going on within your network, not essentially concerned with you show- in the friends section.
Here’s the video
that originally inspired this whole project