Driver AI

Navigation and Content Organization

To initiate our project, we first comprehensively understood the problem outlined in the project brief provided by DriverAI. Our objective was to revamp the company’s content organization and navigation to enhance user experience and better showcase content. Essentially, we aimed to redesign their user flow. Following receipt of the brief, we convened to analyze the current implementation of DriverAI's user flow, depicted below. Subsequently, we formulated clarifying questions for the founding engineer, focusing on the purpose of each organizational level (Workspace, Codebase, and Dashboard), key user features, and identification of main pain points in the current system.

Sketching

Once we had a clear understanding of the project scope and objectives, the next phase involved translating our ideas into tangible sketches. Each member of our team generated eight sketches, resulting in a total of 32 unique concepts. Among these, two end-to-end flows consisting of four screens each were selected for further refinement.

Removing Top Level Workspaces

Following the sketching phase, we convened to discuss our approach moving forward. One crucial observation we made was regarding the structure of DriverAI's main page layers: the Dashboard, Workspaces, and Codebases. We identified a significant barrier between the initial landing point and the core content, which prompted our primary focus on simplifying the user experience and reducing the number of clicks required to access essential information. To address this issue, we decided to implement two key features derived from our sketches: Removal of the Workspaces level and integration of its functionality within the top level of the website.

Collapsing Sidebar

To give users a more comprehensive view of where they were in the application, we decided to implement a sidebar that could be used for navigation to search other technical documentation and to return to other codebases and workspaces if necessary.

Feedback from Low Fidelity Wireframes

Style Guide

After completing our low fidelity wireframes, we moved on to creating our style guide, which used the Zinc Tailwind CSS color palette and used market standard styling that was cohesive with the rest of Driver AI's product.

Founder Feedback

Finally, we created our high fidelity wireframes and presented them in a Loom, and then again on a Zoom call, with a founding engineer from Driver AI. We received a number of useful notes on our high-fidelity wireframes, as shown in the notes to the left. We went on to implement these, as described along with the following pictures.

Workspaces

The new Workspaces page featured a right-hand sidebar, giving users the ability to see codebases associated with the selected workspace. We also introduced iconography in the breadcrumbs at the top of the page, to show users what level of hierarchy they were currently on. Within each workspace was also workspace-level notes, which would appear in a horizontally-scrollable dropdown after selecting a workspace.

Codebases

We combined the resources section into the codebase level, so that all document uploading beyond technical codefiles could be stored all in one place. We also

Tech Docs

At the Tech Docs level, we decided to introduce the ability to swap the right hand column and the center document, allowing for easy switching between viewing code and its associated documentation. We also added an editing toolbar on the right hand side of the documentation, to remind users that they had the ability to edit the document's styling outside of prompting the AI for documentation.