Mockup of Apiphany's Core Module.
Node Graph & Interactions
How I designed a 0 to 1 Web product rapidly in an ambiguous high pressure startup environment & helped raise +6M.
my ROLE
I joined Apiphany as their Founding Product Designer in early 2024 shortly after their first shelter-in-place in San Francisco. I contributed through collaboration with Engineering team, Customer discovery, Team facilitation + an overwhelming amount of shelved branding ideas that still live scattered throughout my Figma files today.
problem space
Engineers spend countless hours solving (and many a times re-solving) product engineering issues, leading to a lengthy and inefficient issue resolution process that causes delays and costs more money for the businesses.
My Role
Product Designer
Teammate
Ben Larue
+ 14 others
Tools
Figma
Timeline
8 Months
Shipped
Yes
CHALLENGE
How might we help engineers to identify product engineering issues early in the process?
I was provided the following needs and constraints:
a way for Engineers to accomplish their tasks faster.
Create views to filter the entire product into key areas of attention.
a web interface must be able to show all product issues and scale across multiple products.
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 want to acknowledge this.
We're an early stage startup building a product that’s poised to be the first to enter its market. There were lots of design challenges and constraints when I joined the team, but the biggest one was…
This caused us to evolve the product in iterations. For me, this meant focusing design across three separate modules simultaneously throughout my time at the company.
CHALLENGE
How might we help engineers to solve product engineering issues early in the process?
Following were the needs and constraints for me:
identify core meaningful insights that can help Engineers accomplish their tasks faster.
create a solution to visualize all components, issues, risks and resolutions — in one view.
This was one of the most complex products that I have worked on as a designer since it involves data embedded into multiple layers and across several dimensions. Thanks to my education in Architecture & Computing, I was able to understand the landscape of the space I was working in quickly by studying BOM's (Bill of Materials), and Engineering Manuals for manufacturing processes.
RESEARCH
I worked closely with Engineers and SME's to understand the problem space…
I met with our external subject matter experts (SME's) - Patrick (Program Manager, Ford Motors) and Jeff (Chief Engineer, General Motors) regularly, interviewing them 4 days in a week to understand their pain points — this meant I was tasked with building things fast, producing high fidelity designs daily to get validation and product feedback.
Key User Stories:
As an Engineer, When I encounter an issue, I want to know the implications of changes on other components so I can make informed choices.
As an Engineer, When I encounter an issue, I want to know the implications of changes on other components so I can make informed choices.
As an Program Manager, When I come to office, I want to know health of my systems first so I can make informed proactive decisions.
INTERFACE design · ITERATIONS
Balancing Warp and …
Soon after I joined the team I was interviewing SME's - Patrick (Program Manager, Ford Motors) and Jeff (Chief Engineer, General Motors) 4 times a week to get product feedback. This meant I was tasked with breaking and building things fast to get validation and feedback.
We onboarded our first customers from Automotive and Robotics industries.
Minimalist navigation
Chunked lists
Minimalist navigation that simplifies the navigational structure, presenting only the most essential options to users. This pattern aims to reduce cognitive load by limiting choices and focusing user attention on key tasks or content.
PROGRESSIVE DISCLOSURE
Patterns for Navigating through different levels of information
I used Nested menus — a type of progressive disclosure pattern to organize navigation options into hierarchical levels. This makes the overall information architecture clearer and easier to navigate. Each menu item expands to reveal a set of sub-items, allowing people to drill down through the information architecture.
REDUCING COGNITIVE LOAD FOR COMPLEX DATA
Reducing Cognitive load in Interface for Engineers
I used Nested menus — a type of progressive disclosure pattern to organize navigation options into hierarchical levels. This makes the overall information architecture clearer and easier to navigate. Each menu item expands to reveal a set of sub-items, allowing people to drill down through the information architecture.
Steppers & Wizzards
COLLABORATION · cross polinating ideas
Balancing Warp and …
Soon after I joined the team I was interviewing SME's - Patrick (Program Manager, Ford Motors) and Jeff (Chief Engineer, General Motors) 4 times a week to get product feedback. This meant I was tasked with breaking and building things fast to get validation and feedback.
Pop up Modals vs Expandable Rows
interaction explorations
We often struggled to maintain product focus and debated key features.
After many rounds of iterations and reviews, I created a …, with a modular set of expandable tiles for sharing availability and scheduling meetings from anywhere on the computer.
Every time we had internal conflicts, focusing on the product vision and core user needs helped to bring us back to track. Presenting quick low-fidelity ideas were effective in bringing my team together and aligning them in next steps.
interaction explorations · SIMPLIFIED FORMS
We often struggled to maintain product focus and debated key features.
After many rounds of iterations and reviews, I created a …, with a modular set of expandable tiles for sharing availability and scheduling meetings from anywhere on the computer.
Every time we had internal conflicts, focusing on the product vision and core user needs helped to bring us back to track. Presenting quick low-fidelity ideas were effective in bringing my team together and aligning them in next steps.
Simplified Forms
Autosave and drafts
Simplified forms are designed to reduce cognitive load by minimizing the amount of information and number of decisions required from users. This pattern focuses on collecting only essential information, using smart defaults, and breaking complex forms into manageable steps.
interaction DESIGN · ACCESSIBILITY
NA
After many rounds of iterations and reviews, I created a …, with a modular set of expandable tiles for sharing availability and scheduling meetings from anywhere on the computer.
Every time we had internal conflicts, focusing on the product vision and core user needs helped to bring us back to track. Presenting quick low-fidelity ideas were effective in bringing my team together and aligning them in next steps.
Keyboard navigation
Color Contrast
Simplified forms are designed to reduce cognitive load by minimizing the amount of information and number of decisions required from users. This pattern focuses on collecting only essential information, using smart defaults, and breaking complex forms into manageable steps.
visual design
Establish clear hierarchy and emphasis through typography and color.
After many rounds of iterations and reviews, I created a …, with a modular set of expandable tiles for sharing availability and scheduling meetings from anywhere on the computer.
Every time we had internal conflicts, focusing on the product vision and core user needs helped to bring us back to track. Presenting quick low-fidelity ideas were effective in bringing my team together and aligning them in next steps.
Simplified Forms
Badges & Seals
Simplified forms are designed to reduce cognitive load by minimizing the amount of information and number of decisions required from users. This pattern focuses on collecting only essential information, using smart defaults, and breaking complex forms into manageable steps.
Badges and seals are visual symbols that represent achievements, affiliations, or certifications. In the context of user interfaces, they can be used to highlight user accomplishments, indicate verified accounts, or showcase third-party endorsements.
just-in-time learning
Navigating Complex Interactions through coding helped me develop solutions with developers.
After many rounds of iterations and reviews, I created a …, with a modular set of expandable tiles for sharing availability and scheduling meetings from anywhere on the computer.
Every time we had internal conflicts, focusing on the product vision and core user needs helped to bring us back to track. Presenting quick low-fidelity ideas were effective in bringing my team together and aligning them in next steps.
final deliverable
We often struggled to maintain product focus and debated key features.
After many rounds of iterations and reviews, I created a …, with a modular set of expandable tiles for sharing availability and scheduling meetings from anywhere on the computer.
Every time we had internal conflicts, focusing on the product vision and core user needs helped to bring us back to track. Presenting quick low-fidelity ideas were effective in bringing my team together and aligning them in next steps.
INTERFACE design · ITERATIONS · part 01
Balancing Warp and …
Soon after I joined the team I was interviewing SME's - Patrick (Program Manager, Ford Motors) and Jeff (Chief Engineer, General Motors) 4 times a week to get product feedback. This meant I was tasked with breaking and building things fast to get validation and feedback.
We onboarded our first customers from Automotive and Robotics industries.
Conflict
We often struggled to maintain product focus and debated key features.
In the first 2 weeks, I started going through previous customer calls, keeping track of all the pain points during the product engineering process. Soon, I realized I'm losing track of information and going down rabbit hole + my FigJam board was getting difficult to manage. What helped me tremendously was creating structured plans for information gathering, including time boxed research sessions and writing questions I need answer to before every research session.
Every time we had internal conflicts, focusing on the product vision and core user needs helped to bring us back to track. Presenting quick low-fidelity ideas were effective in bringing my team together and aligning them in next steps.
Takeaway & Reflection
Embracing the marathon mindset…
Soon after I joined the team I was interviewing SME's - Patrick (Program Manager, Ford Motors) and Jeff (Chief Engineer, General Motors) 4 times a week to get product feedback. This meant I was tasked with breaking and building things fast to get validation and feedback.
We onboarded our first customers from Automotive and Robotics industries.
Email: email@sdabas.com
©2024 sachin dabas
Home
Work
Info
Resume