Storefront Layouts & Design Application

Store creators on OMG's platform can now create modern, engaging storefronts more effectively. Using the new store designer, they select a starting template and design stunning promotional banners and category ads to deliver the best shopping experience for their clients.

Project Overview

Holding Market Share with New Storefront Layouts

OrderMyGear, an industry-leading e-commerce platform, helps businesses create custom online stores for branded merchandise sales. While traditionally focused on pop-up stores, the company's expansion into permanent promotional stores highlighted the limitations of their existing storefront design. To maintain their competitive edge and improve user engagement, OMG initiated a complete redesign of their storefront system with a focus on creating a premium shopping experience.

Discovery

What are they doing?

To address limitations in the legacy store design application, we conducted a comprehensive analysis of modern design tools and competitors' platforms. This research spanned from basic page builders to full-featured website platforms, including direct competitors in the promotional product space. Our goal was to understand industry standards and user needs to develop solutions specifically tailored for our clients.

Observe, Interview and Test

Due limited access and time with OMG clients (primary users), we combined several methodologies into our sessions to get the most insight and understanding with the time given.

The sessions involved having the participants through workflows while we observed and recorded actions, followed by interview questions about their process and needs. Following up with interviews, allowed us to ask questions while the participants were still in the context of store building, allowing for deeper insight into workflows and challenges.

Sessions concluded with A/B testing of various e-commerce storefronts, from Shopify layouts to major retailers like Target and Walmart, allowing participants to visually identify their desired functionality and design elements rather than describing them verbally.

Understanding Store Building and Users

Given OrderMyGear's fast-paced culture and the one-year project timeline, we needed to optimize our discovery process within a limited research window. Due to nationwide COVID protocols at the time, all client research had to be conducted virtually. Additionally, the B2B2C nature of our service meant we had restricted access to both end users (our clients' customers) and the clients themselves.

To overcome these challenges and gain meaningful insights, we focused on several key methodologies:

Findings

Storefronts

Promotion Banners - Inability to inform the customer of order due-by dates, when orders ship
Storefronts - outdated design lacked trustworthiness
Promotion Banners - High bounce rates. Customers came and went. Clients hacked the hero section of the site to create a promotion space to entice customers to visit sales and other items.

Storefront Designing

Banner building complex - Requires 3rd party apps (photoshop) - Time to build all of this? - It’s not easy.
Hacking sections and headers to promote products and specials or inform customers of store information (open/close, order dates, shipping, etc)
Relied on 3rd party software to create some elements, this required someone with knowledge to use the software to create them.

Defined Problems

Legacy Platform Not up to Task

In order to make the storefront service capable of market needs, it required updates on both fronts, front and back:

Storefronts

OMG storefronts originally designed for temporary stores with limited product were severely outdated visually and didn’t reflect the status of OMG in the market. Further, they lacked a modern shopping experience to promote sales and products and create conversion.

Legacy Storefront Example

Storefront Design

The store “Branding” application lacked modern interactions to build and customize the storefronts. Little to no visual design features to create promotional and information banners, leaving clients to create these with 3rd party tools.

Legacy Design Tool ("Branding")

Ideation

Putting it Together

We started with hand-drawn sketches created during and after meetings to rapidly capture concepts, ideas, and questions. As the user stories took shape, we explored decisoin maps and workflows to identify key interactions and task processes in the legacy app, as well as possible new solutions.

Wireframing

Design

Storefront Layout

Storefront Designer App

Outcome

Storefront Layouts & Designer Application

Select A Layout

Once a store has been established with information and products, simply open the storefront designer and select a template to begin editing.

Preview The Layout

Explore the layout. Make sure it's perfect for your target customer base. Preview the layout at several breakpoints: desktop, tablet, and mobile.

Edit Your Layout Template

Each layout is customizable to create the perfect shopping experience for every client's need.

Customize Page Sections

Each section and component for the storefront had dedicated controls to easily and quickly make changes - all in a single application.

Don't Forget Mobile

The storefront designer offers the ability to Preview and Design at all several breakpoints to ensure the best possible experience on multiple devices.