Wood&Washi — functional systems for modern interiors.
Implementing Wood & Washi systems is one way to organize space.
Suitable for standard and non-standard windows, room layout
Wood&Washi — functional systems for modern interiors.
Implementing Wood & Washi systems is one way to organize space.
Suitable for standard and non-standard windows, room layout
Sofiia Slavskaia • 2021
Sofiia Slavskaia • 2021
Sofiia Slavskaia • 2021
The company approached me for a redesign of the configurator web service.
With the configurator, the company's managers can personalize the system
parameters for the buyer and create a commercial offer for further cooperation.
The company approached me for a redesign of the configurator web service.
With the configurator, the company's managers can personalize the system parameters for the buyer and create a commercial offer for further cooperation.
The company approached me for a redesign of the configurator web service.
With the configurator, the company's managers can personalize the system parameters for the buyer and create a commercial offer for further cooperation.
Key Issues
For the legacy interface of this product, a comprehensive product research initiative was undertaken, encompassing a detailed UX/UI audit, in-depth usability analysis of key interactive components, a thorough performance evaluation, workflow analysis, and an assessment of system scalability.
For the legacy interface of this product, a comprehensive product research initiative was undertaken, encompassing a detailed UX/UI audit, in-depth usability analysis of key interactive components, a thorough performance evaluation, workflow analysis, and an assessment of system scalability.
Performance
Performance
Prolonged loading times
Prolonged loading times
Limitations on concurrent user access
Limitations on concurrent user access
No obvious customization algorithm
No obvious customization algorithm
Settings which reset the context
Settings which reset the context
General Interface
General Interface
Overloaded and non-intuitive interface
Overloaded and non-intuitive interface
Filters exceed screen limits, poor visual hierarchy
Filters exceed screen limits, poor visual hierarchy
Typographic issues, illogical element placement, and poor separation in the cart
Typographic issues, illogical element placement, and poor separation in the cart
Low color contrast
Low color contrast
Operational Mechanics
Operational Mechanics
Content actualization required
Content actualization required
Configuration modifications restricted to managers
Configuration modifications restricted to managers
Scalability
Scalability
Constructor unsuitable for distributors/clients
Constructor unsuitable for distributors/clients
Process
UI audit • finding and prioritizing business needs • finding and prioritizing user needs
identifying problems with the current interface • in-depth interviews with business owner and users
task decomposition and prioritization • documentation • planning and facilitating meetings
scenario mapping • presentation of work on the stags
UI audit • finding and prioritizing business needs • finding and prioritizing user needs • identifying problems with the current interface • in-depth interviews with business owner and users • task decomposition and prioritization • documentation • planning and facilitating meetings • scenario mapping • presentation of work on the stags
UI audit • finding and prioritizing business needs • finding and prioritizing user needs • identifying problems with the current interface • in-depth interviews with business owner and users • task decomposition and prioritization • documentation • planning and facilitating meetings • scenario mapping • presentation of work on the stags
Delivery
The project was divided into phases, each of which was accompanied
by documentation, progress reports, and an approval process.
The project was divided into phases, each of which was accompanied
by documentation, progress reports, and an approval process.
Service Architecture
Service Architecture
Designed the new information architecture and user flow structure. Defined navigation logic, screen hierarchy and interaction patterns across all configuration scenarios. Decoupled the 3D model load from the core configuration flow to make the tool immediately usable.
Designed the new information architecture and user flow structure. Defined navigation logic, screen hierarchy and interaction patterns across all configuration scenarios. Decoupled the 3D model load from the core configuration flow to make the tool immediately usable.
Prototyping
Prototyping
Low-fidelity wireframes for all primary and secondary user scenarios. Validation of interaction flows with the team and business owner. Iterated on edge cases and error states. Presented intermediate results at each stage for alignment.
Low-fidelity wireframes for all primary and secondary user scenarios. Validation of interaction flows with the team and business owner. Iterated on edge cases and error states. Presented intermediate results at each stage for alignment.
Basic scenario mockups
Basic scenario mockups
High-fidelity mockups for all configuration scenarios — product selection, parameter setting, cart, commercial proposal export. Admin panel for user management, pricing coefficients and currency rates. Full component library and handoff documentation for development.
High-fidelity mockups for all configuration scenarios — product selection, parameter setting, cart, commercial proposal export. Admin panel for user management, pricing coefficients and currency rates. Full component library and handoff documentation for development.
Key decision
Research showed that managers configure products without the 3D visualisation — it is only needed when presenting to‑a client. Loading automatically was blocking the‑entire interface for 15–30 minutes per‑session.
Research showed that managers configure products without the 3D visualisation — it is only needed when presenting to‑a client. Loading automatically was blocking the‑entire interface for 15–30 minutes per‑session.
Before
Before
3D model loads automatically on open → entire interface blocked for 15–30 min → manager doesn't know how long the download will take → managers cannot work
3D model loads automatically on open → entire interface blocked for 15–30 min → manager doesn't know how long the download will take → managers cannot work
After
After
Configurator opens instantly → manager configures the product → loads 3D model on demand when needed for client presentation → loader to indicate loading speed
Configurator opens instantly → manager configures the product → loads 3D model on demand when needed for client presentation → loader to indicate loading speed
Interactive mockup
This is a demo prototype; functionality is limited.
No mockup in mobile version
Go to Figma
Go to Figma
Results
Goal: To develop a quote for a client
Goal: To develop a quote for a client
Category
Metric
Metric
Before
After
Impact
Impact
Performance
Page Load Time
Page Load Time
8.4s
3.9s
↓ 53.6%
↓ 53.6%
Performance
Time to Interactive (TTI)
Time to Interactive (TTI)
17.2s
2.7s
↓ 84.3%
↓ 84.3%
Performance
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP)
24.6s
3.2s
↓ 87.0%
↓ 87.0%
User Experience
Task Success Rate
Task Success Rate
13%
75%
↑ 476.9%
↑ 476.9%
User Experience
Time on Task
Time on Task
35 min
10 min
↓ 71.4%
↓ 71.4%
User Experience
Navigation Error Rate
Navigation Error Rate
58%
10%
↓ 82.8%
↓ 82.8%
Product
Configuration Completion Rate
Configuration Completion Rate
58%
81%
↑ 39.7%
↑ 39.7%
Product
3D Configurator Engagement Rate
3D Configurator Engagement Rate
41%
93%
↑ 126.8%
↑ 126.8%
Business
Quote Request Conversion Rate
Quote Request Conversion Rate
12%
82%
↑ 583.3%
↑ 583.3%
Business
Support Request Rate
Support Request Rate
100%
35%
↓ 65.0%
↓ 65.0%