UI/UX Case Study: Designing a website for a home interiors store
AZZO is a premium home interiors and furniture store based in Delhi, India. Post pandemic in 2020, due to new regulations around social distancing, and months of uncertainties in business through continued lockdowns, it became imperative for brick-and-mortar stores to go online for a new way of attracting customers. The project therefore was to expand the brand’s digital presence and build a Wordpress website for AZZO.
Keeping the website’s digital identity in line with the brand’s unique aesthetics, the challenge was also not only to design an appealing website, but also to keep its interface young, bold, vibrant and fun. Additional feature requirements included products galleries, an ecommerce store plugin, contact forms, and payment gateways.
About AZZO
AZZO was born in Delhi, India, in 2011 and is today a premium modern furniture brand. It is known to design, produce, and sell a range of contemporary design furniture, accessories, and lighting for the living room, dining room, and bedroom. AZZO furniture store offers everything within modern design ranging from designer beds, sofas, coffee tables and armchairs to practical wall units and dining sets. It also helps its customers to create a personal home with a comprehensive in-home or in-store Interior Design service, including options in materials such as leather, velvet, or any other fabric choice.
Role: UI/UX Designer
Timeline: 12 weeks
Tools Used for Website: Google Domains, Bluehost, Wordpress, WP Bakery, WooCommerce
Tools Used for UX/UI Planning: Figma, Sketch, Whimsical
Industry: Home interiors, E-commerce
Client Requirements
Nitish Gulati, the founder of AZZO, was keen on having an eccentric website full of bold colors and a memorable visual impact. He didn’t want an ordinary furniture store website, but rather something playful to match the quirky vibe of the physical AZZO store.
UX Research and Analysis
Since Azzo is a premium brand and the users spend a hefty amount to buy any piece of furniture, it was difficult to establish the same trust online. After talking to some regular and new customers of AZZO, a few common theme of user ‘fears and motivations’ emerged:
Key Business Challenge
The key challenge faced in the initial phase was to set the right balance between the user’s expectations and the owner’s vision. It was clear through our primary research that people weren’t favoring an e-commerce platform for a luxury furniture store — but COVID-19 was obstructing the sales otherwise. We therefore knew that we had to develop a step-by-step process to shift the consumer trust online entirely which can only come with time and a strong digital marketing strategy.
Ideation and Prototyping
Low fidelity wireframes
After studying the competitors and exploring similar websites, we performed a crazy-eights activity to decide the structure of the website.
Information Architecture
Considering that AZZO had 5 different product categories, along with other sections, resources and information to attract the target client, it was essential for us to design a well planned information architecture for a smooth user experience.
Visual Identity through a strong “Homepage” design
The homepage gives you a first indelible impression of a website and hence the store you are about to enter. With special emphasis on the homepage, we spent quite some time on designing it with a series of iterations to get the look right.
Design Challenge 1
One of the biggest constraints while designing the homepage was the lack of high resolution imagery to be used for the homepage. To overcome this challenge, we chose to design different vector icons for each product category with solid neon backgrounds for visual impact.
Design Challenge 2
In order to keep the UI of the entire website consistent, it was important to achieve a cohesive visual identity, while keeping all the design principles in mind. Considering that our homepage was now based on vector imagery and bold solid colors, another constraint was to balance the look in the subsections, which were rather photo heavy to show the brand products. To cater to this challenge we started with a moodboard exercise to come up with a layout that stays consistent with the homepage.
Creating balance with a defined style guide
Moving on, we defined a fixed color palette that has been used as a powerful identifying symbol in the entire interface. We further created balance through the right contrast between the background of the website and content, a consistent icon library, buttons style and sizes, and the use of typography principles for headings and body content.
Solution to Azzo’s unique e-commerce constraint
E-commerce is a tough choice in the luxury furniture industry for both the manufacturer and the end-user. Transactions involve high price points and exclusive design customizations which are hard to achieve securely online. But owing to the pandemic, it has become inevitable for a brand to include an e-commerce platform in their digital presence.
Finding a temporary solution, we decided to disable the ‘Add to Cart’ feature on the website for now, enabling the customer to use the e-commerce store as a virtual window shopping experience instead. Consumers can visit the AZZO website to surf for all available products, explore all their options, save them as their wishlist and then contact the store for further customisation and pricing.
This decision was based on the mental model of a typical e-commerce user which is formed around a cart and check-out, and therefore we retained the entire process in our design until the stage of being able to save products in the cart. However, to avoid any further confusion that the customer cannot really check out and place the order — we designed big bright ‘disclaimers’ as modal popups specific to our theme to keep the user informed at all times.
This way the new AZZO customer can now visit AZZO online as a virtual store and still find security in placing their order later in-store through pre-booked appointments. We also added a ‘Contact Form’ to the website for a customer to easily reach out to the store manager through email, other than the contact page details.
The navigation of the respective ‘Gallery’ and ‘Product Pages’ is also interconnected to help the users find individual product details easily, along with an easy switch to the gallery to explore more products in each category. To be specific, while the product pages detail each product with a name, description, color and material type; the gallery is centered around exploring all possible available products in one place.
We hope that AZZO will soon be a full-fledged ecommerce store with a secure checkout and payment in the near future.
Other Thoughtful Design Features:
- Photo organization in product galleries based on color gradient (a basic principle of how the eye sees colour). The colours go from lighter to darker shades, from top to bottom.
2. While designing the product page, I cropped the photos to show just the specific product as I was vouching for uniformity. But when we showed this to the client, he shared a very interesting behavior about the customers. When someone comes to buy, say a table, and finds the chair kept beside appealing to them, they might even want to buy it. Thus, to maintain a good marketing of the products and fuel this user tendency, it was important to make the images look good rather than focus on the aimed product and uniformity.
3. The naming of the product was another fun task. I had to do it in a way that it sticks with the users and is also search optimised. The colour and the category were therefore the key features to decide on a name.
4. The website is a complete product directory. Before, the owner used to have everything organised on Drive and everytime a client came, he used to open his IPad and fluctuate between hundreds of drive folders to show a product. After: everything is organised on the website. He can easily show his products anywhere, anytime, from any device without wasting much time. The client can also see them later on the website.
Making it mobile responsive
According to research, mobile accounts for approximately half of web traffic worldwide. In the third quarter of 2020, mobile devices (excluding tablets) generated 50.81 percent of global website traffic, consistently hovering around the 50 percent mark since the beginning of 2017.
As more and more people use their mobile phones to access the Internet and shop online, creating a mobile optimized website for AZZO was another necessity.
Future Scope
Depending on the response of the users and changing market trends, the website can be made more transactional by the complete integration of e-commerce if and when required in the future.
Apart from that, personally I would love to work more on such UI/UX projects, where everyone is open to ideas, experimentation and an unconventional design approach.
Key Takeaways
Every great design begins with an even better story.
This project was an engaging experience, where I built a complete website from scratch. Not just did I learn about the finesse and amount of effort that goes into the same, but also patience, and the act of pleasing both the client and the user at the same time. Most importantly, I learnt that not everything works out as we plan on the first attempt. Ideas need constant development and we should always have a backup plan. We need to try things even though we might not like them, but what if it pulls off!
There was a lot of space for me to do things on my own in this project and it was a great learning curve. I even gave a presentation to peers explaining my design process, decisions and the use of best practices in UX/UI design. It was an interactive 12 weeks where I was learning something new everyday, be it marketing tactics in the interior industry, or designing my first ever UI library.
Last but not the least, ‘The StreetTrotter Mentorship Programme’ was a wonderful experience for me. There was a healthy flow of ideas, learning and insane experiments. I was always encouraged to try something new and discover things myself. I am extremely grateful to Shraddha Ma’am for being a constant source of support and guidance ❤ and giving me creative freedom. Looking forward to working on more projects with the StreetTrotter Tribe!
Check out the final product: https://azzomodernfurniture.com/
