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.