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.
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.
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.
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.
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.
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
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.
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.