Case Study

Innovating Photography eCommerce:
OM Systems’ Website Redesign

Conversion-optimized product pages

Enhanced product customization experience

Streamlined upsell journey

Promotions and offers visibility

Project introduction

ABOUT THE CLIENT

OM Digital Solutions Corporation, a Japanese leader in opto-digital products, delivers advanced solutions for business and consumers. Since acquiring Olympus’s camera, audio, and binocular divisions in 2021, it continues to offer high-quality cameras, lenses, optical equipment, and accessories.

PROJECT GOALS

The OM Digital Solutions project aimed to enhance user experience and strengthen brand identity through a comprehensive website redesign. This involved a phased update of key templates, improved content organization, and mobile optimization. Additionally, the integration of Sanity CMS replaced the existing Page Builder, ensuring a more seamless, modern, and user-centric experience that aligns with OM Digital’s innovative brand values.

Redesign the cart page and optimize the upsell journey for improved conversions

Create a redesigned layout for bundle products to simplify customization and purchasing

Conduct extensive design work on key landing pages to improve usability and engagement

Completely revamp the product details page to deliver a more informative and conversion-driven UX

Approach

STEP 1

ux expert review

The OM Digital Solutions team provided us with an extensive list of requirements, which we carefully reviewed and incorporated into the project. Additionally, we conducted a UX expert review to identify key friction points and provided suggestions to optimize and enhance page layouts, leveraging eCommerce best practices for an improved user experience.

STEP 1

UX expert review

STEP 2

ux workshop

For OM Digital Solutions project, multiple workshops were necessary to review all pages and establish the approximate layout for each. This approach ensured that the client’s detailed requirements were fully considered while integrating UX best practices and design principles.

STEP 2

UX WORKSHOP

STEP 3

WIREFRAMING PHASE

After finalizing the functional blocks and agreeing on the overall approach, we proceeded to create high-fidelity wireframes for each page. These wireframes were designed to cater to both desktop and mobile formats, ensuring consistency and usability across different devices.

The main navigation is strategically structured into "Shop" and "Explore" sections to cater to different user groups—those ready to make a purchase and those still in the exploration phase.

Slider indicator to set expectations on how many banners are there in total

Full width image or video with controllable sound

See 2 more improvements

See less

A sticky filter button expands the full list when clicked, keeping filters hidden by default to maximize space for larger product pods.

Main focus - the product image. Maximizing the space for visuals.

Subcategories as quick filters for quick and easy navigation

See 2 more improvements

See less

A quick link to view the full box contents was added in response to user requests and to address a previous friction point.

Alternative options, such as "Save to Wishlist" and "Add to Compare List," provide users with flexibility and convenience in their shopping journey.

Providing delivery information sets the right expectations and eliminates friction for users, instilling a sense of confidence to make a purchase decision.

Reminding users of the store's unique selling points helps building trust and credibility.

The camera kit selection has been implemented as a slide-out to optimize space on the product detail page and enhance usability.

See 4 more improvements

See less

STEP 3

WIREFRAMING PHASE

Once the functional components were finalized and the general strategy was agreed upon, we moved forward with crafting detailed high-fidelity wireframes for each page. These wireframes were tailored for both desktop and mobile layouts, guaranteeing uniformity and user-friendliness across various devices.

STEP 3

WIREFRAMING PHASE

STEP 4

STYLE & DESIGNS

When creating designs, our design team adhered to the existing style guide. While the base template provided a foundation, there was still room for creativity in designing new elements that hadn't existed before, allowing us to introduce a fresh and innovative touch.

STEP 4

STYLE & DESIGNS

HOMEPAGE REDESIGN

The general conclusion about the previous OM Systems homepage was that it lacked a strong product presence, and the content organization could be significantly improved to make the page feel less excessively long and overwhelming.

Moreover, the homepage carries the critical responsibility of conveying the brand message effectively, making it essential to strike a balance between showcasing products and communicating the brand's identity and values in a clear and impactful way.

Clearly communicate brand's value proposition

To achieve genuine interest and encourage further exploration of the product catalog, we aimed to highlight OM Digital Solutions' unique strengths, such as its extensive experience and the high quality of its products within the homepage content. This clear value proposition was strategically presented in the design, setting the brand apart from competitors and providing visitors with compelling reasons to engage.

Leverage social proof

The photography industry is inherently visual, and OM Digital Solutions' target audience consists of individuals who value high-quality imagery. Moreover, these users are typically interested in exploring the end results—photos captured using OM Systems cameras and lenses. Therefore, incorporating a user-generated gallery collage, along with testimonials from OM Systems' product ambassadors and links to their portfolios, serves as powerful social proof. This not only boosts the brand's credibility but also increases user interest and engagement with the website.

Mobile

Desktop

Allow thematic and guided browsing

