Upsonic Dashboard Redesign

Upsonic is a codebase management platform for engineering teams, with library management, user permissions, and AI-powered search. I redesigned the dashboard to fix its navigation structure, inconsistent content placement, and missing feedback states.

Project Overview

Challenge

Upsonic's dashboard grew feature by feature without a structure behind it. Navigation was fragmented, related functions sat in different places, the same content appeared on multiple pages, and actions gave users no confirmation that they worked.

My Role

I audited the existing dashboard, rebuilt the sitemap, and redesigned the core flows. I worked directly with the founder and engineering team, and presented design decisions in weekly client meetings.

Research & Analysis

I started with the engineering team, asking them to walk me through how they used the product and why it was built the way it was. I then went through the dashboard myself as a first-time user would, documenting only what broke down from a UX perspective. I shared those notes back with the team to check my reading against theirs, then mapped the existing structure into a sitemap in Miro so we could look at the current IA together before changing anything.

Existing Upsonic dashboard, before redesign

PAIN POINT #1

Confusing Navigation Structure

Users found it challenging to find essential features and navigate sections because of a disorganized menu and varying hierarchy. Related functions were dispersed, which hindered quick access.

PAIN POINT #2

Cluttered and Inconsistent UI

The dashboard's visual elements, including buttons, text, and icons, were styled inconsistently and misaligned. For instance, mismatched font sizes and button placements led to visual clutter.

PAIN POINT #3

Lack of Clear User Feedback

Interactive elements like form submissions or error states did not provide adequate feedback to users. For example, after an action was performed (e.g., adding a library), users were unsure if it was successful or not.

PAIN POINT #4

Inefficient Information Architecture

Content was duplicated across pages, with Home and Libraries showing nearly the same information. Related functions lived in separate sections, and the sidebar had no nesting, so every page sat at the same level regardless of importance.

Solution Process

Using my insights, I developed a new sitemap for the dashboard that provided a clearer structure. From this sitemap, I created wireframes and later transformed them into low-fidelity and high-fidelity prototypes, incorporating user feedback from client meetings. Although direct user testing was not conducted, I actively participated in meetings to gather feedback, which guided design adjustments.

Feedback Insights &
Observations

Throughout the redesign process, I documented key observations from client meetings and usability feedback. These insights helped refine the dashboard’s structure and improve its overall usability.

Home and Libraries Similarity

Clients expressed confusion due to the similar structure and content of the Home and Libraries pages. This led to ambiguity in navigation and usage.

HOME

LIBRARIES

Solution: Proposed merging the two pages or creating clearer distinctions to reduce redundancy and improve user flow.

HOME WIREFRAME

LIBRARIES WIREFRAME

Dropdown Menus for Sidebar

Users found the static sidebar limiting for navigation. Dropdown functionality was suggested to simplify access to nested sections.

SIDEBAR’S OLD STRUCTURE

UPDATED DROPDOWN DESIGN WIREFRAME

Typography and Alignment Improvements

Misaligned elements, including inconsistent font sizes and button placements, disrupted readability and the visual hierarchy, creating a disorganized user experience. The redesigned layout ensures cohesive alignment, improving both functionality and visual clarity.

USERS PAGE OLD STRUCTURE

UPDATED USERS LO-FI PAGE

Libraries Section Icon

The hamburger menu icon for Libraries created confusion due to its unconventional use in this context.

OLD LIBRARY CARD

Solution: Proposed merging the two pages or creating clearer distinctions to reduce redundancy and improve user flow.

UPDATED LIBRARY CARD

Enhancing AI Search Visibility

Initially, the AI Search feature lacked visibility and was underutilized due to its static and non-prominent placement. Multiple design concepts were considered to improve its discoverability, including chatbox-style and sidebar integrations. However, the final solution was a dropdown design placed prominently at the top of the interface, providing users with quick and intuitive access without disrupting the overall layout.

OLD AI SEARCH BAR

Solution: Designed and implemented a dropdown interface for AI Search, ensuring better accessibility and alignment with the dashboard's streamlined structure.

UPDATED LO-FI AI SEARCH BAR

Prototyping & Design

Based on insights gathered during client meetings and the established design direction, I created both lo-fi and hi-fi prototypes. These prototypes were informed by user needs and aimed to address identified pain points, streamline navigation, and improve overall usability.

Design Systems Integration

Throughout the design process, I leveraged the existing design system, shadcn, which provided a cohesive foundation for maintaining visual consistency across the dashboard components.

Hi-Fi Prototype

Takeaways

Implemented an organized color palette and consistent typography, enhancing readability and visual appeal.

Optimized button placements and improved menu layouts, reducing user effort in navigating the interface.

Made branding adjustments that aligned the interface more closely with Upsonic’s brand identity, subtly improving user perception and engagement.