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).
