top of page
CRNMC WEB DESIGN 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 speaking with both customers, staff, and upper-level management, 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
Time Frame: 8 Weeks
Role: Design Lead
Practices: Information Architecture, Prototyping, Interaction Design
Tools: Adobe Illustrator, Adobe Photoshop, Premier Pro, Figma, Wix
DISCOVERY
CRNMC already had a website, though outdated, so I used the already existing site as my main source of research for what was and wasn't working. Below outlines just some of the design flaws in the original.
OG HOME 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.
Home page advertises random products with no rhyme of reason.
Unneeded design elements that distract from function of site.
Many different types of blues and yellows are used, rather than consistent colors.
Type is unreadable.
OG PRODUCT 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.
OG ABOUT PAGE
Video plays in background when clicked, making it busy.
Random navigation bar history is unneeded and redundant.
Top menu is missing.
Random fonts are used.
Random blues and yellows are used.
OG APPLICATION PAGE
The tab format is unneeded, as there are only 6 categories with not much information under each one, so everything can be displayed on one page.
This little amount of information does not warrant having a whole page to itself.
Formatting issues.
OG NEWS PAGE
Format to display articles is too wordy and looks messy.
We only have company news, so categories aren't needed.
Don't need to constantly display "hot products."
OG CONTACT PAGE
None of the contact options are clickable links, and some options aren't even available to use.
Don't need this extra navigation history bar. Redundant.
WHAT I 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
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.
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.
NEW HOME PAGE
Footer
Contact
News
Services
Hero Section
Mission
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.
All product categories by metal and industry are displayed on the home page and can be accessed with one scroll.
NEW PRODUCT PAGE
Metals by Processing
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 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
Hero Section
CRNMC About
CRNMC History
Basic Company Info
Link to Community Page
Certifications
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
NEW CUSTOMER CARE PAGE
Contact
Downloads
Hero Section
Purity Testing Info
FAQ
NEW NEWS PAGE
AESTHETICS & HIERARCHY
The news display looks less wordy, and more like a blog. The different colors and font sizes also indicate a hierarchy of information that is easier to navigate for the user.
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