homepagehomepage

Keep Web Homepage

Keep's homepage had remained virtually unchanged for several years. While it served its purpose in the beginning, it was unable to grow with the platform as it expanded. I redesigned (and contributed to the front-end development of) the homepage and provided a better strategy for its usage.

Being a start-up means big changes are often accomplished iteratively rather than all at once. We were able to accomplish small, incremental improvements – tracking analytics to evaluate their success – as we waited for resources to free up for a larger update.
 

product gridproduct grid

The starting point

Keep's original homepage was essentially this: a navigation bar with a button to log in and a list of curated "collections" above an infinite-scroll Masonry grid of product imagery. Once clicked, those product images opened up a modal with relevant details (price, retailer, description) and buttons to Like, Buy, and Keep (save the product in your account to access later) the item. On desktop computers, hovering over product images on the homepage made visible both the item name and price and the three action buttons at a glance. The product selection on the homepage was dynamic and ever-changing; an algorithm determined which products were more "trendy" based on factors such as number of user-interactions, retailer popularity and newness to the platform. The trendiest products at any given moment would rise to the surface and a new batch would appear every refresh of the page.

This layout mimicked the original purpose of the site: allow users to shop trending products visually and enable them to save and curate their own collections of personal picks.
 


As the platform grew, it became clear that users were interested in collections of products curated by the Keep editorial team in addition to the trending feed. These collections, called "Style Channels," allowed easier access to more categorized and seasonal products, such as Fall Fashion, Kids, Wedding, and Gifts. In addition to Style Channels, Keep also ran a blog that hosted articles about fashion, beauty, home decor, gifts and sales that included shoppable products. Context and curation around products became an important part of the Keep ecosystem.

At the same time, Keep introduced an advertising program for retailers to promote new collections or sales. There became a need for spaces in highly-trafficked areas of the site to place native advertising (ads that mesh with the natural flow and experience of the platform). 

Keep's user base also demanded better accessibility across devices. iOS and Android apps were built, but the majority of users relied on the mobile site, which was clunky and aging at this point. 
 

An example of Keep's crazy nav bar c. 2016


While investigating possible solutions, we learned that interfering with the existing product grid in any way was a practical impossibility. Due to its construction, it could not be edited or added to unless it was entirely re-written. In order to surface more content (curated collections, blog articles and advertising) on the homepage, we had to steer clear of the grid. With advertising contracts beginning to roll in, a carousel was quickly introduced. This created a space for the editorial team to feature timely blog content and advertisers to reach a large portion of our audience. However, carousels are generally disliked by users and allowing advertisers to occupy such a hefty space on the homepage was a detriment to Keep's brand image.

It was still evident that users liked to shop curated collections and there was nowhere to go but up. The navigation bar began to be abused, becoming a lengthy hodgepodge of collections and other pages of content.

 

Out with the old…

It was clear that both the homepage and navigation needed overhauling. The site's infinite scroll was frustrating to users. The lack of footer created accessibility problems and was damaging to SEO. On mobile web, the navigation sidebar menu was difficult to use – the list of tabs too long to scroll naturally on a smaller device and too small to accurately tap.

We introduced a new navigation system finally optimized for mobile web. The tab bar is only visible on desktop and tablet where links are more accessible. On mobile, they are hidden in favor of collapsing all navigation elements into sidebar [hamburger] menu. Most importantly, we said goodbye to a long list of inconsistent curated collections and pages. Instead, we implemented a more organized curation system (more about this coming soon) that allowed us to categorize curated collections clearly and efficiently for the user.
 

Old and new navigation sidebar menus on mobile


Finally, we removed infinite scroll and built a footer. Now, the homepage would load a predetermined amount of products in the grid (tested to find the goldilocks number!) with a "load more" button below them. If users wanted to continue browsing the product grid, they could press the button and launch infinite scroll once again. This retained the endless discovery mode most users love while allowing for a secondary method of navigation via the footer. The footer also allowed us to remove low-trafficked links (About, Privacy Policy, Advertising) from the primary navigation bar and provide an area for users to subscribe to the newsletter.
 

Site footer, desktop and mobile c. 2017

contentcontent

The content problem

While the website was finally up to par from a UX standpoint, integrating editorial and advertising content better remained a challenge.

The editorial team was posting great articles consistently, but they weren't receiving the audience volume we would have liked (unless they were promoted via social media or push notifications). The goal to increase views to editorial content was made important for three reasons: (1) when users did read articles, they enjoyed them; (2) writing our own content about the products we curated served to strengthen our brand credibility; (3) advertisers began purchasing sponsored blog posts and were looking for increased engagement.
 

It was time for a better solution than the carousel. Since our curated curations were representing a significant amount of traffic, I proposed a design that would marry the existing product grid with various dynamically-managed elements. It would allow us to feature popular or seasonally relevant collections, share a stream of recent blog posts, introduce brand messaging and create a space for advertisers that did not detract from the page content or user experience.

