shadow_block_small_tall_1

Homepage redesign × Creating engaging app content

Homepage redesign × Creating engaging app content

Homepage redesign × Creating engaging app content

Homepage redesign × Creating engaging app content

Timeline
7 weeks ◍  2017

Company
Hopscotch.in

Role
Design, Prototyping

Role
Design, Prototyping

Role
Design, Prototyping

Role
Design, Prototyping

In brief

Hopscotch.in, a discovery-based online shopping platform, offers curated children’s merchandise to mothers in India. Hopscotch is not a traditional online store. Each day, 8-10 new curated collections are launched on the site. The collections feature children’s brands from India and around the world, some lasting for a limited duration.

For this project, I  explored how we could create a more personalized experience for our users and feature engaging content on the homepage. I redesigned the homepage of the Android app which included creating wireframes, visual designs and prototypes. I was the Product Designer on the team and worked with a cross-functional team of product managers, developers, and other business functions.

The redesigned experience reduced the time taken to add a product to the cart by 28%. The number of collections browsed before adding a product to was reduced by 42%.

Hopscotch.in, a discovery-based online shopping platform, offers curated children’s merchandise to mothers in India. Hopscotch is not a traditional online store. Each day, 8-10 new curated collections are launched on the site. The collections feature children’s brands from India and around the world, some lasting for a limited duration.

For this project, I  explored how we could create a more personalized experience for our users and feature engaging content on the homepage. I redesigned the homepage of the Android app which included wireframing, visuals and prototyping.

The re-designed experience reduced the time taken to add a product to the cart by 28%. The number of collections browsed before adding a product to was reduced by 42%.

Research

The homepage of the Android app consisted of a list of collection tiles along with overarching navigation that directed the user to department pages—Baby, Girl, Boy, Home as well as the Recently Viewed page.

To understand the impact of business objectives on the homepage, I conducted interviews with colleagues from different functions in the company. Their insights helped me approach the problem from different angles.

Merchandising   The team helped me gain insights on the assortment of merchandise and how collections are curated based on gender, age range, and type of merchandise.

Marketing  |  From the team, I learned the halo effect our top brands had on the performance of other brands. For example, if we launched an international brand like NEXT UK, our own private label brands would see a significant surge in traffic and conversion. 

Data  |  The team shared how customers were arranged into cohorts based on the gender and age of the child that the user shopped for. They described how collections were sorted on the homepage for each cohort based on revenue and the depth of inventory. Data also indicated that users with more than one child often relied on Search. 

From the talking to the data team I understood that there was a need for a data-driven approach to how information was organized on the homepage. There were many collections listed on the homepage as we launched 8-10 new collections every day. This made me realize that users were not quickly finding what they wanted on the homepage.

homepage_old_mockup

Android homepage 1.0

Android homepage 1.0           

Strategy

With the learnings from my research, I designed a few features and the layout of how it would appear. I conducted multiple meetings with the design team and the product manager to showcase, discuss and prioritized the types of content that would appear on the homepage for the initial launch, namely:

Navigation filter  |  I proposed a Filter feature in the homepage navigation bar to help users access relevant content faster. The filter took into account the gender and age of the child being shopped for.

Departments  |  Featuring content dedicated to category pages—Baby, Girl, Boy, and Sale.

Collections  |  Collection tiles with interchangeable call-outs highlighting the price, country, and timer.

Grouped collections  |  A carousel of collections under a common theme—bestsellers, deals, and recently viewed.

Since we followed an agile process, I had small time frames for designing, testing and re-working different features. I quickly moved between wireframes, visual designs, and prototypes for each feature. This allowed me to frequently refine my design based on feedback from the product and development teams.

homepage_feature_prioritization

Prioritizing features

Prioritizing features

Design response

In addition to designing these features, I designed the homepage components in a modular fashion so that it would be unaffected by the sort order of the page. The sort order was needed to surface the highest revenue-generating collections, for each cohort,  to the top of the page. With my design proposal, each module could be stacked one on top of the other in any order.

My next step was discussing my proposals with the engineering team. Having conversations with the front end team helped me realize the need for reusable components so as to improve the performance of such a content-heavy homepage. I modified the design of the carousel components to be more universal and adaptable to any type of content. I provided all the variations to the development team so that they could create a base carousel design and then resize the content based on the image size received from the server.

In addition to designing these features, I designed the homepage components in a modular fashion so that it would be unaffected by the sort order of the page. The sort order was needed to surface the highest revenue generating collections, for each cohort,  to the top of the page. With my design proposal, each module could be stacked one on top of the other in any order.

