LuXout Shades
Information Architecture of a visualizer feature for custom shades and blinds company's website.
OVERVIEW
LuXout is a To-The-Trade company that creates very stylish custom shades and blinds.
PROBLEM
LuXout offers a vast variety of fabrics and shades, but it's hard for a user to select the right options without visualizing them in a room and seeing if they match the wall color.
GOAL
Add a visualizer feature to the website, so that users are able to select a shade, along with custom options, and preview how it looks on in different rooms. The user will be able to change the wall color in the rooms as well.
SOLUTION
Our team designed and developed the new website with the visualizer feature, where users can build their own shade and preview it in real-time on the website.
ROLE
My goal was to create detailed sets of information architecture for all seven types of shades that the company offers:
1. LuXshade;
2. LuXshade Dual;
3. LuXshade Coupled;
4. Designer Roller;
5. Double Roller;
6. Slimline Dual;
7. Tailor Roman.
The visualizer includes several steps, and each step can affect choices at the next step and can alter the final cost of the product. Our development team asked me to figure out all of these details.
TOOLS
Figma
RESEARCH
CURRENT WEBSITE
I started my research by analyzing the current LuXout website. I used it as if I was their client, which helped me learn a lot about their products. The website has images of the products in different interiors, which helps to attract clients. The shades looked so beautiful that I wanted to explore them more. The images are a big strength of the website! However, if I was a client, I would've wanted to see if the shade matches my wall color and fits in my room type (kitchen, bedroom, etc.). The LuXout website didn't have that option.
INTERVIEWS
To create the right information architecture I decided to interview the main stakeholders, the LuXout employees. I asked their manager and marketing specialist to meet with me so I could document all the important details about their products.
OUTCOMES
Over several interviews with the LuXout employees, I collected the following information:
Each type of shade is going to have a separate visualizer, which are going to be very similar to each other. The steps include (but are not limited to) selecting a product color, mount type, shade measurements, operator choice, operator position, headbox type, shade roll direction, hardware finish, chain color, hembar type, and pulls and trims.
Selections that can alter the final cost are fabric color, headbox type, hardware finish, motorized or non-motorized operator, and shade, band, and chain sizes.
The information architecture schemes should also include details of each step. For example, there are four shade roll direction configurations: 1. window side regular roll/room side reverse roll; 2. window side regular roll/room side regular roll; 3. window side reverse roll/room side regular roll; 4. window side reverse roll/room side reverse roll.
The choice of four room types should be available in the visualizer: kitchen, bathroom, bedroom, and living room.
USER FLOW
This user flow shows a user's experience with the visualizer.
After creating the user flow, I documented all my notes in Notion.so. Here you can see my notes about the visualizer steps for each type of shade.
INFORMATION ARCHITECTURE
Here are some examples of the information architecture I've created for this project.
This is a detailed information architecture diagram for the LuXshade type of shade. Here I have represented actions visually from Step 1 to Step 10 of the visualizer. The diagram depicts all pages (with notes), actions, pop-up windows, error messages, price alterations, and notes for developers. For this project I had to create such diagrams for all seven types of shades.
OUTCOMES
In addition to working on the detailed information architecture, I also helped the developers improve the user flow for visualizing dual fabrics, LuXshade Dual and Slimline Dual. The way each of these dual fabrics was simultaneously applied to the preview was complicated. However, after long conversations with the client, I came up with a solution that helped a lot. I collected all the graphics needed for the development to be done, including photographs of the rooms, shades, fabrics, PDF documents, descriptions, and many more. The developers successfully integrated my findings into their work and the visualizer process was no longer a stumbling block for this project. An example of the process of visualizing dual fabrics is shown below.
