Advanced Search Tool UI Concept
Advanced Search Tool

Advanced Search Tool UI Concept

Project Goal

The goal of this project was to create a UI design for an advanced search tool which would provide a way of easily searching for tickets.

The company where I work has this feature in an existing Ticketing system but I have been tasked with updating this UI and making it more user friendly.

Creative Strategy

Initially, this project required research into the UI design and usability of ticketing systems. I had never designed such a feature before so research was key to developing my understanding of creating this design.

Following on from this research, I examined the feedback received from the previous version of this tool to see what could be improved.

Based on the research and the insight gained from reviewing the feedback, I was able to generate a list of use cases which would allow me to step through the new tool in my mind. This was key to understanding what screens would be needed and how the user would interact with them.

Once the use cases were created I was able to create a flow diagram by listing each of the screens that would be required and then connecting them with arrows to convey the flow through the tool.

Once I was happy with the use cases and the flow diagram, I began to create a rough wireframe using Balsamiq mockups. This allowed for rapid prototyping as I was able to add, move and delete components with ease as I worked through building up each screen.

My next step following the creation of wireframes was the creation of higher fidelity mockups. For this process I worked in Adobe Photoshop.

I recreated each screen of the wireframe using components like those you would be expecting in the finished product except I kept everything greyscale for now.

Following this, I stepped through each screen one final time to add color to each component. For the purposes of this project I chose a mint green color with minimal other whites and greys to keep things simple and clean.

This produced the final mockups that would be presented to the team for review.

Tools Used

Wireframes were created in Balsamiq Mockups

Mockups were created in Adobe Photoshop

Project Outcomes

The result of this project was a set of mockups that could be reviewed by the relevant parties and feedback provided.

Following a few iterations of the design based on this feedback, a more design would be created that would then be taken by the development team in order to produce the final Advanced Search Tool feature.

Behance/Live URL

Advanced Search Tool – Behance