ID Concept

Redesigning a website for an interior design and custom made furniture company

Role - UX/UI Designer, Researcher

Tools - Figma, Whimsical

Duration - 8 weeks

Deliverables - Responsive website for Mobile and PC

BACKGROUND

PHASE I - EMPATHIZE

PHASE II - DEFINE

PHASE III - IDEATE

PHASE IV - PROTOTYPE

PHASE IV - TEST

View Prototype

Project Background

ID Concept is a family-owned business that specializes in custom-made furniture. The company is located in Belgrade, Serbia. Each item of furniture is crafted with precision detail, producing a stunning, unique work of art.

Problem

ID concept is a small company, but they have many orders for custom-made furniture. Their contact/quote form often leads to customers being confused. They also don't have an appointment system on the current website. That is why they always get too many time-consuming phone calls. Also, the company wants to have a site in English because they make furniture for many foreigners.

Goals And Objectives

To create a responsive website with a clear CTA to contact form
To update the visuals and the best practices
To test and create task flows for a better user experience through the contact/quote process

EMPATHIZE

My main research goal was to understand customers’ needs and problems when they want to order custom furniture online

Research Methods

Secondary research. To gather and analyze data regarding the market of custom-made furniture
Competitive analysis. Analyze the three most significant competitors on the market, their strengths and weaknesses
Stakeholder interview. To gain insights into business needs and visions
In-person Interviews. To gain insights into potential customer needs and pains

Competitive Analysis. I conducted a competitive analysis to understand the biggest competitors for the ID Concept and their strengths and weaknesses. The biggest competitors for ID Concept are Radovic Enterijer, Mala Fabrika Namestaja, and Crvena Jabuka namestaj. They target the same market and offer similar services and materials. Based on the type of product, the furniture manufacturing market in Serbia can be segmented into the following: office furniture; kitchen furniture; Mattresses, and other furniture

Interview Participants. I conducted remote and in-person interviews with 7 participants between 34 and 61 years old. The goal was to find how participants prefer to contact the company when ordering custom furniture. It was essential to understand what difficulties participants experienced while contacting the company, preferred contact methods, and how they make an appointment (if required).

Participant requirements. House/apartments owners who have experience with ordering custom furniture online.
Interview findings. According to the research, the most common participants' frustrations while ordering furniture online:

A long waiting time for an answer by email
Hard to reach the company (by phone)
No appointment system on the site (only through the phone or email/contact form)
No dates when the company was available for the next project

How to make the ordering process more simple:

Add a calendar and the next available project dates on the site
Add a contact form on the site, which includes: the customer name, geographical location, furniture type, furniture location (kitchen, living room, etc.), materials, the time when the project should be done, attached files, additional message

User Persona. After concluding the research, I created a Persona that would best reflect ID Concept’s target audience

DEFINE

Feature roadmap. I created a feature roadmap based on my user research findings, the participant's needs, my persona, and competitive analysis

Information Architecture - Sitemap

Based on my findings, I created a sitemap.

Information Architecture - Task-Flow

After conducting research, I started the Define stage by developing a primary task flow. Task: a user arrives on the home page and orders a wall bed (Murphy bed).

Information Architecture - User Flow

IDEATE

Sketching. After identifying the key pages, I spent some time developing sketches. I translated my sketches into low-fidelity wireframes.

Low Fidelity Wireframes

PROTOTYPE

The ID Concept's current UI Kit involves neutral colors and blue CTA, which I decided to keep on the newly redesigned site. The company has been on the market for a long time, so together with a stakeholder, we decided to keep the current logo. We didn't want to confuse current and new customers with redesigning the site's main elements. After making some changes to the UI Kit and finishing up the Lo-Fi wireframes, I began developing my Hi-Fi wireframes for the prototype. I created Hi-Fi wireframes for the mobile, and desktop user flows.

Set Of High-Fidelity Screens - Home page. Product page. Contact us page

USABILITY TESTING

Test Objectives:

Observe how users navigate the website
Determine if users can complete tasks
Identify the general perception of UI design
Identify pain points and frustrations

Methodology

In-Person: one-on-one testing using a laptop and Figma prototype
Remote: one-on-one testing with screen share and Figma prototype

View Prototype

Task: browse the website to find a sofa and contact the seller through the site Figma

Test findings

The usability test was conducted with five users 29 - 45 years old. Each participant was asked to complete the following task: browse the website to find a sofa and contact the seller through the site. Participants were able to complete the task given with the limitation of the prototype.
The test showed that there are two high-priority tasks to be resolved. Some of the users' suggestions could be implemented in the future based on business needs and priorities.

Two high priority tasks that have to be solved: