About Design & Decor
Design & Décor offers unique shopping experiences through its conceptual online furniture store. Furniture sets can be purchased for complete room looks, or items can be mixed and matched to create a customized style. A free interior design service is also available on the platform for inspiration and guidance.
Business Needs
Design an adaptive website that:
• Having an e-commerce furniture website that offers each room bundle.
• To give Users the ability to customize their desired look by mixing and matching furniture items.
• Giving users free designer services to get professional assistance in implementing their vision.
Design Goals
• Provides a pleasant and easy online furniture shopping experience.
• Creating a smooth process that allows users to complete the mix-and-match process without any challenges.
• Visualizes items in a room for users to understand what they look like.
Survey
We conducted a survey using Google Forms to learn about the preferences and opinions of our target audience who are interested in purchasing furniture bundles for a new look in any room.
Target Audience
Our target audience consists of young families who own pets such as dogs or cats and are seeking to relocate to larger suburban homes. They require furniture bundles for their new homes.
Key survey findings
Interview
User interviews were conducted to understand how people choose products. Open-ended questions were used to encourage a more interactive discussion.
Interview Takeaways
Competitive Analysis
To gain a better understanding of their different features and their operating methods, we conducted a comparative analysis of some furniture websites.
Competitive Analysis Takeaways
• Design a user-friendly interaction with uncomplicated navigation.
• To gain the trust of the users, testimonials should be displayed on the homepage
• By using vibrant and clear photos, users can experience better visual experiences while browsing.
• To make it easier for users to find their favourite look, we categorized each room's look.
In order to create a website that meets users' needs and challenges appropriately, a persona is defined based on data gathered during the discovery phase.
Scenario
We created a storyboard and scenario to better understand the user's perspective and illustrate the website flow she is going to take.
To address the user's concerns, we brainstormed to understand their problems and needs.
These are the possible solutions that we came up with:
Problem 1
Categorization of every room's appearance with clear images to assist buyers in having a better purchasing experience.
Solution 1
To make it easier for users to find suitable furniture sets for each room, we have categorized them into specific categories. For instance, if someone is looking for a set for their living room, it will be easy to find it.
Problem 2
Seek professional design help for home décor.
Solution 2
Highlight the free interior design service on the home page and navigation bar for easier access.
Problem 3
Need to customize sets according to the desired look offered by the website.
Solution 3
Offers the option of replacing an item with another item from a list of suggested items.
Problem 4
They need to determine the size of the chosen item to visualize, especially if they are considering purchasing online and cannot inspect it in person.
Solution 4
Using Augmented Reality (AR), users can visualize furniture in their homes through various devices. This feature has been placed on the home page that allows users to use a QR code to check desired items in their place.
Task Flow and User Flow
Our user flow and task flow were created based on Julia's requirements to better understand how users would interact with the site. The following are Julia's paths while browsing the website.
Site Map
Based on our findings from research, including competitive analysis, we have created the sitemap.
UI Kit
UI Kit was created based on the Design & Décor layouts in mid-fidelity wireframes to maintain visual consistency the website develops.
We design boxes with slightly round corners and use pictures to showcase the soft edges of furniture.
We apply the Lora typograph, and Inter to be good pair fonts with moderate contrast, for a unique appearance.
We design boxes with slightly round corners and use pictures to showcase the soft edges of furniture.
We apply the Lora typograph, and Inter to be good pair fonts with moderate contrast, for a unique appearance.
Mood Board
While creating the mood board, we were inspired by nature's organic shapes and neutral colours.
The minimal-modern furniture style required the use of colours in the same tone without any sharp contrast.
Sketch
By sketching out ideas for layouts and referencing the task flows, user flows, and sitemap, we started the design stage. These low-fidelity wireframes were a quick and efficient method for developing a visual hierarchy and showing the user flow.
Mid-fidelity Wireframes
Following the sketches, we created mid-fidelity wireframes on Figma, converted them to digital form, and prepared them for usability testing. We were able to focus on the functionality of the features by creating wireframes in grayscale.
Usability and Iteration
We have done several iterations based on usability tests and feedback. Here you can see some of these iterations.
The design and flow have been revised to give users a better experience.
Homepage Iterations
Iteration of the Mix & Match page using A/B testing
Hi-Fidelity Desktop Deliverable
Hi-Fidelity Mobile Deliverable
What I have learned from this project
• I learned that purchasing any product online should be an easy task. It is much easier to make a purchase when the order and checkout processes are simplified.
• Through this project, I have gained a better understanding of why research is important at all stages of design and how it can improve a product.
• Through testing and iteration, I found that the product can be made more user-friendly and acceptable.
• During the design process, I also understood the value of teamwork and sharing ideas and skills to be a more productive team member
What I can do next
• Doing more usability tests and iterations on the product to make it more user-friendly is important.
• Additionally, improving the accessibility of the pages will make them usable for more users.
• It is essential to stay informed about any new features in this field, particularly regarding Figma as the main tool, and how to incorporate AI to enhance the product.
