Improving Search

At long last,

we're upgrading to elastic search! Updating the search bar has been highly requested by users for YEARS and somehow kept getting pushed because other areas had more importance. With that said, I'm glad we can finally upgrade the old, outdated, unfriendly, and elastic-less search function that customers don't use because it doesn't work well (+ somewhat useless now tbh).

Listening to the customers

Like many products, we have a community forum where users can ask questions and let us know issues they face while using our product. It's managed by our customer service and PM teams who organizes the features that are highly requested or areas that need updating based on user comments. Using this and feedback from our surveys, we took into account their personal problem areas they've encountered, giving us valuable information on aspects that need to be potentially added/fixed.

Discussing requirements with the PM

With that being said, the PMs and Architects provided rough, general requirements based on features requested by customers and ones based on our product while staying within our budget for this project. After some discussion with the team on what direction to go in, we landed on using inspiration from places our users are most familiar with and integrations they use with our product. We noted common features that could potentially be implemented and laid out a mind map based on our discussed topics and decisions.

Initial wireframes

Then, I went off to ideate potential solutions/designs that align with the PMs (business) needs and take into account features that would allow users to successfully find what they're looking from the most basic standpoint.

Since our search functionality only had a single results page with nothing fancy I was mainly starting from scratch. This is where the mind map came in handy! It helped outline areas that are more complex, determine possibilities for filters, and visualize how everything comes together.

From there, I created quick sketches in Figma, playing with different components and styles that could be used as the base model. Doing so allowed me to pick what features I liked within each sketch and figure out what would mesh well together, but also with the existing format.

My approach when designing and consulting the team

From the wireframes, I combined the features and components that would potentially work best. I looked at how these new designs would flow together and how it would flow with the layout of the product.

Since there's a lot of areas that intertwine, I needed to make sure filters and results were designed to work with the our system and not have areas that are missing filters or don't make any sense. I looked at the wireframes with these questions in mind:

Answering these questions helped show what I was constrained by and what direction(s) would be possible. After several low-fidelity iterations, I created a mid-fidelity based on the best design flows, in my opinion, for a secondary review to the team. This was to ensure I was following the brand's style, branding, and correct direction we wanted to go in as this was my first large project I worked on as the sole designer.

Unfortunately, the product's UI is still pretty outdated and would need a huge budget to completely update everything which means particular areas couldn't be changed. This was definitely a small hinderance along the way, but I had to take it for what it was. Fortunately, besides the style, the feedback from my UX manager and team were simple changes and I was able to combine the old UI with the new so that they worked together seamlessly.

Simple internal testing

After countless iterations, I went ahead and created a barebones prototype based on the latest, approved mockups. Since these releases are confidential, even to our internal workers, I only included the necessities in the testing prototype. With our UX team consisting of only 5 people, including myself, working on several other products, we're currently limited to testing internally.

The main accomplishments we wanted to achieve with this test was to see the approach users would take, is the overall layout and interface straightforward, and how easy is it to use (or confusing).

Challenges along the way

Since our UX design team was established within the last few years, our overall process is still being tweaked and improved for each of our products. That being said, user testing is slowly being implemented and understood by higher ups that it's necessary since we've received some negative feedback of issues and bugs on our previous releases. However, it's nice to see an older company, accepting that UX is more than just design and will improve the product in newer ways.

Collaborating with the dev team

I needed to make sure the product that's built out by the dev team is as expected in function and usability based on my notes in the report sent out.

Over a series of 4 weeks in demo meetings, there have been a few hiccups here and there. Mainly minor changes, requiring changes in the design due to lack of information we obtain from the back-end. Looking back, I didn't account for data that we store, gather, and load time parsing through data which led to the few issues we ran into. Although I spoke with the architects, it definitely slipped passed us, which can happen and something to remember to do for the next project!

Elastic search launch date?

We outsource our developers, so a few issues during QA testing arose after the release completion date. These few bugs will be fixed in the next couple of weeks prior to launching Elastic Search. Hopefully we get some great user feedback!

I definitely learned a lot from this project like working with architects and a whole development team instead of just 1 or 2 people. Also, solving the issues that arose throughout the project whether I was working around it or finding better solutions based on what it was. It was all fun, especially since this was my first major project as a full-time UX/UI designer!