ENTERPRISE AI FOR BUSINESSES
Billions of Manufacturing data points now made actionable.
Crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.
Button A
12k
Leonard Krasner
@leonardkrasner
View
Floyd Miles
@floydmiles
View
Emily Selman
@emilyselman
View
View all
00:51
55:43
Mass
Cost
Time
v3.0
Newsletter
Last message sent an hour ago
621 users
Existing customers
Last message sent an hour ago
1200 users
Light
Dark
System
Assigned to
Tom Cook
Wade Cooper
Arlene Mccoy
Tom Cook
Devon Webb
Recent searches
Stealth Startup's Style Guides
Created User Interfaces working as Founding designer in 0 to 1 space.
My Role
Product Designer
Team
Founder + 14 others
Tools
Figma
Lottie
Timeline
2024-Present
DISCIPLINE
Visual Design
UI Design
Description
How I designed a new Enterprise product, working rapidly in an ambiguous and high pressure environment, which resulted in helping our business secure over $6M.
MY ROLE
As a Founding designer, I owned the entire design for the Apiphany's Product — Research, UX/UI Design, Customer Discovery and Team facilitation. I closely collaborated with the CEO, Director of Engineering, a team of 14 AI Engineers + Developers, and a Graphic Designer on daily basis.
CONTEXT
Working as a designer on a data heavy product at an early-stage startup while moving to a new city brought its own set of personal and professional challenges. It would be incomplete to not mention here that some of the most significant challenges were navigating through uncertainty, building rapidly, and constantly adapting business vision and priorities.
Index
· Intro
· Intro
· Intro
· Intro
Challenge
Create a consistent visual language across entire product.
How might I help to create a new and consistent design language?
I worked in tandem with CEO and freelance graphic designer to create following needs and constraints:
Weave branding into the product.
Create style guides, interaction patterns and color palettes.
Create a scalable small design system that we can use.
brandING goals
A Powerful Search to help users (aka product engineers) interact quickly with complex data.
Tooltips
AI Search with auto-suggestions & filters.
color
Brand + Contextual colors
❌
Black: Not a best color to differentiate from competitors.
❌
Blue: Most harmless, unopinionated color. It is also the lowest luminosity color and hence contrasts great with white but usually doesn't convey a targeted user market.
✅
Teal: Unique brand color, balance of green and blue tones, stands out from other AI competitors.
Reasoning — The goal of the brand color is to set our product apart. From the three options, provided by the graphic designer, I convinced our team to opt for unique dark teal shade as it sets us apart from our competitors.
Monohue
Data tables focused on what's important to the users with less visual clutter.
Two Brand Colors
The output for the Search is in form of Data Tables that is easy for scan-ability and matches with the real world convention of our users.
Typography
Inter typeface
AI Summarization saves users time and allows to get a quick glance over the results.
Buttons
AI Summarization saves users time and allows to get a quick glance over the results.
Buttons
AI Summarization saves users time and allows to get a quick glance over the results.
Gradients
Radial gradients
Linear gradients
AI Summarization saves users time and allows to get a quick glance over the results.
UI explorations
Layout Iterations
Based on the searched issue or component, the system finds related results.
Tooltips
AI Search with auto-suggestions for customers — Ford Motors.
Work
Home
About
Contact
approach
Focusing on Geometry and Precision
Approach — With the goal to develop insight into why Engineers do what they do, I met daily with Subject Matter Experts (SME's) with a goal to understand the space and problems. This also meant I had to design things fast, producing solutions daily to get product feedback, create design documentation for engineers, share progress with the CEO and develop plan for next steps.
DESIGN 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 testing.
Designing to match real-world conventions of our users (aka Engineers).
Translating unorganized data from customers into clear systems.
Ensuring the AI-powered feature to provide clear expectations and feedback on it's action.
design trade-offs & considerations
Crafting a Search Experience
Apiphany’s search feature is super important because it lets users quickly find issues they’ve already looked at, but also discover new ones.
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
The goal of the input field is to help the user narrow down the results to sub-lists, they want to individually browse through and then they go item by item looking for the one that they want.
Cards are visually engaging and better suited for showcasing multimedia content and allow users to focus on one result at a time.
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.
Search Results
What are the users trying to accomplish through the table?
Cards are visually engaging and better suited for showcasing multimedia content and allow users to focus on one result at a time.
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.
Filters
Cards are visually engaging and better suited for showcasing multimedia content and allow users to focus on one result at a time.
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.
Unused ideas and rationale
Cards are visually engaging, better suited for showcasing multimedia content and allow users to focus on one result at a time, but it’s harder to directly compare items since details are spread out..
Cards are visually engaging and better suited for showcasing multimedia content and allow users to focus on one result at a time.
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.
VISUAL DESIGN
Weaving Branding with the Product Interface
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 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.
Tooltips
Color — Cooler Neutral Colors which feel technical
Interface Elements — The buttons use a sharp corner radius (5% / shorter edge length) maintaining consistent visual identity.
Text
Text
Text
Text
AI Search with auto-suggestions for customers — Ford Motors.
Tooltips
Color — Cooler Neutral Colors which feel technical
Iconography — I leveraged the sharp geometry of the logo and its bold, minimal aesthetic and introduced it in the elements like buttons, icons etc.
Tooltips
Color — Cooler Neutral Colors which feel technical
Michael S.
Iconography — I leveraged the sharp geometry of the logo and its bold, minimal aesthetic and introduced it in the elements like buttons, icons etc.
Granular UI problems
Alignment & Balance
Michael S.
Michael S.
8px space from icon to edge
Before (unbalanced)
After (balanced)
Added 4px left padding
Icons
I encountered an alignment issue while working on the design of the top bar — the 20x20 icons (marked in red) sit inconsistently inside the buttons because the menu button has 8px left and right padding as compared to 'user icons' with only 4dp internal padding, because of its shape. Adding a 4px left padding to the button fixed this alignment issue.
Before (text aligning with icon)
After (text aligning with text)
Closed
Closed
Closed
Closed
Status
Status
In the data table, the text alignment of the header looks odd when aligned with the graphic. The reason is that although 'icon and text' belong to the same cell, they are perceived visually differently and the sense of alignment is better when text is aligned with text. Hanging punctuation in typography is a great example of this problem.
Before (text aligning with icon)
After (text aligning with text)
Closed
Closed
Closed
Closed
Status
Status
In the data table, the filtering rules for table comes with complexity. Every time we have 2 values from the same field, the filters apply with either value 1 "OR" value 2. However, if the search is across 2 fields, the filter apply on value 1 "AND" value 2.
lists and tables problem & TRADEOFFS
How can I allow a user to take an action without a visually dominant UI elements?
I hypothesized variety of ways of solving this problem:
With something like a drop down, if we lighten it, it looks like disabled.
Option 01 — Lighten the controls
Option 2 — Solve through interaction by making the actions available on hover. I actually like this solution quite a bit, but it has a tradeoff. It is less accessible since the accessibility tools wont be able to label all the buttons making it impossible to go to the buttons directly. However we can still solve this using keyboard shortcuts, and make the buttons available, but it is not an intuitive solution.
Option 3 — Kebab menu next to each row which is less dominant but it would work best for scenarios with multiple actions. For our use case, I needed a much simpler solution.
Option 4 — Integrated tags and dropdown
CONCLUSION & RESULTS
By focusing on a transparent AI search that "meets the users where they are at" we were able to show value of our product 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.
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 worked? Conversations over Presentations.
I found that the best way for us to navigate the uncertainty was to spend more time discussing what works vs presenting the entire design work in one go. I used a simple approach — design individual parts, discuss and weave the parts that worked i.e. make the design work.
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.
