What if we Break the Search Box

Brief: Search experience is broken, fix it
Answer: What if we break the mental model?
Spoiler: A radical new approach based on stories
My role: Lead UX designer

When my boss asked me to look at the mobile search box for our website, I had no clue what problem I was going to face.

We all know what a search engine is and how to use it. For the last twenty years, Google has shaped our mental model in this way: if we seek for help to navigate on complex websites, the visual affordance of an empty box associated with a magnifying-glass is a solution. Even on mobile, the icon alone 🔎 is strong enough to help users in that kind of task. We also learnt what to type, mainly free text.

So what was wrong with our Search? Why do we need to re-design it? What were our audience’s perception?

To help me in this task, I use the Double Diamond technique: 
Discover, Define, Develop, Deliver.

I. Discover

1.1 Understand first
1.2 Gather facts
1.3 Spot the pain points

1.1 Understand first

Let’s start from the beginning and look at the image below.

On the top of the screen a great promise: Search over 3623 jobs. Followed by a green area with two white boxes, plus a grey one, probably inactive, an arrow and a call to action. 
We already have five invitations to tap. Hmm 🤔.

There is also an other problem. If you start typing, there is no predictive text. You also loose the context of the box. And worst, once you tap Search, the page is rendered without the search box anymore. Really against Google Search mechanism.

The inactive box is also a bad decision, will see later why.

The second part of the screen is textual. No visual hierarchy, heavy text, more to tap…

Again, this interface is asking for a lot of human’s attention.

I bet your first impression while landing on this page would be: wow, this is very noisy. Where do I start?

Google has tweaked our mind, as I mentioned earlier.

An almost blank page, a box with no label, a blue icon that attracts all the attention and that’s it. The Google Doodles about a mathematician 107th birthday is also something we know well.

Clean, easy to understand, minimalistic, users feel confident using it.

1.2 Time to gather data

Heat-maps using Hotjar is a good start.

Based on 10k users we see conflicts between the two boxes. The first 19% of people using keywords search won’t use the location box. Also the little numbers (9%, 5%, 2%) are saying that it’s not used enough. One of the hypothesis here could be:
- What if we delete the Search by block to see if the engagement increases in the main boxes.

Distance menu belongs to Location inputs. Numbers (19%, 6%) are clearly saying there is an issue here.

Also the score of the CTA button is really low. So what do people do?

I went to a different tool, still using Hotjar. Screen recordings. It’s horrible. I was slowly seeing why there were NOT using the search tool.

They are confused. They don’t understand what to do. They are leaving.😱

I watched every single recorded sessions we had. Obviously the problem became more clear: they don’t know what to type and how to use the three boxes. Too complicated? Hell yeah!

1.3 What are the pain points?

We worked with the Research Team to build 6 Personas. In collaboration with the product team, we focused on Becky. 
Becky likes speed, websites that are optimised for mobile. She is keen to try new things and communicate through digital channels.
For her, this experience

  • is not modern, neither useful, easy to use
  • is not optimised for mobile
  • and she can’t find anything because the tool seems broken

II. Define

2.1 What is a search box
2.2 Business analysis
2.3 Convention and trends

2.1 What is a search box?

Interesting question. Do I need to ask myself such question? Everybody knows what is a search box is. What are the affordance of a search box?

  • a box- Size, position, colour?
  • a label- Search suggestions, sentence, inside, outside?
  • a magnifying-glass- Flat design icon, realistic?
  • has a CTA- What kind of word we should use?
  • with a prompt or cursor- Blue, grey?
Users rely on a Search engine for most tasks. Typing on mobile force us to focus and people expect accuracy and good results.

A great search experience should have:

  • a box that takes the size of the screen. Above the fold, at the top of the screen
  • a label (Search) inside the box. To be proven or tested. I know I need to benchmark that point
  • a [flat design] icon for the magnifying-glass, people search for what they know
  • no CTA. A well-coded page uses type="search" to render the right keyboard.

There is also three steps for a single box:

