top of page

Mesofilter Website Redesign

My Role

Mesofilter website redesign is my individual project. I created frameworks and prototypes to share the vision, design principles and content strategy. 

Why was the website underperforming?


Mesofilter Inc is a company specializes in water filtration products which is located in San Jose. 


The client was not satisfied with their existing website because it did not reflect the look and feel of the company and was not generating new business. 


My challenge was to create a new website in one week that would be friendly,approachable and professional.














Web Analytics Data


To answer this question I started by analyzing the web analytics data. My analysis revealed that new visitors were able to find the website but they were not staying long. The website had a high bounce rate and low engagement metrics.

Traffic sources, search keywords, and landing page reports provided insight into the kind of information visitors were looking for and helped to identify the website's content gaps. 

Mobile reports showed that almost half of users were viewing the site using a mobile device. Being that the site was not responsive and did not render correctly on small screens, this was a significant usability problem.

Unmoderated Usability Test


I recruited users who met the website’s target demographic to test the existing website using Users were given specific tasks and questions and all sessions were recorded.


Top insights:

  • The site contained too much text and was overwhelming to look at

  • It was not clear how to find the product

  • The company's contact information, like phone number was missing from the home page

The Process

I set out to create a new website that looked fresh and was built to be robust and extensible, apart from adding numerous new features.I thought up some features that address some of the initial requirements for the redesign and included some 'nice to have' additions as well

New Website's Structure 

I created low-fidelity flow using Sketch. This was a quick and effective way of mapping out the new website's structure.

Low-Fidelity Wireframes


Quick, rough wireframes get ideas out of my mind and make it them for tangible. It's easy to identify layouts thta work well and those that don't.I created low-fidelity wireframes using Balsamiq. My goal is to keep them moving down the funnel, towards the desired action. Optimize the content on each screen for conversions. It helps the client understand the evolution of the process and my way of thinking.




Testing My Assumptions


I took some time to clearly define the business objectives and key adjectives regarding the look and feel of the website to ensure that my client and me are on the same page before web design work begins.


In this case I wanted to make sure I was on the right track before completing my high-fidelity mockups. My approach was to create a mock-up first and then presented it with my client. I created a mood test and asked my client: 

“How does this page make you feel? Please list your top three emotions."



Finial Design

The majority of responses was positive and captured the desired mood perfectly. However, there were some negative responses such as “overwhelmed” and “not very friendly”.

Based on these results, I modified the design by reducing the amount of colour, increasing whitespace, adding cute icons and improving the text readability.

Reviews  From the Client


"Qian was extremely creative and intuitive when suggesting attributes that would engage our target market. She managed to structure our website so that it easily delivers all the information we need to give our customers without overwhelming them or bogging down the site with information overload. "

Liangjie Dong CEO & Chief Scientist

bottom of page