Cendana Woodworks

Category: Web Design

Overview

Context:
This is the final project for UI/UX Bootcamp organized by Dibimbing.id. Cendana Woodworks is a business that provides furniture, kitchen set, interior design, and room makeover service.

Problem:
In 2022, Cendana Woodworks has objectives to increase their sales and activities through online platform. Thus, they need a website to achieve this objective that facilitates both users and business.

Goal:
For business, this project aims to help Cendana Woodwork’s show and offer their products.
For user, to help them learn more about the company and browse products easily.

Approach:
The approach to solving this problem is to use Design Thinking framework and is supported by research method such as competitive research, qualitative interview, usability testing, and many more.

Output:
The expected output in this project is to solve business’s problem by creating a user-friendly website.

---

Introduction

Cendana Woodworks is a business that provides furniture, kitchen set, interior design, and room makeover service. They have retail products as well as tailor-made services.

In 2022, Cendana Woodworks has objectives to increase their sales and activities through online platform. Thus, they need website to achieve this objective that facilitates both customers and business.

The Goal

Originally, Cendana Woodwork’s marketing activities focused on direct selling to colleagues, connections, and partners. To increase their market size, in 2022, they aim to utilize online platforms such as social media, digital advertising, and e-commerce marketplace.

Therefore, website is necessary for multiple purposes, such as company profile, catalogue, reference, business credibility, and many more.

With that objective in mind, the goal of this project is to create a website where users can learn about Cendana Woodwork’s products, services, and credibility.

---

Insights

Qualitative Research

In order to create accurate and effective UI/UX design, we need to know what information or feature needed by users to learn about Cendana Woodworks and navigate in their website.

Therefore, the objective of this qualitative research is to figure out what contents and feature that they need, and how do they browse the website.

We managed to interview 4 participants that matched the criteria. This research took 1 week to complete.

From this research, we can conclude the participants into 2 categories: Personal Buyer and Business Buyer.

Category 1: Personal Buyer

Personal buyer is people who buy furniture or interior design for their personal use, such as for their home, decoration, or accessories.

Their main focus is about the product’s specification and quality. Their decision to buy often influenced by other’s review or rating. When searching for a product, they also use social media as reference.

Their concerns, problems, and how they feel when buying furniture or interior design can be summarized through this affinity map:

The takeaways from interviewing Personal Buyer is that they need following information in the website before making purchase:

• Review/rating
• Product specification
• Price

Category 2: Business Buyer

Business buyer is a person who look to buy furniture or interior design for their work, client, office, or business.

When looking for furniture or interior design, Business Buyer prefer to look for information and store location before purchasing, then they visit the store to discuss their needs with the vendor and also to ensure their credibility.

Another notable difference from previous category is that Business Buyer has longer decision making process before buying due to many stakeholders involved. They often use design interior software such as 3DWarehouse or Sketchup to preview the products.

Their concerns and problems can be summarized in the following affinity map:

The insight we get by interviewing them is that Business Buyer is looking for following information in the website when buying furniture or interior design:

• Showroom/store location
• Contact information

After interviewing these 2 type of participants, we can determine the following problem statement:

“User need sufficient information when buying furniture or interior design”

and from this problem statement, we can create a “How Might We” for this website, which is as follows:

“How might we design a website where user can find information quickly and easily?”

This “How Might We” is the foundation on how to build Cendana Woodwork’s website.

Competitive Analysis

Before start designing, we take a look to our competitor’s UI/UX to see how they solve the problem we find on “How Might We”. The objective of this competitive analysis is to find out features and information that our competitor provide.

We set the following criteria for this research:

• Direct competitor who sell similar furniture/interior design
• Has a website and available for online purchase

Based on this criteria, and from what participants mentioned in the previous research, we determined the suitable competitor for this research is Uwitan and Ruparupa.

Competitor 1: Uwitan

Uwitan (uwitan.com) is a website that sell variety of woodwork furniture and accessories.

From their website, we can see some features that can be useful to solve user’s problem, which is:

• Providing Google Maps to their store/showroom
• Detailed category and sub-category
• Sorting feature

Competitor 2: Ruparupa

Ruparupa (ruparupa.com) is an online furniture commerce by Informa.

From their website, we can see that their homepage is packed with various information, from discounted products, new arrival, “for you”, featured products, etc. This way, user don’t need to navigate away from homepage to get what they need.

---

Design

After learning from our user and competitors, now we can start the ideation and design for Cendana Woodwork’s website. We use Figma to design and collaborate the prototype.

Based on what we have learned, we can determine the effective information architecture for Cendana Woodwork’s website is as follows:

Furthermore, after some discussion with the business team, we create the design system which includes text size, color scheme, and button design that’s inline with the brand and customer.

Then we also create a components in figma for various sections appeared on the website.

Navigation bar:

Product card:

Website footer:

---

Validation

After we finished the prototype in Figma, we need to validate the UI and UX to our user. The objective of this validation is to get feedback to our design and to know if our prototype has satisfy our user’s needs or not.

In this phase, we use usability testing. Usability testing is a process where user or participants use our website with various tasks or scenario while being observed to see their problems, pain points, journey, and feedback firsthand.

The participant criteria for this website is the same as our initial qualitative interview, which are:

• 25-45 years old
• is looking for a furniture/interior design or has purchased them in the last 6 months
• Actively use website to find information

To ensure this usability test can capture the actual situation when user is using our website, we gave them following case before they begin testing:

After we conducting usability test research, we discovered that user experiencing some issues when using our prototype to complete our scenario and tasks. We categorize the issues according to how crucial they are.

Problem #1 : Product displayed is per item or 1 set

Some of our user isn’t sure about the initial UX writing on the product description. They’re confused if the product displayed is offered per item or as an entire dining set.

To fix this, we apply a simple explanation that direct customer to contact our Whatsapp number to purchase an entire set of furniture. Thus, this problem can be considered solved.

Problem #2 : Image enlarging feature

On the PROJECT page where we show our past works and portfolio, some user feel that the image is too small and is difficult to see the details. When asked further, they didn’t realize that the images can be clicked to enlarge them, despite a cursor animation when hovering the image.

To solve this, we add a short instruction “Click to enlarge image” by the title. Hopefully with this instruction, in addition to cursor animation, can inform our user that they can see the bigger image by clicking those pictures.

Problem #3 : No search feature

The first thing our user look for when looking for a furniture is a search bar where they can search in more detailed the furniture they looking for. However, our prototype didn’t consist of a search bar.

We realized this is a crucial element that we missed in our prototype. Therefore we add a search feature in the navigation bar.

Problem #4 : Product photo is too small

When user exploring products in product page, they complained that the image is too small and couldn’t be zoomed in. After being explained that they can click the image to enlarge the photo, they realize that it’s actually possible.

This is a similar problem to problem #2, so we use a similar solution to add a short instruction near the image that says “click to enlarge picture”.

Problem #5 : Product’s color variant

When exploring product page, some user wants to check the product in different color. So they wish that they can choose product color and then displayed how it look on the website.

Unfortunately, after discussing with operational team, they rarely produce same products with different colors. They don’t have the resource and capabilities to provide range of colors for a product. Even if they can, there will be price or specification difference.

Therefore, this issues can’t be solved at the moment through UI/UX or web design.

---

Final result

After we finished the whole process, we are now ready to present our final prototype for Cendana Woodwork’s website.

You can see the final prototype in Figma here: