Cordant Wealth is an investment company that at the time, wanted a website redesign that was minimal and clean that showcased their transparency to build trust for their clientele. This was a collaborative project where my role as UI Web Designer was to create design elements such as the icons for the banners, web design wireframes, mockups and oversee the development team for quality assurance and perfect the mobile experience with CSS.

Homepage Walkthrough:

In this video, I show how the banner ui works which depicts how the company helps their clientele through each stage of their investment lifecycle. I designed the timeline button graphics and overall ui interface to work in all browser dimensions and devices. I also created the overall structure and style of the page beneath the banner. Following that same structure, my colleague helped execute the internal pages excluding the forms and Wealth Management Resources page.

Featured Page:

Pref-Tech is a security solutions company that wanted a more modern design that highlighted there expertise, values and services. This was a collaborative project project where my role as UI Web Designer was to create web design wireframes, supporting design elements such as typography, lines and textures, product mockups, oversee the development team for quality assurance and perfect the mobile experience with CSS.

In this video, I walk through the homepage to get an idea of the UI interface and layout of the website. At the time our senior designer worked on the banners, while I worked on the overall layout and supporting design elements which is nearly everything else beneath the banners.

Kinematics Manufacturing (KMI) is leading supplier of highly-engineered, precision motion control solutions, servicing the solar, oil & gas, mining, construction and other industrial markets. They wanted a design that highlighted their expertise while showcasing their products. The interface needed to be easy to navigate so viewers can compare specifications across various categories of products across desktop and mobile devices.

In this collaborative project I worked in a cross functional team consisting of art director, senior designer, developers, copywriters and proofreaders. My role as UI Designer was to create a design system, wireframes, high-fidelity mockups and supporting design elements, oversee the development team for quality assurance and perfect the mobile experience with CSS.

Design System Created in Figma:

I created a scalable design system in Figma which consist of typographic guidelines and color schemes, and reusable components that allows each webpage to look consistent. I implemented an accent green color to their swatch palette to represent KMI’s progressiveness, being leading innovators in their industry.

High Fidelity Mockups

These are the top 3 main pages I created in Figma as high fidelity mockups. The web design and graphics I created were made to support the brand messaging that KMI are global leaders, innovators and visionaries.

Merichem, a technology solutions company, wanted a website redesign to get away from the boxy look of their old website to something more dynamic and modern. This was a collaborative project where my role as UI Designer was to create style tiles, design system, UI components, low-fi wireframes, high-fi mockups and design elements. I also worked closely with UX colleague to ensure the interfaces created a good user experience and supervised the development team for quality assurance and perfect the mobile experience with CSS.

Style Tiles:

I worked on 4 different style tiles for the client to review. The image below is the style tile that got approved by the client. This allows the client to get an idea of the overall feel and look of how the website will look and later help guide the wireframes and mockup design elements.

Low Fidelity Wireframes:

Below are examples of the initial wireframes I designed while working closely with a UX team member. The wireframes were crucial in helping the client visualize what content will be on the page and where it would go. The wireframes were created quickly in order to present to the client and get feedback. Feedback is important at this stage, because it allows the client to be part of the process early on and make changes before going too far down the road. After receiving feedback from the client, they would be revised until approval.

Design System Created in Figma:

I created a scalable design system in Figma which consist of typographic guidelines and color schemes, and reusable components that allows each webpage to look consistent.

High Fidelity Mockups:

While wireframes are like the skeleton and framework of the page, the mockups stage includes color, type, other design elements and more definition to the structure of the pages. This website was created using WordPress and utilize different templates to several pages. Many widgets and features could be switched on or off making the templates versatile for different content needs. Additionally, I had to ensure that designs did not interfere with functionality and that the client could log in and make copy updates in the future.

The Result of a Good User Experience:

The search tool interface I designed for the home page helped visitors quickly search and compare solutions from an easy-to-use-drop-down menu with a single click. This tool reduced the amount of time it took users to find the appropriate product or service by up to 90%.

Within the first 78 days since the launch, the results were remarkable. Merichem’s website had 7,220 unique visitors and 21,405 page views. More important, 48.56% of those were first-time visitors exposing the company to new potential leads. Visitors are spending more time on the site, with an average session duration of three minutes.

The brand new website design improved user experience and led to an increase in the quantity and quality of leads generated through the website. During the first months, the new website generated 47 requests for quotes, 38 general contact-form submissions and 87 downloads of technical papers. Merichem feels confident it will receive a complete ROI on the investment made for the website (and then some).