As part of project commitment, I have been asked to explore solutions for the UI components and page layout. New insights and opportunities will be evaluated based on budget, resources and time during the ideation phase and before usere testing.
The client has an internal ux team who run monthly user testing and surveys on the product. We had an intial brainstormimg session on Skype to discuss the objectives of the project and the initial outcomes from the user testing and interviews.
I was given access to the latest user testing session report and quantitative data from a recent survey and google analytcs as well. The client was looking for someone to join the team and help them to:
Old page results layout
A Navigation bar - B Search bar & location - C Filters Sidebar - D Jobs Listing Results
1. Location and Cause
Location and Cause are often the first criteria that the userrs use to start the search exprience. "Cause" is labelled "Category" on the page page. So the users get confused and sometimes go back to the homepage to start a new search.
2. Keyword input
3. Location input
4. Salary Filter
- The salary filter has to narrow selections.
- Users care about minimum salary
They would like to set a minimum value rather than choose salary range
5. Standard vs Advanced
- Users don't understand the difference between standard and advanced search sicne they have idential filtering options.
- It is not straightforward how the filter panel works (accordion menu). Some users were struggling to understand how that works.
6. Category Filter
- Category label create confusions as it is labelled "Cause" on the homepage. So the users sometimes go back to the homepage to start a new search.
7. Apply Filter Button
The most critical issue on mobile is about the "apply filter" button because it is visible only if the the user swiep down the screen.
8. Refine Search
Users often tap in "refine search" thinking it will applied the filters but it's only plain text.
Lack of any visual clues to suggest what areas are clickable
Poor color contrast between the UI elements.
The client has done research internally, and we brainstormed together our findings. We discuss together the possible features and functionalities that could be implemented in the new site.
Some "features" and "ideas" were stored on the backlog for further development such as the two-panel layout because it required much time and resources even though it will have a high impact.
Also, the new search bar and filters were already a big change in the overall user experience, therefore implementing the two-panel layout might have been too much in one release.
*Update the two-panel layout is now live Sep 2019
There were three main ele,emts to focus on and improve:
I created a doc to write down all the features and functionalities to get a full overview of the whole search interaction. I defined the new set of filters and what were the labels and options to display.
The new layout does not have a sidebar. The filters option are placed below the "keyword" and "location" fields, and the whole search bar is sticky. This new approach will help to get a sense of connection between the keyword/location inputs and the filters. All the options are also visible above the folds, so they are more accessible.
The next step was to explore all the possible alternatives for the drop-down filters and create a set of different interactions for the keyword and location input.
Keyword input example:
- Mouse in, the system displays the 5 most popular search if it is the first time the user visits the site
- Mouse in, the system displays the 5 recent searches for returning users
- Typing in, the system displays suggested results
We had some brainstorming sessions to validate the possible solutions, and we defined the alternatives to test. So I created medium-fidelity wireframes with Sketch, and we tested the prototype in InVision. We iterate based on users feedback, and once we get to the final prototype, I created the polished high fidelity mockups.
Lastly I created the new UI KIT to handover the designs to the web developers.