Marble.com

Your Premier Destination for High-Quality Stone Countertops in NJ, CT, and PA

The Product

Marble.com is the ultimate destination for natural stone countertops, backsplashes, and more in the tri-state area of NJ, CT, and PA. With a vast collection of over 2,000 stone colors, They offer a one-stop solution where you can explore and select the perfect stone for your needs. From templating to fabrication and installation, they utilize state-of-the-art technology to ensure a seamless process and the ideal match for your home.

My role
UX Design, UI Design, UX Research, Branding
‍‍Team
Creative Director: Thomas Wolosik
Strategist: Ross Kernez
Product Designer: Kevin Perdomo

The Challenge

The original Marble.com website was created over 7 years ago, besides being a very old-looking website the usability was very long confusing for many customers.

Objective

After splitting each problem on the whiteboard from primary to secondary we decided to design an easy way for customers to explore marble.com slab yard, get an estimate, and out design tools such as Virtual Room and others, taking into consideration the demographic selected for this study..

Empathize

I conducted a research to develop an understanding of the user and delving into their needs, feelings, and perspectives.

White-boarding

I facilitated a remote kickoff and white-boarding session with my project team to help align the product direction. I used RealtimeBoard to capture different thoughts and ideas from the design team to improve the Marble.com website. This helped me envision the ideal future version of the site and how we can further evolve it to create a friendly user experience.

Main Points

For this survey, our primary target were people over the age of 30 or older.Our Main customers are Homeowners and Home Renovators.Most of the users tend to be overwhelmed by the content of the website.Too many steps to complete one flow of action.The website looks too busy.

Surveys

To help to improve the Marble.com experience we conducted a series of interviews & surveys through our old website using Hotjar and gather feedbacks.

Personas

After getting insights from user research I had a clear understanding of who my target user will be and created two personas. User persona will help me make better design decisions that will satisfy the user's needs.

• Scott Miller's persona will allow me to understand how to help contructurs and renovators.
• Emily Cruz's personal will allow me to understand how to her the customer journey of a homeowner.t.

Taking into consideration who our target is, I created two personas for homeowners and renovators.

Empathy Map

Empathy maps are a great tool for understanding your users, organizing our research, and driving a human rather than a technical view of a product or project. We create them to provide a proxy for the user during design and to ensure that the project team is in a human-centered mindset. It allows us to understand the broader influencers in user's lives. And by organizing our research into a coherent vision, this tool allows us to gain empathy with our users and to create a cohesive, empathetic view of them. An empathy map can help you accomplish this without playing a guessing game. It typically covers what customers think and feel, say and do, and see and think, as well as what their pains and gains are.

Storyboard

To get a general understanding of how users will be interacting with the product on a daily basis, I created a storyboard. Storyboarding helps us visualize the interaction between the user and the product in real life.

Ideate

Ideation is only one step in the full UX design process; once ideas are generated, a separate analysis has to follow to decide which ideas (or parts of ideas) to pursue. The more ideas the better..

Sitemap

Although the website was straight forward to pilot through, we decided to add a navigation bar to grant easy access to every page. The navigation bar creates a friendly user experience for potential customers who would like to look more in-depth about each product before purchasing from the site. We also added a quick function button that states “Get a Quote,” which has become the most functional button on the website and has been most frequently used among buyers and consumers.

User Flow

User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action.

Design Planning

After consulting with the designers and using the perspective of random users, we analyzed the data to make some changes without losing the identity of the brand. The experience and feelings of the customer working through Marble.com needed to be taken into consideration to create a user-friendly portal. Our goal was to provide an easy workflow to attain simple goals through the use of actions such as “Get an Estimate” and the use of “Design Tools”.

Build

Draft and Prototype of the Primary Workflow

After getting all information from creating the persona we understood that one of the primary goals of the user while navigating our websites is to collect information about some specific stones and details.

Create a Brand

After implementing the feedback points received from usability testing, it was time to start working on the visual side of the application, while keeping intact the brand by keeping some colors from the original brand.

Style Guide & UI Kit

A style guide was created to match the brand's new look and aesthetic and inform the design of the website.

Desktop High Fidelity Prototype

After all the research and data accumulated we were ready to design the main looks of the website. Here a prototype made on Adobe XD fully interactive with Header and Footer Navigation.
For final product visit: https://marble.com/

Responsive & mobile

Certainly, Marble.com was meticulously crafted with responsiveness in mind, ensuring seamless adaptation to various screen sizes and devices. By meticulously applying our style guide to the website design, we aimed to create an optimal mobile user experience, catering to the needs of our customers who are constantly on the move. Our focus on mobile friendliness reflects our commitment to accessibility and convenience, allowing users to access our services effortlessly anytime, anywhere.

Conclusion

Takeaways

In conclusion, the successful redesign of the Marble.com website has significantly increased foot traffic to our physical location. Visitors now experience enhanced ease of navigation and improved comfort while browsing our website, resulting in a more positive overall user experience.

What's next?

More usability testing, Research, and Analytics would uncover additional pain points and would lead us to make better design decisions. One takeaway from working on this project was understanding the value of user research and planning to synthesize findings in the most helpful way to our users within our constraints.