top of page
CRNMC Website
A better method of sorting and navigating for an overseas audience
Summary
Chuangrun New Materials Co., Ltd is one of the top four high purity metal manufacturers in the world, breaking the US and Japanese monopoly on ultra-high purity titanium. With their rapidly growing business overseas, they needed a cleaner, more updated version of their website and branding that appealed more to a Western audience.
After user testing, I discovered 3 main issues to focus on:
1) A cleaner, modern aesthetic
2) An easy way to look through products by both industry and metal
3) A smooth, intuitive interface
Role
Design Lead
Time Frame
8 Weeks
Tools
Adobe Illustrator, Adobe Photoshop, Premier Pro, Figma, Claude Code
Discovery
Moderated Usability Testing
Finding main IA issues in the original website.
I gave 6 Americans, 4 of whom had never seen the website, tasks to complete while thinking out loud.
Task List & Results
What We Found
What does this organization do?
Request the price for a Titanium Target.
How would you contact them?
What types of industries do they work with?
Task
Success Rate
Avg. Time (if Completed)
100%
66.7%
100%
50%
0:47
2:32
0:32
2:59
Key Friction
Overstimulating home page
Buried in navigation
Overwhelming options
Buried in navigation/unintuitive labels
USERS DIDN'T UNDERSTAND NAVIGATION LAYOUT & LABELS
When users had to find actual products or key product information, only 3/6 and 4/6 users were successful due to improper labels in navigation and overwhelming navigation options.
Bounce rate increase, low conversion rates
USERS WERE CONFUSED BY REDUNDANCY
6/6 users found a way to contact CRNMC, but disliked the sheer amount of contact options presented. There were 8 places on the home page with contact buttons, which caused users to hesitate on which option to choose.
Decision fatigue and confusion
USERS FELT VISUALLY OVERSTIMULATED
Though 6/6 users knew what the organization was about, they expressed frustration with all the different elements on the page, and felt they must be missing something because their attention was constantly diverted elsewhere.
Increases bounce, causes frustration
Hueristic Evaluation
OG Home Page
OG Product Page
There are way too many contact options that cover the page and distract from the experience.
Logo is not the right logo, and is redundant with the home page.
Unneeded design elements and buttons that distract from main function.
Can't see all product groups without scrolling, categories are arbitrary, and cannot sort by industry.
Random orange color is used.
What We Found
VISUAL DESIGN FLAWS
The site was loaded with aesthetic flaws, from inconsistent colors and fonts, to awkward formatting and unreadable sentences.
The new site should look professional.
UNINTUITIVE
Certain aspects of navigation and information architecture didn't flow well, especially on the "Products" and "News" pages. Layout was inconvenient and didn't display needed information.
The new site should be easy to navigate and reveal most needed information.
REDUNDANCY/
OVERSTIMULATION
The entire site had too many repeating elements and information that cluttered the pages and made navigation difficult and distracted.
The new site should be clean and concise.
Synthesis
Major Design Goals
Create a streamlined, user-centered information architecture that prioritizes essential content and reduces unnecessary complexity.
SIMPLIFY AND PRIORITIZE INFORMATION STRUCTUR
1
2
REDUCE COGNITIVE LOAD
Minimize cognitive strain by limiting competing elements, reducing redundancy, and guiding attention through clear hierarchy.
3
Ensure users can efficiently locate key information and take action without hesitation or backtracking.
IMPROVE DISCOVERABILITY AND DECISION-MAKING
4
ESTABLISH A MODERN, COHESIVE VISUAL DESIGN
Develop a consistent, modern visual language that enhances readability, reinforces hierarchy, and strengthens perceived credibility.
Prototype
After analyzing information collected from the old website, customers, staff, and upper level management, I created a prototype of the new website catered more to their company goals.
Moderated Usability Testing
Now I needed to see if the redesign improved the IA and emotional journey of the user
I used the same tasks and procedure to test 6 new American participants.
Task List & Results
What We Found
What does this organization do?
Request the price for a Titanium Target.
How would you contact them?
What types of industries do they work with?
Task
Success Rate
Avg. Time (if Completed)
100%
100%
100%
100%
0:07
0:18
0:04
0:06
Key Friction
Slightly overstimulating home page
Too many steps to find action
Too many steps to find action
Minor label confusion
MINOR FRICTION TO BE IMPROVED
While major obstacles were fixed, there is still room for improvement. Some actions, though labeling was clear, just took 1-2 extra steps to complete, which frustrated some users.
To remedy this, we would add certain buttons and options earlier in the process.
WEBSITE VISUALS FELT SATISFYING
2/6 users unpromptedly expressed pleasure with the look and feel of the website, stating that the small details made the experience feel high-tech and professional.
CRNMC's credibility as one of the largest producers of high purity metals is improved.
MAJOR NAVIGATION & REDUNDANCIES IMPROVED
Though 1/6 user expressed mild friction with the hero section's video, the navigation itself was quick, and users could find items and information quickly.
​
Bounce rate reduced, conversion rates increased, frustration decreased.
Prototype Details
Home Page
APPEALING NEWS DISPLAY & CONTACT FORM
Now the news display includes photos and looks more visually appealing. The titles also stand out more with larger font. There is also now a way to directly contact CRNMC from the website.
NO REDUNDANCY
There aren't endless repetitions of contact information or other elements.
OBVIOUS PRODUCT DISPLAY & NAVIGATION
Instead of random products, the product display shows all metals CRNMC manufactures, as well as all industries CRNMC is involved in. CRNMC's current and target customer base operate within very niche industries, and usually have an idea of what type of metal or industry they are shopping for, so users can now directly navigate by metal and industry from the home page.
Footer
Contact
News
Services
Hero Section
Mission
All product categories by metal and industry are displayed on the home page and can be accessed with one scroll.
NEW PRODUCT PAGE
Across the top are all metal options, and down the side is the metal from least processed to most processed (with the exception of the "All Metals" tab). This way, users can always see that there are other options, even without scrolling. The "Shop By Industry" page works the same way
INTUITIVE PRODUCT SORTING
Metals by Processing
Metals Menu
Side Menu
NEW PRODUCT DETAIL PAGE
ESSENTIAL PRODUCT DETAILS
Alongside multiple photos of the product, the most essential product information is displayed directly to the right, with other information that is less commonly needed posted below.
Product Info
Related Products
NEW PRICE REQUEST LIGHTBOX
EASY ACCESS
The original price request form opened a completely different page. The lightbox on the new page creates a more accessible price request mechanism, as the user doesn't have to wait for an entirely new page to load, and they can directly click out to see other products instead of having to navigate back themselves through the menu.
NEW ABOUT PAGE
Little interactive elements and motion graphics throughout the page keep the user engaged and interested in CRNMC's story. For example, the "Values" section contains small graphics, while the "Our Story" sections has both graphics and an interactive gallery. Each section has its own unique feature.
INTERACTIVE
Link to Community Page
Certifications
Hero Section
CRNMC About
CRNMC History
Basic Company Info
What I Learned
All industries have their own set of standards and needs that may differ from typical IA or UIUX design. When I first came onto this project, I was more familiar with the typical shopping, sports, and travel sites; all industries that are basically at the end of the supply chain. But CRNMC is a manufacturing company that processes raw materials, and their clientele are not the typical consumers. This industry difference had a huge impact on the architecture of the entire site, which I did not expect when I began this project, and my lack of anticipation definitely caused some hurdles in the first couple weeks. Going forward, I plan to deepen my understanding of industry-specific user needs so I can adapt more quickly and design solutions that are tailored to each unique context.
Working at a large company where I was the only designer also came with its own set of challenges. Though working alone may seem easier because there's no negotiation required between team members, being the only designer and the only person creating the website meant that none of my coworkers had much stake in helping me find materials like photos, information about products, industry specifics, client lists, etc. As a recently hired designer, I didn't have access to any of this information, so finding motivating ways to communicate with coworkers who already had so much work on their own plates was an extremely valuable experience.
bottom of page