# Wireframing / Prototyping - High Fidelity

Once we were happy with low fidelity prototypes and user interactions, I worked with visual designers to build the UI components of the platform and give it a real feel. We designed the site page by page, paying attention to the brand and visual identity we had developed in conjunction with the low fidelity prototyping stage.

![Homepage search field prototype](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFhXakgj9XRxPTgXzVK%2F-MFhYA8bs7AdvCRXyUjy%2FScreen%20Shot%202020-08-26%20at%2021.25.10.png?alt=media\&token=861c79f8-471c-46e7-aace-023f64df57ad)

We continued to employ user testing at each page design ramping up types of testing such as conducting user interviews and lab testing in addition to methods we had used in low fidelity stage.

You can see the interactions for the search elements [here.](https://xd.adobe.com/view/fd455b2b-d271-413c-a3ee-788694b7b381-a816/?fullscreen)

We gathered valuable insights from the high fidelity testing such as simplifying our 4-step search process to a 3-step process and reducing the number of input fields from 8 to 4 improving conversion rates as shown below:

![Initial Search Form with 4 Step Process](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFhXakgj9XRxPTgXzVK%2F-MFhYVXublo-SYFtFiH6%2FScreen%20Shot%202020-08-27%20at%2001.26.48.png?alt=media\&token=aff59f0f-7a81-475a-8177-9a2d76d245be)

![Simplified Improved Search Form with 3 Step Process & Visual Context](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFhZHOX-xOCXEiYMKpK%2F-MFh_Cl7CBuybzUE6xHG%2FScreen%20Shot%202020-08-27%20at%2002.42.03.png?alt=media\&token=b1ca5c36-b27a-4385-804b-4bbe8c374ca6)

**`*Due to the proprietary nature of this product, only pre-approved examples of the work I completed have been published in this case study.`**
