UX/UI: OneCoast Monthly Edit Landing Pages

Project Summary & Goal
With the growing need to expand our trend-based, cross-selling initiatives, OneCoast implemented a "Monthly Edit" highlighting the strongest trends for the month. The goal was to create a “beefed up” landing page experience using showroom photography and video, while also utilizing the product SKUs.

Obstacles
One hurdle with this experience was that we had no help from the development team. We had to use what already existed on our platform with no new features or ability to improve the interactivity of the page. Content and visual design along with testing which flow and layout worked the best was the extent of the resources we were able to put toward the project. This also meant designing something that was not mobile responsive but needed to be visually mobile friendly as the site at the time only sized down the images to mobile.

Research
Competitor research is difficult with OneCoast. There aren’t a lot of similar businesses, let alone getting access to B2B campaigns without needing access as a retailer. I ended up looking into B2C examples of visually appealing landing pages with similar goals. These campaigns were a mix between a lookbook, shopping experience and blog post. Ultimately I combined inspiration from multiple examples to fit the requirements of the project.

The key customer base of OneCoast is retailers shopping wholesale for their storefronts. The content for these campaigns and landing pages was largely to inspire their store displays, provide some expertise in the area from our internal team, and curate products reflecting the specific trend or display idea of the month.

Sketches & Wireframes
I started my process by exploring different layouts on paper. Knowing these would be flexible and likely change from month to month I saved these ideas for future layouts. Ultimately, we ended up pulling different elements from the longer versions of the layouts/wireframes due to limited photography.

Visual Design
The intention of these Monthly Edits was to highlight specific trends throughout each season to create a curated experience for our customers and prospects. We wanted to infuse more information and content within the page than a normal product page. Fusing together a landing page and product page allowed the shopper to get a handle on the trend and shop from our recommendations right from the page vs. having to sift through our thousands of products to find the right combination for a display. Multiple layouts were tested during our soft launch period to see which layout yielded the highest return and engagement.

Usability Findings
Using Hotjar I was able to review screen recordings and heat maps for the individual Monthly Edit pages.

  • Finding
    Based on a sample of users it showed that 87% were making it 3/4 of the way down the page, which was great since we placed the product SKUs a bit farther down. 50% were making it all the way to the bottom.

    Conclusions
    An initial concern with the layout of the landing page was that users wouldn't scroll down to the shoppable section or know that they can shop right on the page. Knowing that 87% of users made it at least to the top section of SKUs confirmed that we likely wouldn’t have to move sections around. Will be A/B testing this further as the campaigns are created.

  • Finding
    One issue that was recognized from the recordings is that no one was mousing over the interactive javascript that the images had on them. Meaning they weren't able to see the product name overlay or identify that they were able to click through to that individual product.

    Conclusions
    We don't need to spend our efforts on javascript and/or we need to make it more obvious that they can click through those images to shop with a CTA. Another option: remove javascript efforts and put a simple "Shop Now" CTA under or on the image. Test them against each other.

  • Finding
    Recordings also showed that a majority of users were pausing on the content to read. A main goal of this initiative was to create a resource for retailers to get basic tips on putting together displays for their store in addition to shopping those items, so this was a positive finding in that regard. In addition, through Google Analytics we found that our users were staying on these pages for extended periods of time, further reinforcing that they were likely reading and absorbing the content.

    Conclusions
    A lot of scrolling and pausing happened but not a whole lot of clicking and exploring further. Re-evaluate the goal of the campaigns: to inform, or to convert? Our conversions on these campaigns were not much higher or fairly average compared to our usual campaigns. Posing the question of time and effort spent on these for the same outcome we normally saw.

Previous
Previous

Carly DSP UI