XOMOX Jewelry

Crafting a More Intuitive and Visually Cohesive Web Experience for XOMOX

Information Design

Design System

Web UX/UI

Overview

Redesigning the website for XOMOX Jewelry, a New York-based jewelry manufacturer, creating a user-centered, visually cohesive experience that enhanced usability and aligned with the company's brand identity.

Project Info.

My role

Junior Product Designer

Duration

6 Months

work with

Nicole Bugnacki, G&M Design Team, CAD Designers

Scope of Work

Web UX/UI, Information Design, 3D Design

Skills: UX Research, Mobile Product, Figma

Role: Product Designer

Duration: August 2023―May 2024

Team: Yun Cho

Problem

Despite detailed content, current website’s outdated design and lack of clear information structure confuse users, leading to miscommunication and reduced operational efficiency.

Project Goal

Redesign the company’s website to clearly communicate its values and services while improving usability, accessibility, and overall user experience.

Design Challenge

How can we improve readability and the web experience
when presenting a large amount of information?

How can we improve readability and the web experience when presenting a large amount of information?

Data Organization

Organize text from the current website into a clear information architecture.

Currently, the company uses Google Sheets to organize information. We classify and categorize services, collecting corresponding photos and texts for each section.

Paper Critique

Reorganized information to eliminate redundancies

We printed the initial website's screenshots and conducted a group critique to prioritize the most and least important sections of the page. Our goal was to keep the design simple, minimizing distractions and reducing the cognitive load for clients. Additionally, we identified key issues with typography and grid consistency that needed to be addressed.

Summary of current website's problems:

Inconsistent Design

The lack of a unified design system led to inconsistent button and text sizes, making content difficult to read and the layout disorganized. Additionally, font styles were inconsistent, with heading fonts sometimes used for body text and vice versa, disrupting visual harmony.

Poor Information Hierarchy

Previous pages contained too much text on a single page, overwhelming users. Important sections were also placed at the bottom, making it harder for users to find key information quickly.

Unclear Service Offering and CTAs

Users struggled to understand the services we offer due to unclear presentation. The absence of clear Call-to-Action (CTA) elements also hindered users from progressing to the next step.

Research/ A/B Testing

Clear visual hierarchy with a structured and
cohesive design system

Clear visual hierarchy with a structured and cohesive design system

Through A/B testing with co-workers, we narrowed down the original four fonts to two typography options. To enhance readability, I ensured that text lines did not extend too far horizontally. Additionally, I redesigned the original gallery section, replacing the button-click functionality with a hover-effect gallery, allowing users to naturally view the content without skipping the entire section.

Research/ Design System

Develope a cohesive design system for implementation.

How did we solve the issue?

Establishing a Design System

Implement a cohesive design system with standardized buttons, typography, and spacing to ensure visual consistency and improve readability. A unified style guide and reusable components will streamline design and enhance user experience.

Optimizing Content Layout + Navigation

Reorganize content to prioritize key information and improve readability. Use clear headings, bullet points, and visual cues like whitespace and contrast to break up text and guide users. Highlight core offerings in prominent, easily accessible sections.

Unclear Service Offering and CTAs

Redesign the service section with clear summaries, icons, and visuals to improve clarity. Add bold, action-oriented CTAs that guide users through key actions like signing up or contacting the business, strategically placed to drive engagement and interaction.

XOMOX Jewelry

XOMOX Jewelry

Crafting a More Intuitive and Visually Cohesive Web Experience for XOMOX

Information Design

Design System

Web UX/UI

Overview

Project Info.

My role

Duration

work with

Scope of Work

Problem

Despite detailed content, current website’s outdated design and lack of clear information structure confuse users, leading to miscommunication and reduced operational efficiency.

Project Goal

Redesign the company’s website to clearly communicate its values and services while improving usability, accessibility, and overall user experience.

Design Challenge

How can we improve readability and the web experience
when presenting a large amount of information?

How can we improve readability and the web experience
when presenting a large amount of information?

How can we improve readability and the web experience when presenting a large amount of information?

Data Organization

Organize text from the current website into a clear information architecture.

Paper Critique

Reorganized information to eliminate redundancies

Summary of current website's problems:

Research/ A/B Testing

Clear visual hierarchy with a structured and
cohesive design system

Clear visual hierarchy with a structured and cohesive design system

Research/ Design System

Develope a cohesive design system for implementation.

Develope a cohesive design system for implementation.

How did we solve the issue?

Establishing a Design System

Implement a cohesive design system with standardized buttons, typography, and spacing to ensure visual consistency and improve readability. A unified style guide and reusable components will streamline design and enhance user experience.

Reorganize content to prioritize key information and improve readability. Use clear headings, bullet points, and visual cues like whitespace and contrast to break up text and guide users. Highlight core offerings in prominent, easily accessible sections.

Unclear Service Offering and CTAs

Redesign the service section with clear summaries, icons, and visuals to improve clarity. Add bold, action-oriented CTAs that guide users through key actions like signing up or contacting the business, strategically placed to drive engagement and interaction.

Iteration

Takeaway

Prioritizing Accessibility for the Target Audience

Asian Society Pratt

BAIE

XOMOX Jewelry

XOMOX Jewelry

Crafting a More Intuitive and Visually Cohesive Web Experience for XOMOX

Information Design

Design System

Web UX/UI

Overview

Project Info.

My role

Duration

work with

Scope of Work

Problem

Despite detailed content, current website’s outdated design and lack of clear information structure confuse users, leading to miscommunication and reduced operational efficiency.

Project Goal

Redesign the company’s website to clearly communicate its values and services while improving usability, accessibility, and overall user experience.

Design Challenge

How can we improve readability and the web experiencewhen presenting a large amount of information?

How can we improve readability and the web experiencewhen presenting a large amount of information?

How can we improve readability and the web experience when presenting a large amount of information?

Data Organization

Organize text from the current website into a clear information architecture.

Paper Critique

Reorganized information to eliminate redundancies

Summary of current website's problems:

Research/ A/B Testing

Clear visual hierarchy with a structured and cohesive design system

Clear visual hierarchy with a structured and cohesive design system

Research/ Design System

Develope a cohesive design system for implementation.

Develope a cohesive design system for implementation.

How did we solve the issue?

Establishing a Design SystemImplement a cohesive design system with standardized buttons, typography, and spacing to ensure visual consistency and improve readability. A unified style guide and reusable components will streamline design and enhance user experience.

Reorganize content to prioritize key information and improve readability. Use clear headings, bullet points, and visual cues like whitespace and contrast to break up text and guide users. Highlight core offerings in prominent, easily accessible sections.

Unclear Service Offering and CTAsRedesign the service section with clear summaries, icons, and visuals to improve clarity. Add bold, action-oriented CTAs that guide users through key actions like signing up or contacting the business, strategically placed to drive engagement and interaction.

Iteration

Takeaway

Prioritizing Accessibility for the Target Audience

Asian Society Pratt

BAIE

How can we improve readability and the web experience
when presenting a large amount of information?

How can we improve readability and the web experience
when presenting a large amount of information?

Clear visual hierarchy with a structured and
cohesive design system

Establishing a Design System

Implement a cohesive design system with standardized buttons, typography, and spacing to ensure visual consistency and improve readability. A unified style guide and reusable components will streamline design and enhance user experience.

Unclear Service Offering and CTAs

Redesign the service section with clear summaries, icons, and visuals to improve clarity. Add bold, action-oriented CTAs that guide users through key actions like signing up or contacting the business, strategically placed to drive engagement and interaction.