Will explore design-systems, gesture-driven spatial systems, advanced computing interfaces, potential AI interfaces, designs from the oxman lab (biomimicry-inspired), dark-patterns systems which influences social behaviours etc ...\
\
Stay tuned (you will have fun for sure)

New write-ups coming soon

Designing a foundational UI system goes beyond creating visual elements—it's about building the core structure that ensures a seamless, consistent, and scalable user experience. \
In my recent project on [openpilot, an advanced driver assistance system (ADAS)](https://github.com/commaai/openpilot) running on [Comma 3x hardware](https://www.comma.ai/shop/comma-3x), I focused on redesigning/transforming the user interface to create a strong, flexible foundation that enhances usability and mainly accessibility.\
\
The foundation of a good UI system includes base components such as color, typography and the core layout (UI architecture). These elements are not just decorative; they serve specific purposes. The typography style was chosen to be easy to read, for various driving positions and conditions. The color system was designed to balance the software's branding while ensuring high contrast for readability and interaction.\
\
Accessibility is one of the most crucial aspects of designing a foundational UI system because it ensures the design is usable and inclusive for all users, regardless of the conditions, rather than merely satisfying aesthetic or creative preferences. \
For openpilot, accessibility was a top priority for me because the device is mounted 10-12 inches from the driver’s face below rear view mirror. I consciously designed with large typography style and interactive components, such as buttons and toggles, that are easy to click without requiring extra attention.\
\
\
Result:\
OLD

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F69e83085-4644-495b-ae63-d156a8ee0ddd.png?alt=media&token=7cd1d87d-649a-40ab-bf81-94cce6b3097a","id":"69e83085-4644-495b-ae63-d156a8ee0ddd","width":2162,"height":1082,"filename":"image.png","type":"image/png","caption":"Home Page","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F9d3b53e2-9ef1-4402-8e22-2b05f06c5142.png?alt=media&token=afb7dec3-6c2d-4254-bdc4-4abb5a9c724f","id":"9d3b53e2-9ef1-4402-8e22-2b05f06c5142","width":1256,"height":644,"filename":"image.png","type":"image/png","caption":"Navigation Feature","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F2d5627ed-5041-46a4-9e7f-0ba87a61fbce.png?alt=media&token=eb959496-dda6-4260-ac9e-d708618dd93a","id":"2d5627ed-5041-46a4-9e7f-0ba87a61fbce","width":2162,"height":1082,"filename":"image.png","type":"image/png","caption":"Settings: Device ","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2Fd43b7572-1519-46e4-adbf-2c6816f7cd59.png?alt=media&token=e5899361-8947-42bf-a503-f39a90978ae5","id":"d43b7572-1519-46e4-adbf-2c6816f7cd59","width":2162,"height":1082,"filename":"image.png","type":"image/png","caption":"Settings: Network","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2Fcd51cba1-c362-40fd-89aa-c3feece77df6.png?alt=media&token=0ef0414a-f8c5-4560-b95f-9494f3d8fffb","id":"cd51cba1-c362-40fd-89aa-c3feece77df6","width":2162,"height":1082,"filename":"image.png","type":"image/png","caption":"Settings: Toggles","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F84caddc5-77de-4ca0-8be8-60bc45d155a0.png?alt=media&token=11fe7eee-3a6f-4d23-915a-a1c908cff561","id":"84caddc5-77de-4ca0-8be8-60bc45d155a0","width":2162,"height":1082,"filename":"image.png","type":"image/png","caption":"Settings: Software","border":true}]}
```

NEW

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F53747ca1-185a-4182-b53b-19e72f76cb89.png?alt=media&token=66d0dc85-58ef-448e-9122-ecf08d8b7b81","id":"53747ca1-185a-4182-b53b-19e72f76cb89","width":4320,"height":2160,"filename":"image.png","type":"image/png","caption":"Home Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F1aaf781c-9a77-4dfb-b452-08da5632e970.png?alt=media&token=1e897447-0a03-4f89-bd9e-08f9e6e626b8","id":"1aaf781c-9a77-4dfb-b452-08da5632e970","width":4320,"height":2160,"filename":"image.png","type":"image/png","caption":"Navigation","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2Fb578b613-73c4-4cdc-993e-e0ae81532b00.png?alt=media&token=643dbe0c-25c2-4f6e-ab71-bb3aad238ea4","id":"b578b613-73c4-4cdc-993e-e0ae81532b00","width":4320,"height":2160,"filename":"image.png","type":"image/png","caption":"Settings: Device","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F443103dc-f91b-44a6-83fc-e088f52edde7.png?alt=media&token=550213da-1ab7-441d-8786-1f93320c1347","id":"443103dc-f91b-44a6-83fc-e088f52edde7","width":4320,"height":2160,"filename":"image.png","type":"image/png","caption":"Settings: Network","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F316b7c8b-6a21-4d2f-bb6e-80b77d62148c.png?alt=media&token=65b2e40a-7f92-4be8-b85a-3e9b94611707","id":"316b7c8b-6a21-4d2f-bb6e-80b77d62148c","width":4320,"height":2160,"filename":"image.png","type":"image/png","caption":"Settings: Toggles","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2F13dcb349-5e22-44bc-abce-4cfb23c9a7d5.png?alt=media&token=4b02bfa7-6ac4-4690-a580-9d54d81d9d09","id":"13dcb349-5e22-44bc-abce-4cfb23c9a7d5","width":4320,"height":2160,"filename":"image.png","type":"image/png","caption":"Settings: Software","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FIrghRmGpIZMDd6A2vrkAs0YatJp2%2FPXv8iVoJsSHaSo4pzoje%2Fb36343a2-3d6c-428c-9c91-88aca6ad3f40.png?alt=media&token=5e210d3e-5140-4840-87fd-ca91995ed970","id":"b36343a2-3d6c-428c-9c91-88aca6ad3f40","width":4320,"height":2160,"filename":"image.png","type":"image/png","caption":"Settings: UI options","border":false}]}
```

