Summary
Okamura launched the redesigned 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 for the global teams, which they could customize based on their requirements.
The existing system had 200+ components & 50 odd templates. We reduced components to 45 and templates to 10 by efficient design on Adobe AEM.
Improved site metrics on main website - Okamura.com (post 3 months data)
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.
Difficulty in Maintaining
The existing system had 200+ components & 50 odd templates. It was difficult to maintain for Branding and marketing teams
Easy Promotions:
The product team desired a shared platform for product maintenance and promotions.
High-End Appeal:
Okamura has premium products and wanted the website to reflect the same brand perception.
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. UX Health Check
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, targeting home page
The 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 led and facilitated the remote design sprint between the Indian Adobe team and the 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 the sprint challenge
Post democratic voting and discussions, 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 Crazy 8 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 like in the industry and gauged the concepts based on it.
D2 Concept was selected with improvements, with the theme "More Premium and Enough Cool."
10-14 members participated in the workshop from Okamura's Sprint team during the 5 days
6. 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. Design in Sprints
Post-design sprint we had a soft approval for "Premium & Cool" design theme
During week 2, we got approval from the global teams, addressing any outliers
We also split the visual theme into 15 components and 3 templates.
Over the next 6 weeks, we would create further 30- components & 7 templates in a weekly design sprint format
Dev started in Week 3 post Sprint kickoff
All design was wrapped up in 10 weeks, and entire website was developed in 5 months
9. 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 for 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
10. Learnings
We successfully implemented lot of learnings from other projects in this
UX Health check—understanding the usability issues
Design concepts—5 visual concepts to aid the remote nature of the task
Flexible sprint—Adapting amidst the design sprint for better outcomes
Design to run 2 sprints ahead of Dev, instead of 1
Breaking design components into sprints
Involving Dev early for feasibility regarding certain iframe components
1st successful remote 5-day design sprint at ACS. The Okamura client was very pleased with the outcome. The project had a smooth execution.
Being flexible and adaptable is the key to being successful. Mid-sprint we defined parameters for luxury, premium, and cool. That helped us finalizing the theme
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.