The layout would be made up of reusable modules – templated elements that can be filled with forms of our content (collections or blog posts). These modules would be able to be edited, moved, added and scheduled through a CMS as needed by the editorial team. Those closest to the production of content and curation would be able to manage the process without tasking the development team. The design would allow users to access the curated collections easily while providing context with multiple content areas for blog posts or seasonal pages. Finally, the homepage would be dynamic and adaptable, showcasing the content that users previously had to dig for. 

 

Although designs and prototypes were created, the project never came to fruition.

The holiday season is the most important part of the year for e-commerce businesses. Q4 was fast approaching and the development team hit a speed bump when another tech priority appeared. They would be unable to finish building the new homepage in time for the official launch of that year's holiday campaign.

While it's a busy time of year for e-commerce, we also know how jam-packed it is for our users as well: shopping for unique and meaningful gifts for family members, friends and/or the coworker they picked for Secret Santa; searching for the perfect holiday and New Year's Eve dresses, shoes and bags; decorating their homes for 1 or 2 or 3 gatherings. I felt strongly that the new design would provide a better experience for our shoppers and that it was the most impactful time to implement it.

 

I suggested a compromise with the development team. I would simplify the design to something I could build myself using HTML/LESS that would require minimal dev help. We were able to create a static layout and use a basic YAML file to schedule various content areas each day. I could input images, collections, products and blog posts (using unique IDs already existing in the system's database) and assign dates to launch on site. It would require code deploys (that thankfully, I could do), but the editorial and sales team would be able to produce and promote a magnitude of content and advertising for the homepage.

This provided users with a ton of ways to shop for gifts, fashion, beauty and home decor. It also allowed us to share new initiatives we had developed for the season: (1) a humorous quiz for shoppers to find the most relevant and covetable gift for their recipient based on personality, and (2) a long-form blog series about the struggles of holiday shopping.
 

Homepage desktop and mobile, holiday 2017

The homepage, although not our intended design, worked incredibly well and saw increased engagement during the holiday season. When resources became available, we were able to make a larger improvement.

 

heroimageheroimage

Total overhaul

The following year our team was able to carve out time for a true overhaul of the homepage tech and design. Using the updated design as a testing space, I identified what worked and what didn't:

  • Users liked the increased presence of shopping-related editorial content, but felt the page was too cluttered with competing CTAs
  • Advertisers liked the brand exposure of placements that felt more native to the site
  • Email subscribers increased with a more prominent sign up area, but users who were already subscribed felt its presence annoying
  • Advertisers and users felt the Keep brand image was still disjointed and the mixture of imagery on the homepage was unhelpful
  • Users still liked the ever-changing product grid, although it wasn't optimized for mobile
  • The algorithm controlling the product grid could not be improved enough, allowing poor quality and off-brand products onto the homepage at times

 

 

 

We also took learnings from other platforms. For example, the strongest driver of traffic to retailers were our daily marketing emails. Every day, subscribers received a selection of 24 products in their inbox, occasionally related to a theme. The small collection had a large impact. Users found the products selected by our editors more interesting than those surfaced by the "Trending" algorithm.

Our goals for the new design:

  • Build a stronger brand image (read more about this here)

  • Modernize the design and create a richer feel

  • Improve existing UX issues

  • Capitalize on success of email program

The strategies I would employ:

  • Develop a photography program to connect with editorial campaigns, allowing us to create and use our own imagery across platforms
  • Define the brand's visual language through a more fearless use of photography and copy
  • Introduce a new typeface to better represent the brand personality
  • Remove algorithm's "Trending" grid and implement "The Daily Obsession," a new selection of 24 products each day curated by the editorial team
  • Rebuild the way products are displayed on site, allowing better optimization for mobile and tablet devices
  • Simplify functions and CTAs on the page and create a more natural flow for browsing

 

Homepage desktop, c. 2018

The new design features a large area for a hero image at the very top of the page. Users are greeted with photography and clever copy announcing the current seasonal or editorial campaign. Below that is a new unit we developed called "Current Faves." This showcases the top 3 products our team is coveting that day. Advertisers can also buy product placements inside this unit. Following that is another large imagery space that can be used to feature that day's most relevant editorial content, such as blog posts, sweepstakes, quizzes or gift guides. Next, the product grid reappears as "The Daily Obsession." We also introdued a guest curator program where notable stylists, influencers, designers and fashionistas curate the day's collection. Finally, there are two secondary editorial content areas.

 

Actual screenshots of live homepage versions, desktop

 

We received great feedback on the new design. Users were browsing more efficiently on both mobile and desktop devices – perusing editorial content and "The Daily Obsession" on the homepage and then navigating to more specific curated collections to continue shopping. Luxury brand advertisers who previously felt the site looked too amateurish were now interested in joining the platform.

 

Homepage mobile, c. 2018