\
\
👉🏼  DETAILED **[DESIGN CASE STUDY](https://docs.google.com/presentation/d/12pWve2DT7f1X70GlMJC6eRV6UxP6fRLF1YVclk9tOAM/pub?start=false&loop=false&delayms=3000&slide=id.g2fada2e42ce_0_0)**\
\
\
Taking cues from [Dan Mall’s article, "The Folly of Design System ‘Foundations’"](https://danmall.com/posts/folly-of-design-system-foundations/) I understood that a foundation shouldn't be too rigid or restrictive. Instead, it should be flexible enough to allow growth and changes as the product evolves which are much essential at the early foundation stage. The design's core principles—accessibility, consistency, and simplicity—are woven into every element, ensuring that the UI system remains a strong base that supports future feature integrations.\
\
This project taught me that establishing a foundational UI system is less about dictating design details and patterns and more about creating a cohesive structure using core basic components and continuously iterating around defined principles.

\
*This is work in progress, will be updating this ...*

Scalable Foundation UI System (feat. openpilot)

Product Designer

This is a project which centers around designing a new kind feed system which helps user to create a self-curated queue of feed boards which are user-defined, intelligent and prompt-based.\
\
This project aims to redefine how users interact with content feeds.

\
[{STATUS: work in progress}](https://docs.google.com/presentation/d/1CFb_BcWxJiWB2wIhHElRYnx8yybyijIcMEiUR8UoiVw/pub?start=false&loop=false&delayms=3000)

👉🏼 cureFEED

Cloning and customizing Cash App’s landing page and iOS app to explore and learn the finer details of its design. \
\
The goal is to understand design choices and best practices to enhance overall design skills.

Cash-App-Clone

Building a new kind of hiring process/product (inbound and challenge based), inspired by the most efficiently operating organizations.\
\
STATUS: {work in progress}

👀 hiringwhiz.com

A Web App for Open-Source projects to raise funding and split among its contributors. Contributors get direct shares from donations via fair algorithms.\
\
Discover and Showcase your projects on this platform.

GitSplit

This project is a redesign of openpilot, an Advanced Driving Assistance System (ADAS), developed my [comma.ai](https://comma.ai)\
My focus was on designing a scalable foundational system that improves accessibility, usability, and user experience.

\>> Key Objectives:\
\- Accessibility: High-contrast dark theme with adjustable large text sizes and voice commands.\
\- Usability: Simplified navigation and interactions for an intuitive experience.\
\- Foundational Design (UI Architecture, color, type)\
\
[{CASE-STUDY}](https://docs.google.com/presentation/d/12pWve2DT7f1X70GlMJC6eRV6UxP6fRLF1YVclk9tOAM/pub?start=false&loop=false&delayms=3000)

✨ DESIGN A FOUNDATIONAL UI SYSTEM FOR OPENPILOT

A self-curated and refined music experience with smart music boards.

Atharv Una

2024