Roomax
Furniture E-commerce Website Redesign
PROJECT OVERVIEW
Roomax differs from other furniture sites in that they specialize in custom made furniture, so users aren't on the site to buy an item at that very moment. Instead the goal is to get them to set up a time to come into the showroom where their visions will be brought to life. With competitors like Ikea that use affordability to their leverage, Roomax must stand out with a website that showcases their custom made, high quality products while providing an effortless browsing experience.
Project: Solo website redesign
Client: Roomax
Duration: 5 months
Tools: Figma, Notion, Zoom, Otter, Google Docs
October 2022
RESEARCH
Stakeholder Interviews
To identify goals, motivations, and research needs for this project, I met one on one with internal stakeholders. We identified 2 main goals we’d like to achieve with this redesign:
give potential/returning clients an easy way to set up an appointment
get potential clients who are just browsing interested enough in what they see to give a call and/or book an appointment to visit the showroom
The first goal can be accomplished by figuring out any current blockers for users when setting up an appointment. Right off the bat, the second goal tells me content and layout will be an area of focus, but further research is needed to support that.
User Interviews
To identify any pain points and challenges users typically have when furniture shopping, I interviewed a mix of previous Roomax customers and brand new users who have never shopped from them before.
A reoccurring theme was the importance of a variety of options on a site, which was noted for later.
60% of users mentioned the importance of having a variety of options on a furniture site
Usability Testing on Current Site
To identify any opportunities to improve, I had the same users go through usability testing on the current Roomax site and give their feedback. They were given tasks to complete, with time and # of errors recorded for quantitative data.
Task 1: You have an idea for a piece of furniture you’d like to have built, show me how you’d set up an appointment to discuss your idea with someone at Roomax
Created to determine any issues with the current process of booking an appointment.
Task 2: From the Homepage show me how you'd go about finding out the price of a Queen Lateral Wallbed
Created to see if users can get to important content quickly + easily
Affinity Map
Organizing user feedback into common themes allowed me to figure out the most high impact problems for users, while keeping in mind our stakeholder goals.
poor quality images used
inconsistent color and font usage
"custom made" not emphasized enough causing confusion
hiding useful information under "More"
Current Roomax Homepage
Key Insights:
Overall Visual Design
Negative feedback about scale in regards to both typography + photography, color contrast and organization of content.
Images Used
100% of users expressed disdain over the images used, mostly due to the fact of them being “outdated” and of lower quality.
Confusion over Customizable
Every new user was uncertain whether you could buy a product. They felt it’s not clear that the furniture is customizable, with one saying they completely glossed over where it says “Custom Made”
Usability Test Metrics
On average, users spent 23 seconds searching for a way to contact Roomax, with the longest time being almost 40 seconds.
This is a problem considering most users will leave a site after 15 seconds, meaning they’ll give up on the Roomax site before even getting the chance to set up an appointment.
Why did users take so long?
Most users found different ways to set up an appointment, with only 1 using the intended “Contact Us” button.
Why did users avoid the Contact Us button?
Users felt the homepage was disorganized and jumbled. This, along with the intensity of the red button blending with the nav bar, caused the button to be ignored by 80% of users.
A user reported wanting to exit out of the page due to the red .
C&C Analysis
Right off the bat stakeholders expressed concern over the website’s current UI, and usability testing only confirmed it needed a complete redesign. My goal with the C&C was to gain inspiration and a sense of direction, with focus on the following elements that I believe Roomax could improve upon:
Hero Section (Including Mission Statement/Tagline):
Quickly give visitors an idea of what to expect for the rest of the website
Tempting Call to Action:
The easiest way to get visitors to do something is by asking them. It needs to stand out from the rest of the elements within the page
Overview of Services and Features:
It’s important to include a brief summary to reinforce to the users that Roomax has what they’re looking for
Simple Process Plan:
Laying out a simplified version of the steps users need to take clarifies what they need to do and makes working with Roomax seem easy
DESIGN
Sketches
Coming up with ideas for the Homepage layout was fairly simple as I was able to get inspiration from the unlimited amount of websites that already have mastered the landing page. What will really make or break it are the images that are ultimately chosen.
Sketch Ideas for Homepage
Sketch Idea for Product Page
Current Product Page
The product page was a bit more complicated because I was unsure what inspiration to draw from, considering most sites allow you to purchase a product.
Based on user feedback, key areas for improvement are :
-
too much text
-
a disorganized layout of measurement and pricing
-
an overwhelming amount of pictures
Mid-Fi
For the Homepage redesign, I relied heavily on the C&C analysis to come up with solutions for the main problems that came up during testing. I focused on:
-
Hero Section & Tagline
-
Call to action(s)
-
Overview of Services + Features
-
Simple Process Plan
Homepage Mid-Fi
Mid Fi Product Page
Current Product Page
For the Product Page, user feedback helped set the direction while indirect competitors, such as Ikea, helped with inspiration.
Final Prototype
Usability testing where different users were assigned the same tasks shows a decrease of 7.02 seconds in Task 1 compared to the original.
Why did users take a shorter time booking an appt?
Based off user feedback, returning users found improvement on visual design, with emphasis on content + layout. What was once described as a site that "reads like a word document" has now improved upon typography, color contrast, and visual hierarchy
Final Thoughts
Positive Results And Much More To Do
When looking back at stakeholder goals, the improved metrics and overall feedback from users on the redesign proved to be a success.
Yet there was enough feedback regarding other screens that could also be refined a bit, such as the Product Listing page and Contact Form.
The Challenge With Research
There was a lot of creative freedom with this project, which somehow made it a bit more tedious. The unlimited amount of directions I could've gone became obvious during initial research, and it became hard to narrow it down. It's easy to overwhelm and overthink at some stages.
Summary
Overall, this project helped me explore different avenues of research, such as Market Research + Competitive Analysis. Having complete control of the design process was overwhelming, but exactly the practice I needed after taking some time away from Figma. My first design project back after a gap and I couldn't be more content with this opportunity.