Additional thoughts:
While typing users expect autosuggestions or to have access to a history of searches. Do we offer that? Nope.

Do we need several search boxes with different functionalities? Thanks to the data I have, I know they are confused by multiple entry points. Answer: no.

Do they read the meaning of each box carefully? No, they are on mobile, moving, distracted. They never touched the tab, the little arrow close to “Distance.”

2.2 Business Analysis?

I can’t share it. We are focusing on the Tap Through Rate indicators.

2.3 Convention and Trend?

I tried to use pttrns.com to benchmark mobile search conventions. I was so disappointed by the website. Do not pay for the pro version, most of their files stopped in 2016. Nothing from 2017 😤

I read also Nielsen Norman Group “User Experience for Mobile Apps and Sites Report”, an expensive document. The convention Norman Group defined are some times outdated, but it’s still relevant 75% of the time.

I end up making my own research.

Let’s sketch!

III. Develop

3.1 First solutions
3.2 Concept & quick build
3.3 Prototypes & Users Tests

3.1 First Solutions

I sketch mostly on paper first. It’s a time you don’t want to think about the tool. A pen and a paper are the best vehicle for transmitting ideas.

A strange idea came from nowhere while I was walking into a park.

Do I need to stick to a search box?
What if we break it? What could happen?

So I asked myself: Let’s challenge the search experience?

We have been trained by Google and al to use an input field who host infinite queries. Do I have infinite queries in my example?

No, we don’t have infinite queries. Instead of that people use few facets or keywords to search. Do we have a list of the most typed keywords?

I came back to my drawing pad and killed that concept below.

Because I wanted to tell a story, I quickly draw on a white board then on Sketch this idea: “My ideal job is as a [Role] for [Workplace teaching [Subject] in [Location].

No more confusion here. My hypothesis is as a teacher you will read this story. The chances are it doesn’t fit with who you are. So you will touch the UI and change facets.

Stories have many advantages. It tells you that I know you. Not perfectly but I did the hard work for you. If you’re here it’s because you work education. I don’t need to give you access to infinite queries.

Also I’m using one of the most important rule on mobile:

Let people interact with your interface first!

Don’t show them, don’t tell them, let them play. If you want to convince someone about a mobile app, service, product, put the damn smartphone into their palm and shut up. The minute they are starting to interact is a win.

Jobs done? Not yet, I need to challenge it.

3.2 Concept & quick build

I was obsess by this idea. What could be the best storytelling here? What could be the best affordances? How can I make it engaging, helpful and respectful of any teacher who is going to use it.

Let’s refine it a little. Remember, my goal is to give teachers a tool that is fast, modern, intuitive and easy to use.

I end up with this:

A story. “My ideal job is as a [Teacher] for [Secondary Students] teaching [English] in [London].

An hypothesis. If you’re not that person two options:
. you touch the interface and change the facets — happy path
. you don’t understand how it works and you leave — fail

A non-designed interface to see if people would understand without that much affordance (shadow).

The story was linked to a result list. To make it more realistic.

I build a prototype using MarvelApp, with a role-play invitation screen. Because the number of combinaison was too high, I took the option to ask testers to step into the shoes of someone else.

3.3 Prototypes & Users Tests

Some improvement were made since but it gives you a good sense of the interaction design. Also sorry for the colours, it was a bad idea 😇.

Cool embedded Marvel prototype

With this tool, we could now launch some user tests. At that stage, you don’t need to run large number tests — five people are enough. You’re trying to answer qualitatively speaking to an hypothesis that teachers will use the facets. That’s it.

After 5 “yes”, we can move on. What if I had 3 yes and 2 no. Well, you go back to your drawing board, watch again some data and recording sessions to see if you haven’t miss anything crucial.

IV. Deliver

4.1 Let’s build it
4.2 Launch
4.3 Quality control

My job is not finish at this stage. We need to work together, UI Designers and Engineers to establish a smooth transitions from concept to build.

I will update this Use Case once it’s done. I’m super excited to see it live in the palm of real teachers 🙌💪.

Thanks for reading.