Home
Work
Info
Resume
latest work
Designing Search Experience
How I designed a new Enterprise product rapidly in an ambiguous high pressure environment and helped secure over $6M.
As the Founding designer, I owned the whole design for the Apiphany's Product — from Research, UI Design, Customer Discovery and Team facilitation. I closely collaborated with the CEO, team of 14 AI Engineers + Developers, and Graphic Designer on daily basis.
This is my work on designing the AI Search experience working on a complex data problem in product engineering space.
TEAM
Ben Larue
+ 14 others
TOOLS
Figma
DisciplineS
Visual Design
TIMELINE
Mar, 2024 - Present
SHIPPED
Yes
Mockup of Apiphany's History Module.
Challenge
How might we help engineers to identify product engineering issues early in the process?
I was provided with following needs and constraints:
Identify user problems in issue resolution processes.
Identify key data points, that could help users in resolving the issues.
Design an interface for testing and validation.
CONSTRAINTS
Build fast or die…
Working as the only designer at an early-stage startup while moving to a new city brought its own set of personal and professional challenges. I'd be remiss to not mention here first that uncertainty, constantly changing business vision and priorities, were some of the tougher daily challenges.
I started with setting clear expectations each week, and then showing progress against them, hoping to building trust with my team on my way.
SUMMARY
User-focused Search to help engineers navigate, comprehend, and interact quickly with complex data.
AI Search
Search by Component, Make or Model
|
RECENT
Drive Shaft in Mustang
Suspension in Mustang
Differential bearing in Mustang
TOP ISSUES
Premature bearing wear due to excessive axial play
Drive Shaft in Mustang
Drive Shaft in Mustang
AI Search uses the meaning of the search query. It may summarize relevant results if they don’t exactly match the query.
AI Search
Search by Component, Make or Model
Auto-suggestions
Input — Scoped 'Browsing and Search' to tell users what they can do.
AI Capabilities: Helping users explore the limitations of AI Search during initial and early use so they build healthy AI habits & trust.
Tooltips
AI Search with auto-suggestions for customers — Ford Motors.
Data Tables, and Summarization.
Data Table
as Search output.
AI Summarization
Search & Filters
Incorporated branding into UI
Search is an important function for us, hence displayed prominently, as it can be the fastest route to discovery. The output for the Search is in form of Data Tables for easy scan-ability and matches with the real world convention of our users.
Users reported a 50% faster task completion time and described the updated side panel as ‘intuitive and easy to use.
Web Search
Tools to find key related information from the web.
Key User Story
Product Engineers work in siloed teams — with limited visibility into overall system and progress.
I found a lack of transparency in current Product Development processes from my research.
As an Engineer, when I encounter an issue, I want to know how we tackled similar issues in the past so I can make informed issue reports.
As an Engineer, when I encounter a previous solution,
I want to know associated design specifications so I can make informed issue reports.
With the goal to develop insight into why Engineers do what they do, I met with Subject Matter Experts (SME's) 4 out of 5 days every week — building stronger relationships with them. This also meant I had to build things fast, producing designs and prototypes daily to get product feedback, create design documentation for engineers, share progress with the CEO and develop plan for next steps.
Goal
Powerful, intuitive search experience.
It's pivotal to craft a positive impression by focusing on good usability heuristics, especially when designing for speed to reduce usability errors during user testing.
Designing to match real-world conventions of our users (aka Engineers) who work in Product Development.
Translating unorganized data from customers into clear systems.
Ensuring the AI-powered feature to provide clear expectations and feedback on it's action.
design approach
Search Heuristics & Audit
> I did an audit of 20+ Enterprise products, detailing everything from Search term used, relevancy, placeholder texts, auto-suggest, auto-complete, number of results, sorting & filtering, error states, and more.
AI Design Considerations
What considerations do I need to have for designing for AI? How do I design to enable collection, curation, and improvement of AI systems seamlessly for our product?
Enable user feedback for continuous improvement
Design for steerability
Set expectations so users can calibrate their trust in your AI system
design trade-offs & considerations
Crafting a Search Experience
A seemingly simple 'Search component' that turned out to have many parameters which heavily impacts the user experience.
Search by Component, Make or Model
|
RECENT
Drive Shaft in Mustang
Suspension in Mustang
Differential bearing in Mustang
TOP ISSUES
Premature bearing wear due to excessive axial play
Drive Shaft in Mustang
Drive Shaft in Mustang
AI Search uses the meaning of the search query. It may summarize relevant results if they don’t exactly match the query.
Input Field Explorations
Open entry text-field search did not provide value to our users since each search input can have multiple relationships because of the structure of the data.
84446306
|
Related
[Component] Differential bearing
[Sub-system] Drive shaft for Differential bearing
[Suspension] for Differential bearing
AI Search uses the meaning of the search query. It may summarize relevant results if they don’t exactly match the query.
Scoped Search: This pattern is better for our users since they know how items are categorized.
Auto-complete: This pattern is better for our users since inputs are embedded with hierarchical information.
Tooltip: For users who need support in using advanced search.
Highlighting the Search term provides users with context on why following results are shown.
Mockup showcasing a Search query using Component number.
84446306
|
Related
[Component] Differential bearing
[Sub-system] Drive shaft for Differential bearing
[Suspension] for Differential bearing
AI Search uses the meaning of the search query. It may summarize relevant results if they don’t exactly match the query.
Issue:
|
Related
[Component] Differential bearing
[Sub-system] Drive shaft for Differential bearing
[Suspension] for Differential bearing
AI Search uses the meaning of the search query. It may summarize relevant results if they don’t exactly match the query.
Explicit vs Implicit Search Patterns.
Search Results
Search results can have various layouts, and require
I decided to use Data Table to help groupings of key information making it easier for users to quickly scan and Sort data.
Data Tables to help improve scannability.
I decided to use Data Table to help users to quickly scan and Sort complex data. Tables are effective for our use-case as it displays exact values in a simple manner and allows for comparisons between individual units of complex data which is easier to understand.
I removed borders to remove visual noise.
Heavier weight competing with the data itself.
I played with multiple iterations to find a unique visual style, and balance visual elements like borders, row height, color, text, and line weight.
Data table to break data into discrete, manageable units, aiding information processing and recall.
Users have to take an extra action in order to access the search box, which increases the “cost” of interaction.
Side Panel
Filters
Relevancy, Sorting, Number of results, and Filtering
Filter Attributes when Engineers think of issues include Failure Mode, Component, Failure Condition and Failure Effect.
The layout design was dictated by amount of filters, visibility & scalability with spatial considerations. Filters laid out vertically are easier to scale as compared to horizontal. Which filters are open or closed are dictated by common user activity. Checkboxes in the form of a filter act as an action and filters can be applied immediately.
applied Visual Design
Direction & Style Guides
Without style, design risks losing impact, failing to connect the product's branding with its vision effectively. I used the design of our logo and branding guidelines as starting point to crafting the interface design for our product.
The upward arrow in the logo symbolizes action and forward momentum. The dark green color (#066755) from the logo evokes trust and reliability.
play with gradients
AI Search
Without style, design risks losing impact, failing to connect the product's branding with its vision effectively. I used the design of our logo and branding guidelines as starting point to crafting the interface design for our product.
The upward arrow in the logo symbolizes action and forward momentum. The dark green color (#066755) from the logo evokes trust and reliability.
Experimentation
Experimenting with different styles
Translating brand Identity into Interface Elements
Color — Cooler Neutral Colors which feel technical
Text
Text
Text
Interface Elements — The buttons use a sharp corner radius (5% / shorter edge length) maintaining consistent visual identity.
Text
Text
Text
Text
Typography — Squared off font 'Clear Sans' for all typefaces adding a sense of professionality and preciseness.
Iconography — I leveraged the sharp geometry of the logo and its bold, minimal aesthetic and introduced it in the elements like buttons, icons etc.
I streamlined the visual style of elements and overall product direction based on the branding document that I could use as raw material.
CONCLUSION
By focusing on a transparent and effective AI search we were able to show value to our first customers.
14/20 of beta users rated the results from the search feature as “highly relevant” or “perfect match” showcasing the effectiveness of the search inputs, filters and results.
Task success rate improved from 40% to 85% after implementing sidebar with AI Summarization and Specifications, showcasing effective engagement and adoption of our platform.
High Satisfaction scores from Qualitative feedback showed that 8/10 users described the feature as “helpful” or “essential” to their workflow.
SIGNIFICANT SETBACKS
We often struggled to maintain product focus and debated key features!!
When I joined the team, I realized that there is misalignment between members of my team on many matters, often causing misalignment & releasing half-baked features or communication issues between engineering and CEO.
I was uniquely positioned to work closely with the user and business goals, which helped me in presenting ideas that could solve both ends of the problem. This helped in effectively bringing my team together and aligning them in next steps.
What helped me tremendously was creating structured plans for meetings, including time boxed research/feedback sessions and writing questions I need answer to before every session.
LEARNINGS & TakeawayS
Embracing the marathon mindset…
Working in a Startup helped me in crafting my self learning, team facilitation and rapid designing skills. Because of a complex system, it was hard to break the mindset of data base thinking and move to user focussed mindset, but it turned out well in the end after iterations after iterations of experiments.
Nurturing good relationships with our Stakeholders, helped me when I needed support like getting product feedback before an unexpected customer meeting.
Working with the CEO, I learnt embracing iterative improvement. Instead of aiming for perfection in one go, we met regularly focusing on small, consistent improvements over time.
What would i do differently
Reach out to learn more about the project.
NEXT PROJECT
< All Projects
Node Visualization >
Email: email@sdabas.com
©2024 sachin dabas