Luxurio
A luxury furniture brand offers unique furniture pieces to customers. They have a streamlined web experience that features best sellers and in stock pieces. With customer service in mind a chat function connects customers with a live representative to assist with any questions necessary.
Concept
The landing page communicates the overall furniture style to the customer by showcasing a hero image with a best-selling product and the opportunity to click into the collection. The header is straight forward and easy to navigate. Color selection was based on soft warm neutrals with darker accents inspired by a combination of earth tones. Arches are utilized as an ode to the modern and contemporary design of the company's furniture pieces.
Design Challenges
Creating a seamless experience for online shoppers. Since customer service is the key for return customers it's necessary to ensure customers have quick access to information and design advice.
My role
Visual Designer, Concept, Research
Tools Used
Adobe XD, Adobe Photoshop, Pencil, Paper
Target Audience
Trendy & design conscious consumers
Here is my process...
Research
First, I do some research on different brands with a similar product. This gives me an opportunity to see how other companies are implementing certain features and identify as a user what makes the web experience a good or bad one.
Pottery Barn: Has a very crowded header with several different categories including search bar, product categories, and other informational tabs. This makes everything a bit overwhelming. However, placing the company name (also their company logo) centered on the top menu creates visual balance. Utilizing a banner to showcase events is done in a great way without taking too much away from the brand. Scrolling down to videos of best-selling products is a great visual highlight.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e858e76458baaa63f3c13_RESEARCH%201%20POTBARN.png)
Ikea: A very clean and simple design but requires opening the nav menu to navigate through all the different product sections. It isn't as seamless because it provides too many options such as first deciding if you are better at identifying the product you are searching for by product type or by room.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e85a0d0e184d8901fbf25_RESEARCH%20IKEA.png)
Living Spaces: A simplified version cutting down informational tabs. Their image upon opening the website highlights their easy online shopping experience. While describing the shopping process is a good way to put clients at ease, it is missed opportunity to showcase a best-selling product or discounted sale item.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e85ad13f7e3a9e8d86db6_RESEARCH%20LIVSPACES.png)
Sketches
After some research I create a mind map of how the user would be able to navigate through the online store. Then creates a quick sketch for some preliminary layout ideas.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e85bccfe3148e885cd6a1_LUXURIO%20SKETCHES_.png)
Low-Fidelity Wireframes
After pouring some ideas onto paper I jump into creating some low-fidelity wireframes to show the basic layout and proportions of each page.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e85d5ccc2302b862d2393_LUXURIO%20WIREFRAMES.png)
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e85e0b3c798b247ccaabe_LUXURIO%20WIREFRAMES%201.png)
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e85eb71fa70a4f88c45ad_LUXURIO%20WIREFRAMES%202.png)
High-Fidelity Prototype
Following the wireframe, I create some high-fidelity prototypes to bring together all the ideas for testing.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e860af07b981bcd03c176_LUXURIO%20PROTOTYPE%201.png)
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e8613b70e493e4ffcce17_LUXURIO%20PROTOTYPE%202.png)
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e861fecca6c1e89c4bb94_LUXURIO%20PROTOTYPE%203.png)
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e8628f17c42785932e4b7_LUXURIO%20PROTOTYPE%204.png)
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e86365a2fa7905fd489fd_LUXURIO%20PROTOTYPE%205.png)
Features
Marketing Overlay: Increases conversation rate by offering promotional pricing while the customer signs up to receive information on future sales and new product releases.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e87397ebc640ecdad3aed_LUXURIO%20FEATURES_.png)
Chat Box: Allows customers to inquire on anything from availability, additional product information/tear sheets to connecting them with an in-house designer. Access to a live representative will help reassure clients with their purchases.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e872a13f7e35c32d871de_LUXURIO%20FEATURES%201.png)
Contact: Allows customers to see if they live in the vicinity of a store location and connect with the store if they have immediate questions.
![](https://cdn.prod.website-files.com/621e4f3c7e251a855d5b8a64/623e87489a4b3efc534011e9_LUXURIO%20FEATURES%202.png)