Hopscotch is not a traditional online store. Each day, new curated collections are launched on the site. The collections are filled with children’s brands from India and around the world. Some of the collections last for a limited duration.
With the homepage we wanted to address the following questions:
- How do we feature more varied engaging content on the homepage? What should this content be?
- How can we personalise the homepage for our users?
I redesigned the homepage for the Android app which included wireframing, visuals and prototyping.
The homepage of the Android app only consisted of a list of collections. It also displayed an overarching navigation to the department pages — Baby, Girl, Boy, Home/Sale.
To start with, I downloaded and used 5 popular shopping apps to get a better understanding of what products are out there solving the similar problem. I then met my colleagues from different functions in the company. Their insights enabled me to approach the problem from different angles.
Merchandising - Talking to the merchandising team helped me gain insights on the assortment of merchandise and how they curate collections based on gender, age range and type of merchandise.
Marketing - From the marketing team I learned the value of our top brands and how their performance affected other brands. For example, if we launched an international brand like NEXT UK, our own private label brands would also see a significant surge in traffic and conversion.
Personalisation - The personalisation team shared how they slotted customers into cohorts taking into account the gender and age of the child that the user has shopped for. They then sort collections on the homepage for each cohort based on revenue and depth of inventory.
Data - The data team had a key insight on the behaviour of the users while shopping on the apps and website. Users with one child predominantly shop directly from the homepage. When users have more than one child, their end up using search to find what they want.
Design and Product - I brought these learnings to a brainstorming session with the design team and the product manager. Over the next couple of days we finalised and prioritised the various types of content that would appear on the homepage for the initial launch.
- Gender and Age Preference
- Collection Tile UI
- Grouped Collections
In addition to designing these features, we wanted to make the homepage very modular so as to experiment with the sort order and get a better understanding of what features work best for each cohort. The engineering team pointed out to us that creating reusable components would help better the performance of the page.
With these learnings I quickly moved between wireframes, visual designs and prototypes. Since we followed agile process, I had small time frames for testing and re-working iterations of the different features. This allowed me to frequently refine my design based on constant feedback.
Gender and Age Preference
How can we help users find the most relevant collections?
How can help users shop for someone other than their children?
Through data we found that a significant number of users shop for someone other than their own child. In this instance because of personalization they would not find what they were looking for on the homepage and resort to using the search and category page. To solve for this we wanted to allow the user to select gender and age to personalise the content on the homepage.
After sketching a few options and discussing them with the design and product team we narrowed it down to a sort feature in the top navigation, which would be expanded by default. Once the user selects the name and age it would collapse into the navigation. I also designed a nudge to inform the user about this feature on the second and third app launch.
I designed separate department tiles for displaying Baby, Girls and Boys based on user preference set in the sort bar. I also designed a department widget when the homepage was set to a default sort option “All”.
Collection Tile UI
After scanning the homepage I realized that many collections could be grouped based on themes. It would help reduce the overall page scroll as well as allow the use to scan or skip a section quickly.
- Anchor tenants - Best selling collections and featured brands that cause a halo effect on the whole site. Displaying these collection would help draw new buyers, and also help surface new style updates for repeat buyers.
- Daily deals - Group sale and promotion related collections
- Thematic collections
- Recently viewed collections and products - Users see a collection but may not purchase from it right away. When they come to the homepage the next day or so, they can’t find what they last saw. Recently viewed collections and items allow them to quickly view it again and place their order.
- Similar collections - These recommended collections displayed at the bottom of a product list contributed significantly to the revenue. Surfacing these collections on the homepage based on the collection the user browses, would help them find more relevant collections.
- Upcoming collections - Generates interest before the launch of the collection.