back

Okamura

Global Website revamp
Okamura stands as a leader in the manufacture and supply of high-quality office furniture, store displays, and material handling systems.

Okamura

Global Website revamp
Okamura stands as a leader in the manufacture and supply of high-quality office furniture, store displays, and material handling systems.

Summary

Okamura launched the redesignbed website in over 20 countries. The website consisted of 10 templates and 45 components.

  • Okamura's Global solution team was very impressed with the array of design options available.

  • Templates helped them with ready made content structure to the global teams which they could customise based on their requirement

  • Optimized components by 75%+, templates by 80% by using Adobe AEM framework

  • Improved site metrics

    • Time on site increased by 22%

    • Bounce rate dropped by 36%

    • Pages per visit increased by 2%


1. The Challenge

Okamura is present in more than 50 countries worldwide. Different teams were in charge of maintaining the various websites, and their designs varied.

  • One Platform:

    Okamura wanted to introduce competitive features with customization and give users a consistent experience across all of their websites.


  • Easy Promotions:

    The product team desired a shared platform for product maintenance and promotions.


  • High-End Appeal:

    Okamura wanted their premium products to appear and feel like premium products.



2. My Approach

For Adobe AEM projects we followed a modified UCD process that included a UX audit to understand the website condition and a Design sprint to arrive at a Visual design theme.

  • UX audit to identify root causes, research competitors, and establish expectations

  • Use a 5 day design sprint to discuss and design a visual design aesthetic.

  • Considered 2 personas - Office Manager, Interior Designers

  • Create rough design concepts based on best practices and visual trends

  • Test usability in collaboration with product managers and users.

  • Obtain approvals for the global theme within a month of the launch.

  • Work on design in parallel with development in sprints. Design is two sprints ahead of development.

  • Batches of the phase go live, with the initial release in 20 countries.

  • Three months after the launch, keep an eye on the results.

3. Health Check (pre-work)

In order to find issues on different websites, we conducted a comprehensive UX audit and examined competitors.

  • Competition
    I examined the websites of Herman Miller, Knoll, and Steelcase for their design aesthetics and usability.

  • Traffic analytics (Oct 2021)
    Time on the site was 1.28 seconds, bounce rate was 55%, and pages per visit was 3.56. A general 10-20% improvement is expected over these numbers.


  • Expert Review

    After conducting a UX review of our website, we discovered an incoherent experience with over 200 components and 50 page templates. We aimed to Reduced it by 75%



4. Visual Concepts (pre-work)

To prepare for remote workshop we created 5 concepts based on Okamura's branding elements and competition

  • Concepts were responsive tar-getting home page

  • Focus was on Premium and cool themes with varying degrees of interactions

  • 2 of the concepts were considered base for the design sprint

5. Remote Design Sprint

I lead and facilitated the Remote design sprint between the Indian Adobe team and Japanese Okamura team. these were 5 half day remote workshops with a target to design a theme for Okamura's new website

  • Kicked off the Design sprint with HMW's to arrive at Sprint challenge

  • Post democratic voting and dicussions, we arrived at key challenges 

    • Multiple regional websites worldwide

    • Consistent look and feel

    • Competitive industry features

    • Better customer experience

    • Ease to author and scale

  • We took the ideas to a Crazy8 session for everyone to put different ideas on the table

  • Pre-Work design concepts were modified based on top ideas and 5 themes were presented

  • 2 themes got more votes and were marked for improvements and suggestions, Variations were created and debated

  • We also defined what "Premium" feels in the industry and guaged the concepts based on it.

  • D2 Concept was selected with improvements, Theme - More Premium and Enough cool.

  • 10-14 members participated in the workshop from Okamura's Sprint team during the 5 days

6. Final Design Theme

Day 5 of the design sprint, we arrive at a visual theme with soft approval from the sprint stakeholders and gloabal product team. Below were the design highlights

  • Flat & Minimalist UI
    Adopted a flat design language that prioritized content and met user and business needs. Reduced shadows and depth signals to reduce visual noise; used subtle interaction feedback to clarify (micro-interactions).


  • Effective Use of Negative Space
    A high-end, editorial style was achieved with lots of white space. Visual hierarchy made content skimming easier and reduced cognitive load. To make the layout more modern and open, added space between modules and photos.


  • Color Strategy for Products

    Added bright default colors to product categories for visibility. Pre-attentive qualities let interior designers make decisions quickly, especially when they work with many hues.


  • Contextual Cross-Selling
    Smart linkages between product and solution pages aid task-based navigation. Used persona-driven tagging to make content more relevant and products easier to find.


  • Mobile Navigation

    The bottom of the screen has icons for easier and more ergonomic mobile navigation to help find products.

7. Design System

A base design system was create with Adobe XD Components based on the approved design theme. It was used by designers and developers

  • Design Essence

  • Typography

  • Buttons

  • Input Fields

  • Spacing

  • Components

  • Interactions

8. Impact and Performance

Okamura's Global solution team was very impressed with the array of design tools available.

  • 10 Templates and 45 components helped them with ready made content structure to the global teams.

  • They could easily build and deploy pages. Component variations provided them additional freedom to make the pages distinct.

  • Limited aspect ratios helped the design team in limiting the type of assets

Improved metrics post 3 months

  • Optimized components by 75%+, templates by 80% by using Adobe AEM framework

  • Improved site metrics

    • Time on site increased by 22% , 1.28 seconds to 1.48 seconds

    • Bounce rate dropped by 36%, from 55% to 35%

    • Pages per visit increased by 2%, from 4.54 to 4.56


More projects with purpose

Digital library redesign

Ralph Lauren

The redesign of the digital library makes it easier to use, reduces task time by 50%,

and helps the account get more projects.

One of Google's top picks

QuillBot for chrome

QuillBot's chrome extension is named as one of Google's top extension in productivity category

Digital Library redesign improves usability, reduces task time by 50% and gets Adobe phase 2 of the project

Digital Library redesign improves usability, reduces task time by 50% and gets Adobe phase 2 of the project

Widget and Assistant

QuillBot

Strategic redesign of our Chrome widget—transforming it from a passive icon into a proactive, AI-driven writing assistant.

Digital Library redesign improves usability, reduces task time by 50% and gets Adobe phase 2 of the project

Digital Library redesign improves usability, reduces task time by 50% and gets Adobe phase 2 of the project