XOMOX Jewelry
Redesigned and relaunched XOMOX Jewelry’s website, enhancing UX and communicating services to clients and manufacturers
ROLE
Junior Product Designer
-Built scalable design system components and responsive UI kits
-Relaunched website to improve client and manufacturer understanding of offerings
-Redefined website UX and visual design to clearly communicate services
Skills
Web UX/UI, Information Design, 3D Design
Team
1 Manager, G&M Design Team, CAD Designers
Duration
15 Weeks
Tool
Figma, Blender
Skills: UX Research, Mobile Product, Figma
Role: Product Designer
Duration: August 2023―May 2024
Team: Yun Cho
The 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.
The 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 Process
01. 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?
01. Design Challenge
How can we improve readability and the web experience
when presenting a large amount of information?
01.1. Data Organization
Organize text from the current website into a clear information architecture.
Data Organization
We classify and categorize services, collecting corresponding photos and texts for each section using Google Sheets.
01.1. Data Organization
Organize text from the current website into a clear information architecture.
Data Organization
We classify and categorize services, collecting corresponding photos and texts for each section using Google Sheets.
01.2. 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.
01.2. 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.
❗❗ Current website's problems:
Summary of
Current Website's Issues:
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.
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.
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.
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.
02. Design System
Develope a cohesive design system for implementation.
03. A/B Testing
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.
💡 How we solved
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.
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.
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.
Clear 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.
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.
Prototype/ Design System
Develope a cohesive design system for implementation.
Validate/ Qualitative A/B testing
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.
💡 How we solved
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.
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.
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.
Clear 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.
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
Iteration
Takeaway
The Power of a Cohesive Design System
Redesigning XOMOX’s website showed me the power of a unified design system. Standardizing typography and layout improved readability, while reusable components streamlined the process and enhanced usability.
This project was a challenging yet rewarding experience that emphasized the importance of teamwork and communication. As a long-term project, we had to continuously align on design direction and make compromises to balance user needs with technical constraints.
Open discussions and A/B testing helped us refine our choices and find common ground. I learned the value of flexibility and collaboration, ensuring that our decisions remained focused on creating a user-centered, impactful design while fostering a productive team dynamic.
Prioritizing Accessibility for the Target Audience
Designing for XOMOX’s primary audience, individuals aged 50 to 60 with limited experience using digital interfaces, required a thoughtful, user-first approach. We focused on simplicity by reducing interactive complexity and prioritizing clear, accessible navigation. This resulted in an intuitive and welcoming experience that allows users of all technical backgrounds to navigate the site with ease and confidence.
This project was a challenging yet rewarding experience that emphasized the importance of teamwork and communication. As a long-term project, we had to continuously align on design direction and make compromises to balance user needs with technical constraints.
Open discussions and A/B testing helped us refine our choices and find common ground. I learned the value of flexibility and collaboration, ensuring that our decisions remained focused on creating a user-centered, impactful design while fostering a productive team dynamic.