My next step was discussing my proposals with the engineering team. Having conversations with the front end team helped me realize the need for reusable components so as to improve the performance of such a content-heavy homepage. I modified the design of the carousel components to be more universal and adaptable to any type of content. I provided all the variations to the development team so that they could create a base carousel design and then resize the content based on the image size received from the server.

Navigation filter  |  By default, the content on the homepage would be sorted based on user inputs from the onboarding flow.

A filtering feature as part of the top navigation would help users shopping for more than one child quickly find relevant collections. The filter would be expanded by default.

Once the user selects the name and age it would collapse into the navigation. In addition to this, I designed a nudge to inform the user about this feature on the second and third app launch.

Navigation filter ⋰ By default, the content on the homepage would be sorted based on user inputs from the onboarding flow.

A filtering feature as part of the top navigation would help users shopping for more than one child quickly find relevant collections. The filter would be expanded by default.

Once the user selects the name and age it would collapse into the navigation. In addition to this, I designed a nudge to inform the user about this feature on the second and third app launch.

Departments  |  I designed separate department tiles for displaying Baby, Girls and Boys stores based on user preference set in the top navigation filter. When the navigation filter is to "All", the department widget adapts to display all the stores in a stacked layout.

Departments ⋰ I designed separate department tiles for displaying Baby, Girls and Boys stores based on user preference set in the top navigation filter. When the navigation filter is to "All", the department widget adapts to display all the stores in a stacked layout.

homepage_department_widgets

Department widgets

Department widgets

Collections  |  The UI of the collection tile was redesigned to include call-outs for discounts, country of origin and a limited duration timer.

homepage_collection_tile

Collection tile

Collection tile

Grouped collections  |  Many collections on the homepage could be grouped based on themes. Grouping would help reduce the overall page scroll as well as allow the user to scan or skip a section quickly. The following grouped collections were designed to be flexible enough to be stacked or positioned anywhere in the feed depending on the user's frequency of use:

Grouped collections ⋰ Many collections on the homepage could be grouped based on themes. Grouping would help reduce the overall page scroll as well as allow the user to scan or skip a section quickly. The groups were as follows: 

◍  Anchor tenants  |  Bestselling collections and featured brands that cause a halo effect on the whole site. Displaying these collections would help draw new buyers, and also help surface new style updates for repeat buyers.

◍  Daily deals  |  Sale and promotion related collections.

◍  Thematic collections  |  Based on themes like Holidays, Disney, Back to School.

◍  Recently viewed collections and products  |  Users see a collection but may not purchase from it right away. As we launched 8-10 collections every day when users came to the homepage after an interval of 3-4 days, they couldn't find collections they viewed in previous visits. 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  |  Generate interest before the launch of the collection.

Anchor tenants ⋰ Bestselling collections and featured brands that cause a halo effect on the whole site. Displaying these collections 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 ⋰ Based on themes like Holidays, Disney, Back to School.

Recently viewed collections and products ⋰ Users see a collection but may not purchase from it right away. As we launched 8-10 collections every day when users came to the homepage after an interval of 3-4 days, they couldn't find collections they viewed in previous visits. 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 ⋰ Generate interest before the launch of the collection.

Anchor tenants ⋰ Bestselling collections and featured brands that cause a halo effect on the whole site. Displaying these collections 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 ⋰ Based on themes like Holidays, Disney, Back to School.

Recently viewed collections and products ⋰ Users see a collection but may not purchase from it right away. As we launched 8-10 collections every day when users came to the homepage after an interval of 3-4 days, they couldn't find collections they viewed in previous visits. 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 ⋰ Generate interest before the launch of the collection.

Anchor tenants ⋰ Bestselling collections and featured brands that cause a halo effect on the whole site. Displaying these collections 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 ⋰ Based on themes like Holidays, Disney, Back to School.

Recently viewed collections and products ⋰ Users see a collection but may not purchase from it right away. As we launched 8-10 collections every day when users came to the homepage after an interval of 3-4 days, they couldn't find collections they viewed in previous visits. 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 ⋰ Generate interest before the launch of the collection.

Here’s what the homepage looked like with all the components:

Full_page_1

Impact

Impact

The redesigned experience reduced the time taken to add a product to the cart by 28%.

The number of collections browsed before adding a product to cart was reduced by 42%.

The re-designed experience reduced the time taken to add a product to the cart by 28%.

The number of collections browsed before adding a product to cart was reduced by 42%.

The re-designed experience reduced the time taken to add a product to the cart by 28%.

The number of collections browsed before adding a product to cart was reduced by 42%.

More projects

Be(Spoke)Project type

Love at first launchProject type

Be our guestProject type

Distracted drivingProject type

© 2019 Dolcie Dass

© 2019 Dolcie Dass

Connect over Email or LinkedIn.       

© 2019 Dolcie Dass

Connect over Email or LinkedIn