23 / Search
Quixey.
The problem
Quixey provided the search engine for apps. People described in natural language what they wanted to do, and Quixey's Functional Search pulled app information from review sites, blogs, social media sites and other sources to find a match. It had been built for Western languages, where the order of words in a search does not matter.
Quixey wanted to expand into China, and there Functional Search needed users to add terms one by one to work correctly. Typing a full descriptive query on a phone is slow in any language, and a search that works only when terms arrive in a particular way would feel broken. The concept needed to fit the way Functional Search actually worked and still feel quick on a phone.
The approach
I worked with Quixey's China-based product team, as a freelancer, covering UX, visual design, prototyping, branding and motion graphics.
- 01
Starting from the constraint
I started with the limit before drawing a screen. Functional Search wanted terms added one at a time in China, and typing is the slow part of mobile search. If the product had to ask for terms one by one, the design should make each one a single touch. That decision shaped the rest of the work.
- 02
Sketching the first idea
I sketched a results list with a round plus button parked in the bottom corner, close to the thumb. Search sat at the top and the results ran underneath. The button was the way in to adding another term. Putting it where a thumb rests meant a person could keep one hand on the phone.
First sketch of the plus button. - 03
Grayscale wireframes
I wireframed four screens in grayscale: the home screen, a search for a movie character with the menu open, the narrowed results, and a product page. Gray kept the China-based team on behavior. The same four screens later got color, so we could compare early and final states side by side.
Earlier states of the concept. - 04
Gesture storyboard
To explain the thumb wheel I drew a ten-frame strip with a hand in each frame. The user searches for Ironman, presses the plus button to open the wheel, taps a character for movie, then one for poster. Each tap adds a term to the query, and the results narrow until a product page opens.
Gesture sequence. - 05
Color, brand and assets
In color, the wheel became an orange half dial rising from the bottom edge, with a dark center plus button. I built a sheet of assets: the search bar in several states, the home icons, buttons and the wheel at each stage of opening. It gave the product team parts to prototype with.
Radial menu design assets. - 06
The presentation
I put the concept into a presentation with motion graphics showing the wheel opening and the results narrowing. It was written to be understood quickly by people who had not been in our working sessions. I wanted the idea to make sense in the first minute, without anyone explaining Functional Search.
The solution
The concept is a radial menu, or thumb wheel, for Chinese-language app search. A person starts with one term or character. A plus button in the bottom corner opens a half-circle wheel of suggested characters. Tapping one adds it to the search, the results narrow, and the wheel can open again for the next term. A few taps take someone from a broad search to a specific product page.
The design idea was to ask for only one term at a time and to make suggestions do the typing. Functional Search needed terms added one by one, and the wheel turned that need into the interface instead of a workaround. People never faced a blank query box that needed a full description.
What I delivered
- Radial thumb wheel concept for the Chinese market
- Grayscale and full-color screen designs
- Gesture storyboard of the full search
- Design asset sheet with icons, search bar and wheel states
- Branding and motion graphics
- Presentation for Quixey
Value added
For people using it
Searching took a few taps with one thumb, with suggestions offered at each step so people did not have to type a long query on a small screen.
For the business
Quixey had a concrete, demonstrable answer to taking Functional Search into China. The designs and presentation went into its funding conversation with Alibaba.
For the team
The China-based product team got a gesture storyboard, wireframes and an asset sheet. They could argue about specific frames and build from named parts instead of from a description.
The result
Quixey raised $50M from Alibaba, using these designs and presentation, only weeks after the project was completed. The concept was built for the Chinese market and shown to Quixey as a working idea.
Results
- $50MRaised by Quixey from Alibaba, using these designs and presentation, only weeks after the project was completed
What I took from it
I would again begin with the constraint a product cannot get around. For Quixey it was how Functional Search took terms, and designing around it gave the concept a reason to exist. I would also write the presentation as early as the wireframes, because it tested the idea on a stranger.
Background
Quixey was a Mountain View company founded in 2009 that built a search engine for finding mobile apps based on what a person wants to do. On October 3, 2013, it announced a $50 million Series C led by Alibaba Group. In October 2014 it became the sole app search provider on Alibaba's YunOS and promoted a standard called AppURL for searching inside apps. The company shut down in 2017.