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
Logo is not the right logo, and is redundant with the home page.
There are way too many contact options that cover the page and distract from the experience.
Home page advertises random products with no rhyme of reason.
Type is unreadable.
Many different types of blues and yellows are used, rather than consistent colors.
Unneeded design elements that distract from function of site.
OG PRODUCT PAGE
Can't see all product groups without scrolling, categories are arbitrary, and cannot sort by industry.
Random orange color is used.
Unneeded design elements and buttons that distract from main function.
OG ABOUT PAGE
Random navigation bar history is unneeded and redundant.
Random fonts are used.
Random blues and yellows are used.
Video plays in background when clicked, making it busy.
Top menu is missing.
OG APPLICATION PAGE
Formatting issues.
This little amount of information does not warrant having a whole page to itself.
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.
OG NEWS PAGE
Format to display articles is too wordy and looks messy.
Don't need to constantly display "hot products."
We only have company news, so categories aren't needed.
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 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
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.
NEW PRODUCT PAGE
INTUITIVE PRODUCT SORTING
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
NEW ABOUT PAGE
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.
OTHER FEATURES
EASY ACCESS CONTACT
The contact page includes all essential contact information, as well as the option to directly message off the site, something that didn't appear on the contact page of the original site. The visuals are also clean and aesthetic.
INTUITIVE NAVIGATION
Drop-down menus for "Products" and "Customer Service" allow for easier navigation.
PRICE INQUIRY FORM
The previous site took users to an entirely new page for any price or product inquiries, but the new design utilizes a pop-up inquiry form that allows users to easily click out and resume browsing the website.
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