DialTunes
Try it out here :) https://dialtunes.vercel.app/
While digging through my mom's drawers to find a spare phone charger for a trip I was taking, I happened to come across my old iPod I had in middle school. I got hit with a wave of nostalgia, that iPod is what introduced me to music for the first time at 13 years old. I felt inspired and created a digital version of the analog device that brought me so much joy as a child, with a more modern screen interface and featuring recreations of the same doodles found on the original.
My Role
Product Designer,
Developer
Timeline
August 2026 (1 week)
My Tasks
Product Design
Vibe Coding
Prototyping
Drawing
Listening to Music!
Tools
Figma
Claude Code
Procreate
Spotify API
Vercel
DialTunes Demo
Drag the wheel to scroll, press the center button to select, and use MENU to go back. A clicking haptic gives feedback to a successful action. Haptics can be turned off.
The Now Playing screen was updated with a modern UI, the background tints itself to match the album art.
You can switch between iPod shell colors and light and dark modes.
DialTunes Demo
Drag the wheel to scroll, press the center button to select, and use MENU to go back. A clicking haptic gives feedback to a successful action. Haptics can be turned off.
The Now Playing screen was updated with a modern UI, the background tints itself to match the album art.
You can switch between iPod shell colors and light and dark modes.
Constraints and Solutions
Spotify’s development mode only lets a maximum of 5 accounts log in. It can’t skip tracks or let a user log into their own account, which is a bit of a bummer but there's not much I can do to change the API. I added a no-login demo that uses Spotify’s embed player, which plays 20-30 second previews.
I developed this with personal library of about 5,000 songs which Spotify kept rate-limiting if I tried to load them at once, So I pivoted to loading 50 at a time with more songs loading in as you scroll. Playback had to send only a window of 100 songs, not the whole playlist.
The embed player reloads when you switch playlists, so playback waits for it to finish loading.
The embed doesn’t include artist names which I didn't like. A small serverless Vercel function reads them from Spotify’s public track page and displays the artist name for the demo version.
Spotify requires an exact redirect address, so the app has to run from its live URL, not from a file.
NASA Small Spacecraft Systems Web App Redesign
I led the design of a 6-tool, 54 screen NASA research platform while teaching my team what product design was along the way. Satellite engineers faced two issues: tool fragmentation and scattered information. Core features lived in separate, inconsistently designed systems, some abandoned mid-build, some copied from generic templates, none built with a designer's input.
Through an honors course at SJSU I partnered with the NASA Ames Research Center as the sole designer on a 5 person team. My teammates had no prior product design experience. We faced challenges including unclear stakeholder communication and a month long federal government shutdown which took away access to both our stakeholder and all of our code and source files.
Throughout 8 months, I redesigned the platform end-to-end: a spacecraft configurator, a testing facility matcher, 2 data visualization tools, and I spearheaded the creation of an AI chatbot to help less experienced users navigate the highly technical satellite design process by providing context for any step as needed.
My Role
UX Designer, Researcher & Project Team Lead
Worked with: 2 engineers, 1 PM
Timeline
August 2025 - May 2026
My Tasks
Product Design
Design System
XFN collaboration
Prototyping & development
User Research
Tools
Figma,
Figma MCP
Codex
Claude Code
Adobe Illustrator
My Contributions
I Led the Vision For a New, Unified, User Friendly Satellite Engineering Platform
1
Design
I owned the end-to-end redesign across 6 interactive spacecraft design tools, built a unified design system, and integrated an AI chatbot.
2
Advocacy
I ran several UX workshops to build shared design literacy including during a period when our usual project files were inaccessible.
3
Resilience
When a government shutdown cut off our stakeholder and code, I kept prototyping and testing ideas with Codex, Claude, and Figma MCP.
Context
What Exactly Am I Redesigning? Why?
The SOA (state-of-the-art) Hub Web Application extends the annual SOA Report, published by NASA Ames's Small Spacecraft Systems Virtual Institute to help engineers, researchers, and students design and validate small satellites using real, documented components.
The web platform meant to bring that report to life had never been treated as a real product. Different teams built it in pieces over time, and some tools were left as unfinished demos on a leftover template that didn't even connect to our main codebase.
The Core Problem
The Platform Was Too Fragmented to Trust, and Too Complicated to Use.
Component data, facility matching, and spacecraft configuration each lived in different sections that didn't share a visual language, a navigation pattern, or even basic safety nets. Users could lose an entire multi-step configuration with one misclick and no warning. On top of that, every interactive tool assumed a user background in aerospace.
Primary Design Goal
Empower the User
The legacy design fought its users. Our goal was to make the platform work for users ranging from a first-time student to a seasoned engineer by building a design system, restructuring information-dense tools, and, most significantly, using AI to make the technical content digestible to anyone, anytime, anyplace!
How Might We Redesign the NASA S3VI Web App to Optimize User Experience and Lower the Barrier to Entry for Small Spacecraft Design?
User Research & Discovery
What Did NASA Engineers Really Want?
My team had 0 experience with small satellites or aerospace products. In order to gauge current sentiment outside of my own perspective, I asked my project sponsor to coordinate live product walkthroughs and interviews with other 13 NASA officials and engineers on my behalf. I discovered:
The small spacecraft design tool is the marquee feature of the web app, a first of its kind tool that allows engineers to digitally test various satellite builds with components that NASA already has access to, theoretically cutting blueprint-to-launch time dramatically.
The report was 476 pages long. The platform needs to be able to condense that content and allow users to make decisions with the data as quickly as possible, so multiple ways to compare information was necessary.
Currently, the platform's code was working but the UX for both engineer and novice was flat out not enjoyable.
Design System Constraint
Interviews with the external engineers who maintained the platform's backend led us to Material UI as the component library. As a React library, it was the natural fit for our developers, and with a 2-engineer team and no frontend headcount to spare, its pre-built components saved me time building the design system
Legacy Platform Audit
With better grounding in the goals of the project and its users, I conducted a tool-by-tool audit of the existing web app. (Screenshots below are only part of the full audit, there were around 30 different total screens).
Landing Page
+
The nav bar split the interactive tools into two different sections that correspond to their intended usage.
-
Lack of any entry points to interactive tools, mostly marketing / intro copy.
-
The Design Tool, the web app's premier tool, is not featured at all. The only way to access it is from the nav bar.
Subsystems Explorer (Individual SmallSat Component Data Tables)
-
Filtering system built entirely from individual text entry boxes, making filtration bloated and as slow as simply scrolling.
-
No way to show or hide columns as needed, certain components have over 20 unique columns of data.
-
Raw, unformatted cell data and column headers that wrap across 4+ lines hamper legibility.
Small Spacecraft Design Tool (Automated Version)
-
29 text entry fields as part of one form increases cognitive load and overwhelms the user.
-
No grouping of different elements, unrelated categories all sit next to each other.
-
The CLEAR button (destructive action) is placed where the complete button usually is in traditional forms guiding the user to undo their progress rather than submit it.
Exploration and Iteration
Every interactive tool went through several rounds to find a "goldilocks" balance of pleasant experience and useful output. Here is a glimpse into automated Design Tool's journey.
Version 1
+
Categorized steps and a dotted progress bar replaced the legacy 29-field input wall.
-
No safe Exit feature, only an icon-only home button that returned the user to the start screen.
Version 2
+
A new Exit gave users a safe way out. A Back button allowed users further control over form navigation.
-
Users stated that the segmented dot progress bar was distracting.
My Redesign Solutions
Danial's Course Correction
Form Design
I incorporated progressive disclosure – dividing information across multiple screens by category, creating a 10 step form with a progress bar so users always know where they stand.
This design was repeated for other form based tools like the Testing Facility Finder and Manual Spacecraft Design Process.
The SOA Mission Assistant
The SOA Mission Assistant is how I made dense technical content accessible to all users. Trained on NASA's own Small Spacecraft Report data, it explains complex terminology in plain language, whenever a user needs it.
Chatbot Design
In addition to simplifying complex small satellite content, the SOA Mission Assistant adapts to context.
The assistant also adapts to context: suggested questions change by screen, so landing page prompts differ from those mid-configuration in the Design Tool or in the Subsystems Explorer.
A floating action button keeps it reachable from anywhere on the platform.
Component Metric Analyzer (Graphical Analysis Tool)
Before
-
No restriction on what the user could compare, charts with no real analytical value could be easily produced.
-
The output had the X and Y axes cropped off with various comparisons, making results harder to understand. The legend was detached from the graph.
-
The hero section and large graph dimension buttons competed for a user's attention before the primary action.
After
+
Introduced chips to separate spacecraft subsystems by category, ensuring the creation of meaningful graphical outputs.
+
Added a toggle to compare either two metrics within one component or the same metric across two different components, preventing valueless pairings.
+
Code reconfiguring ensured the legend was a part of the graph and there was no axis cropping.
Subsystems Explorer (Component Data Tables)
Revamped Searching and Filtering
+
Replaced 12+ free-text 'Filter by...' boxes with a functional search and structured, removable, stackable filters.
Column Visibility
+
Implemented column visibility and ascending/descending sorting controls for individual columns.
Testing Facility Finder (Matcher Tool)
Before
-
Results table regurgitates every input field the user filled out as its own column
-
No hierarchy for the matching facilities
After
+
Completing the form displays a dedicated results screen with search and filtering
+
A match strength ranking is introduced next to each facility and color coded for easier scanning
Did It Work?
User Testing Outcomes
The process of creating the SOA Hub was always collaborative. Throughout various iterations of the web app, I led user testing with 13 NASA officials, designers, developers, and small spacecraft engineers with the help of my project sponsor. Their feedback shaped the designs throughout.
A/B Testing
Users would be sent different iterations to test and evaluate as I worked on the interactive tools.
Post Test Survey
I created multiple surveys for internal NASA testing that gathered participants' reactions right after each walkthrough.
In-person Walkthroughs
When schedules aligned, we would have the chance to visit NASA Ames and conduct in-person testing on prototypes.
Universal Chatbot Adoption
Every participant opened the chatbot at least once while using each tool. Seasoned spacecraft engineers rarely relied on it, novice users relied on it for nearly every step. 13/13 users preferred having the chatbot available to not.
Less Experienced Users Spent Nearly 6x Longer Per Form
Most of this increased time was caused by chatbot lookups on unfamiliar terminology before proceeding to the next field. The chatbot allowed novice users to successfully use the tools, but constant questioning occurs throughout.
Time-on-Task Rose After Pagination
Segmenting the single-page legacy form into steps increased overall time-on-task compared to before. Interviews found this to be more deliberate engagement per step, especially with additional context coming from the chatbot.
Overall, users expressed verbal satisfaction with the platform. Pagination and the chatbot were the consensus favorite features, users stated they enjoyed the feeling of the content being far more digestible after my redesign.
Challenges
Staying Resilient
Stakeholder Alignment
Communication with our project sponsor was sporadic, and we started without a unified vision. I set direction early to keep the project moving by coordinating user interviews, sprint planning, and conducting in-person user testing.
The Government Shutdown
The longest federal govt. shutdown in US history (Oct. 1 - Nov. 12, 2025) removed our stakeholder, code, and NASA access with no warning or return date. I taught my engineers design concepts and planned how they'd fit the frontend code I'd saved during that time, so we hit the ground running when access returned.
UX Advocacy
None of my teammates or stakeholders had UX design experience, and user research wasn't in the original brief, so advocacy had to be the design work itself. I ran hands-on workshops to build shared design literacy, and explaining why a change helped users, not just what changed, helped earn buy-in.
Reflection and Learnings
1
Showing Work Early and Often
Alignment decays between check-ins. Sharing progress all throughout the project lifecycle, rather than at the end of an iteration, kept leadership, PM, and engineering in the loop and bought in the whole way through, especially important for a team that did not see the value of design at first.
2
Making Tradeoffs
Splitting the forms into steps traded raw speed for deliberate engagement: time-on-task went up, but users said the content felt far more digestible. The chatbot was a late, unplanned feature we had to sprint to finish, but it proved to be essential for bridging the gap for novice users.
3
Prioritization
Being the lead designer meant I was responsible for a LOT. 6 interactive tools, a new visual language, design advocacy, and user testing all at once. This heavy workload taught me the value of strict prioritization. I focused my effort only on features that delivered the highest, most valuable impact for our users first.
Sponsor Feedback
POV: Working with Danial
Deputy Director : Small Spacecraft Systems Virtual Institute
NASA Ames Research Center
Craig Burkhard
“Danial did a fantastic job redesigning our interactive platform. He showed great leadership guiding the team through the government shutdown. When the team experienced unexpected challenges, they always found solutions to overcome those challenges. The design tool will have a significant impact on how small spacecraft will be designed in the future. The UI/UX modifications by Danial will allow for a significantly more positive experience for the user. I would love to work with him again in the future.”
NASA Small Spacecraft Systems Web App Redesign
I led the design of a 6-tool, 54 screen NASA research platform while teaching my team what product design was along the way. Satellite engineers faced two issues: tool fragmentation and scattered information. Core features lived in separate, inconsistently designed systems, some abandoned mid-build, some copied from generic templates, none built with a designer's input.
Through an honors course at SJSU I partnered with the NASA Ames Research Center as the sole designer on a 5 person team. My teammates had no prior product design experience. We faced challenges including unclear stakeholder communication and a month long federal government shutdown which took away access to both our stakeholder and all of our code and source files.
Throughout 8 months, I redesigned the platform end-to-end: a spacecraft configurator, a testing facility matcher, 2 data visualization tools, and I spearheaded the creation of an AI chatbot to help less experienced users navigate the highly technical satellite design process by providing context for any step as needed.
My Role
UX Designer, Researcher & Project Team Lead
Worked with: 2 engineers, 1 PM
Timeline
August 2025 - May 2026
My Tasks
Product Design
Design System
XFN collaboration
Prototyping & development
User Research
Tools
Figma,
Figma MCP
Codex
Claude Code
Adobe Illustrator
My Contributions
I Led the Vision For a New, Unified, User Friendly Satellite Engineering Platform
1
Design
I owned the end-to-end redesign across 6 interactive spacecraft design tools, built a unified design system, and integrated an AI chatbot.
2
Advocacy
I ran several UX workshops to build shared design literacy including during a period when our usual project files were inaccessible.
3
Resilience
When a government shutdown cut off our stakeholder and code, I kept prototyping and testing ideas with Codex, Claude, and Figma MCP.
Context
What Exactly Am I Redesigning? Why?
The SOA (state-of-the-art) Hub Web Application extends the annual SOA Report, published by NASA Ames's Small Spacecraft Systems Virtual Institute to help engineers, researchers, and students design and validate small satellites using real, documented components.
The web platform meant to bring that report to life had never been treated as a real product. Different teams built it in pieces over time, and some tools were left as unfinished demos on a leftover template that didn't even connect to our main codebase.
The Core Problem
The Platform Was Too Fragmented to Trust, and Too Complicated to Use.
Component data, facility matching, and spacecraft configuration each lived in different sections that didn't share a visual language, a navigation pattern, or even basic safety nets. Users could lose an entire multi-step configuration with one misclick and no warning. On top of that, every interactive tool assumed a user background in aerospace.
Primary Design Goal
Empower the User
The legacy design fought its users. Our goal was to make the platform work for users ranging from a first-time student to a seasoned engineer by building a design system, restructuring information-dense tools, and, most significantly, using AI to make the technical content digestible to anyone, anytime, anyplace!
How Might We Redesign the NASA S3VI Web App to Optimize User Experience and Lower the Barrier to Entry for Small Spacecraft Design?
User Research & Discovery
What Did NASA Engineers Really Want?
My team had 0 experience with small satellites or aerospace products. In order to gauge current sentiment outside of my own perspective, I asked my project sponsor to coordinate live product walkthroughs and interviews with other 13 NASA officials and engineers on my behalf. I discovered:
The small spacecraft design tool is the marquee feature of the web app, a first of its kind tool that allows engineers to digitally test various satellite builds with components that NASA already has access to, theoretically cutting blueprint-to-launch time dramatically.
The report was 476 pages long. The platform needs to be able to condense that content and allow users to make decisions with the data as quickly as possible, so multiple ways to compare information was necessary.
Currently, the platform's code was working but the UX for both engineer and novice was flat out not enjoyable.
Design System Constraint
Interviews with the external engineers who maintained the platform's backend led us to Material UI as the component library. As a React library, it was the natural fit for our developers, and with a 2-engineer team and no frontend headcount to spare, its pre-built components saved me time building the design system
Legacy Platform Audit
With better grounding in the goals of the project and its users, I conducted a tool-by-tool audit of the existing web app. (Screenshots below are only part of the full audit, there were around 30 different total screens).
Landing Page
+
The nav bar split the interactive tools into two different sections that correspond to their intended usage.
-
Lack of any entry points to interactive tools, mostly marketing / intro copy.
-
The Design Tool, the web app's premier tool, is not featured at all. The only way to access it is from the nav bar.
Subsystems Explorer (Individual SmallSat Component Data Tables)
-
Filtering system built entirely from individual text entry boxes, making filtration bloated and as slow as simply scrolling.
-
No way to show or hide columns as needed, certain components have over 20 unique columns of data.
-
Raw, unformatted cell data and column headers that wrap across 4+ lines hamper legibility.
Small Spacecraft Design Tool (Automated Version)
-
29 text entry fields as part of one form increases cognitive load and overwhelms the user.
-
No grouping of different elements, unrelated categories all sit next to each other.
-
The CLEAR button (destructive action) is placed where the complete button usually is in traditional forms guiding the user to undo their progress rather than submit it.
Exploration and Iteration
Every interactive tool went through several rounds to find a "goldilocks" balance of pleasant experience and useful output. Here is a glimpse into automated Design Tool's journey.
Version 1
+
Categorized steps and a dotted progress bar replaced the legacy 29-field input wall.
-
No safe Exit feature, only an icon-only home button that returned the user to the start screen.
Version 2
+
A new Exit gave users a safe way out. A Back button allowed users further control over form navigation.
-
Users stated that the segmented dot progress bar was distracting.
My Redesign Solutions
Danial's Course Correction
Form Design
I incorporated progressive disclosure – dividing information across multiple screens by category, creating a 10 step form with a progress bar so users always know where they stand.
This design was repeated for other form based tools like the Testing Facility Finder and Manual Spacecraft Design Process.
The SOA Mission Assistant
The SOA Mission Assistant is how I made dense technical content accessible to all users. Trained on NASA's own Small Spacecraft Report data, it explains complex terminology in plain language, whenever a user needs it.
Chatbot Design
In addition to simplifying complex small satellite content, the SOA Mission Assistant adapts to context.
The assistant also adapts to context: suggested questions change by screen, so landing page prompts differ from those mid-configuration in the Design Tool or in the Subsystems Explorer.
A floating action button keeps it reachable from anywhere on the platform.
Component Metric Analyzer (Graphical Analysis Tool)
Before
-
No restriction on what the user could compare, charts with no real analytical value could be easily produced.
-
The output had the X and Y axes cropped off with various comparisons, making results harder to understand. The legend was detached from the graph.
-
The hero section and large graph dimension buttons competed for a user's attention before the primary action.
After
+
Introduced chips to separate spacecraft subsystems by category, ensuring the creation of meaningful graphical outputs.
+
Added a toggle to compare either two metrics within one component or the same metric across two different components, preventing valueless pairings.
+
Code reconfiguring ensured the legend was a part of the graph and there was no axis cropping.
Subsystems Explorer (Component Data Tables)
Revamped Searching and Filtering
+
Replaced 12+ free-text 'Filter by...' boxes with a functional search and structured, removable, stackable filters.
Column Visibility
+
Implemented column visibility and ascending/descending sorting controls for individual columns.
Testing Facility Finder (Matcher Tool)
Before
-
Results table regurgitates every input field the user filled out as its own column
-
No hierarchy for the matching facilities
After
+
Completing the form displays a dedicated results screen with search and filtering
+
A match strength ranking is introduced next to each facility and color coded for easier scanning
Did It Work?
User Testing Outcomes
The process of creating the SOA Hub was always collaborative. Throughout various iterations of the web app, I led user testing with 13 NASA officials, designers, developers, and small spacecraft engineers with the help of my project sponsor. Their feedback shaped the designs throughout.
A/B Testing
Users would be sent different iterations to test and evaluate as I worked on the interactive tools.
Post Test Survey
I created multiple surveys for internal NASA testing that gathered participants' reactions right after each walkthrough.
In-person Walkthroughs
When schedules aligned, we would have the chance to visit NASA Ames and conduct in-person testing on prototypes.
Universal Chatbot Adoption
Every participant opened the chatbot at least once while using each tool. Seasoned spacecraft engineers rarely relied on it, novice users relied on it for nearly every step. 13/13 users preferred having the chatbot available to not.
Less Experienced Users Spent Nearly 6x Longer Per Form
Most of this increased time was caused by chatbot lookups on unfamiliar terminology before proceeding to the next field. The chatbot allowed novice users to successfully use the tools, but constant questioning occurs throughout.
Time-on-Task Rose After Pagination
Segmenting the single-page legacy form into steps increased overall time-on-task compared to before. Interviews found this to be more deliberate engagement per step, especially with additional context coming from the chatbot.
Overall, users expressed verbal satisfaction with the platform. Pagination and the chatbot were the consensus favorite features, users stated they enjoyed the feeling of the content being far more digestible after my redesign.
Challenges
Staying Resilient
Stakeholder Alignment
Communication with our project sponsor was sporadic, and we started without a unified vision. I set direction early to keep the project moving by coordinating user interviews, sprint planning, and conducting in-person user testing.
The Government Shutdown
The longest federal govt. shutdown in US history (Oct. 1 - Nov. 12, 2025) removed our stakeholder, code, and NASA access with no warning or return date. I taught my engineers design concepts and planned how they'd fit the frontend code I'd saved during that time, so we hit the ground running when access returned.
UX Advocacy
None of my teammates or stakeholders had UX design experience, and user research wasn't in the original brief, so advocacy had to be the design work itself. I ran hands-on workshops to build shared design literacy, and explaining why a change helped users, not just what changed, helped earn buy-in.
Reflection and Learnings
1
Showing Work Early and Often
Alignment decays between check-ins. Sharing progress all throughout the project lifecycle, rather than at the end of an iteration, kept leadership, PM, and engineering in the loop and bought in the whole way through, especially important for a team that did not see the value of design at first.
2
Making Tradeoffs
Splitting the forms into steps traded raw speed for deliberate engagement: time-on-task went up, but users said the content felt far more digestible. The chatbot was a late, unplanned feature we had to sprint to finish, but it proved to be essential for bridging the gap for novice users.
3
Prioritization
Being the lead designer meant I was responsible for a LOT. 6 interactive tools, a new visual language, design advocacy, and user testing all at once. This heavy workload taught me the value of strict prioritization. I focused my effort only on features that delivered the highest, most valuable impact for our users first.
Sponsor Feedback
POV: Working with Danial
Deputy Director : Small Spacecraft Systems Virtual Institute
NASA Ames Research Center
Craig Burkhard
“Danial did a fantastic job redesigning our interactive platform. He showed great leadership guiding the team through the government shutdown. When the team experienced unexpected challenges, they always found solutions to overcome those challenges. The design tool will have a significant impact on how small spacecraft will be designed in the future. The UI/UX modifications by Danial will allow for a significantly more positive experience for the user. I would love to work with him again in the future.”