Designing with search data?

[eklem]

There is a lot of talk about designing with data. One of the last examples is how you can connect the headless CMS Sanity.io with the interaction design program Sketch (Through Craft's Invision plugin). It's a good way of bridging ideas with reality. You get to understand how your design look with real content?

But what about search solutions. Because you don't fully know how your search algorithm will work, and your content can come from several sources, it's even harder to understand how your ideas will work in real life. Also, designers don't know search functionality that well. And you depend on what users type in your application. Which words they use, what filters they are triggered by and click on.

The idea is to have search-index run in or together with i.e. Adobe XD. Hopefully in the prototype part, so you can have an actually running search engine in your design and prototype tool.

[eklem]

And having search-index running in the design tool would also make it easier to choose that one over other solutions, since you already know it.

[eklem]

Read up on Adobe XD's 3. party plugin-stuff and see what's needed.

[eklem]

What do you actually need?

1. Data indexing (and deleting)
2. Search query + results
3. Matcher query + results
4. Filtering (categorize and buckets)
5. Number of docs in index
6. Number of results
7. Hit highlighting

Proof of concept is 1 & 2. Beta if you add number 3.

[eklem]

For a minimum viable product: Hopefully, Adobe XD's plugin-stuff will be a webapp's and that webapp is allowed to deliver JSON to Adobe XD. Then you can do search, matcher and filter queries and get some JSON back that you can feed to different fields in a group and then do "Repeat Grid" to show more JSON objects.

If so, something like searchnow.xyz would be a good match.

[eklem]

Also, the proof of concept just needs

• a button to upload an array of objects
• an input field where you can dump a valid JSON query

Deletion can happen through inspector or something...

Each return stream needs a way to input a query.

[eklem]

If I get a proof of concept working, apply for money!

[eklem]

Could tie in with getting data from sanity.io

[eklem]

And, for the future: If the prototype could contain a real search engine, it would be super cool!

[eklem]

User stories

As a designer I want to:

• store queries to easily access different search results when designing a search UI
• see all types of search results for one query so I can create/design filters, autosuggest, number of hits, regular search results, etc.
• change stored queries and sync already used results with my design
• delete stored queries to clean up when iterating my design
• have a working search engine in prototype-mode so it's easy to test both design and data

[eklem]

Make this part of nowsearch.xyz, i.e. designwith.nowsearch.xyz

[eklem]

https://github.com/eklem/nowsearch.xyz/issues/15

[eklem]

Blogpost + demo-video on the concept: Designing with search data

[eklem]

Changing from Adobe XD to Figma. Needed dependencies:

• search-index
• memory-level
• batr

Need to bundle/build it to a UMD version I think, so batr is needed also.

[eklem]

https://github.com/fergiemcdowall/search-index/blob/master/test/src/memory-level-test.js