One of the key friction points for users unfamiliar with OM Systems' products was their difficulty in identifying which products would be most relevant to their interests. The extensive product range could seem overwhelming, leaving potential customers unsure of where to begin. To address this, we introduced thematic and guided browsing options—such as exploring photography by type (macro, birds, landscape, etc.), browsing by product category, and discovering best offers and sales. These features provide clear pathways, helping users navigate the site more effectively and encouraging them to move further down the purchase funnel.

CHECK THE RESULT FOR YOURSELF!

Before

After

Custom MARKETING landing pages

The CRO95 team not only concentrated on redesigning core templates such as the homepage, category pages, product details, and shopping cart, but also focused on improving the UX/UI of several landing pages.

These included pages promoting various camera and lens types, as well as dedicated pages for different photography styles like macro, landscape, birds, and wildlife.

Perfect the first fold

Here are the key steps we applied to ensure a strong first impression in the first fold of OM Systems' marketing landing pages:
‍
1. Clearly communicate the value provided (title & subtitle)
2. Help users visualize it (image)
3. Make the next step easy (CTA)

Highlight the key features

OM Systems' products are packed with great features, but the previous landing pages tried to include all content on a single page, making them overly long and content-heavy. The CRO95 team proposed focusing on the most important and significant features that users need to make informed buying decisions. By prioritizing these key points, we avoided overwhelming the user with excessive, less relevant details.

Display products

Previously, these landing pages were mostly informational, lacking a clear path to relevant products. During the redesign, we ensured that users were presented with products and provided a seamless transition from "just browsing" to "ready-to-purchase" customers.

Mobile

Desktop

Bring in social proof

As mentioned earlier, our target audience consists of highly visual individuals who appreciate stunning imagery and are eager to explore photos shared by fellow photography enthusiasts and professionals. Therefore, we strategically placed links to the OM Systems community gallery and relevant YouTube videos on these pages to engage users further.

Offer further education and support options

OM Systems offers great virtual events that resonate with the photography enthusiast audience, making it a natural choice to include a block promoting these events. Additionally, links to further education and support resources are strategically placed at the bottom of these landing pages to provide users with easy access to valuable information.

product detail page REDESIGN

OM Systems' main products are cameras and lenses, which serve as the flagship offerings of their eCommerce store.

As such, these products require more detailed product pages, which are essentially split into two: the marketing product page and the transactional product page.

Marketing product page

The primary objective of the marketing product page is to deliver a comprehensive description of the product in a non-traditional product detail page layout, while simultaneously ensuring a clear and intuitive path to purchase. Not all products have marketing product page, it is applied to the key OM Systems product categories such as cameras and lenses.

Transactional product page

The transactional product page is where the actual purchase takes place. Users can select product variations, such as camera color or kit type, add a warranty option, and ultimately complete their purchase by adding the product to the cart.

Mobile

Desktop

CHECK THE RESULT FOR YOURSELF!

First fold

Before

After

Upsells and bundle builder SOLUTIONS

The OM System project was unique in that it presented us with multiple requests regarding promotions, upsells, and bundle integration.

Each market (Europe, Americas, Asia, etc.) had its own promotion management style and types of offers. CRO95 carefully studied OM System’s requirements and developed numerous creative, conversion-driven solutions.

Camera bundle builder

The client required a design solution for scenarios where a camera kit could be offered together with up to five additional accessories at a discounted price. The newly implemented bundle builder provides a comprehensive overview of the main product while allowing users to explore and select from 1 to 5 compatible accessories. Additionally, it enables users to easily check the total price improvement when purchasing the items together, ensuring a clear and compelling value proposition.

Upsells in mini-cart

An upsell section is integrated within the “added-to-cart” notification to showcase special bundle offers when certain products are purchased together. This feature enhances user awareness of potential savings and complementary items, providing a seamless shopping experience at a crucial decision-making moment.

Compatible products

A regular compatible product slider has been added to the product details pages, enhancing the user experience by offering relevant accessory recommendations in a visually accessible and intuitive format. This helps users easily discover complementary products without additional effort, improving their shopping journey and increasing the likelihood of informed purchase decisions.

Mobile

Desktop

REDESIGN SUMMARY

Improved global elements

Enhanced global elements on the new OM Digital Solutions website simplify navigation and improve content access for a broader international user base.

Two-step product detail page

We've separated key OM Systems product details into a descriptive "marketing page" before the purchase-focused "transactional page."

Simplified shopping with bundles

The new bundle builder and accessory recommendations streamline the shopping experience, clearly showcasing savings and facilitating the discovery of compatible products for users.

Custom landing pages

We created focused landing pages for specific OM Systems cameras and lenses, highlighting key features and providing clear paths to purchase, improving the user experience for product exploration.

Improved product lists & filters

By implementing country-specific product pods and intuitive filtering options on Product Listing Pages, we tailored the browsing experience to regional preferences and simplified product discovery for users worldwide.

Updated shopping experience

The updated cart and minicart show all product information, suggest related items, and estimate shipping/tax upfront for faster checkout.