Project Overview

Client: Topcoder, managed by Wipro

Role: Senior UX/UI Designer

Timeline: April 2024 – October 2024

Platform: AI-powered crowdsourcing platform (Web)

Goal: Improve the experience of users defining and managing software projects with an AI assistant, while scaling design consistency across the platform.

Impact: Built a reusable component library and accelerated dev handoff by streamlining the MVP design process.

The Challenge

Topcoder introduced an AI assistant ("Tsunny") to help enterprise clients define project requirements using natural language prompts. The MVP interface was functional but had key issues:

The project lacked a component library, slowing design output

Dev teams had no unified design system, slowing delivery

The challenge was to design a clear, intuitive design system and scaleable component library that would support rapid iteration and feature growth.

My Role

I worked as the Senior UX/UI designer by supporting the UX Manager, and I:

Audited the existing product and created a plan to develop a design system.
Designed a modular Figma component library to support rapid design iteration.
Created interaction models for new feature announcements and in-app notifications.

Discovery & Strategy

Conducted a UX audit of the MVP product to identify UX/UI consistencies and inconsistencies.
Mapped out the high level components and one-off components unique to the AI interactions.
Held working sessions with UX Manager to define the key design system elements in order to build the scaleable component library.

A key insight: design was spending 40% of their time reworking layouts instead of using a foundational component library to streamline output.

Design Execution

Built a scalable component library for both web and mobile (future state) by creating a Figma-based system of inputs, cards, tabs, and alerts that could be quickly used to design new features.
I introduced microcopy, visual feedback states, and a complex notification center to alert users on high priority items and new product features.

Outcomes

Improved design iteration time by 40% using the new component library.
Reduced design clutter by clearly defining system and feature notifications.

If I Had More Time...

I would have liked to the see the product used by more customers and iterate the design based on their feedback.

Key Take Away

By building the framework for both the interface and the design, I helped turn a chaotic design process into scaleable speedy output, resulting in feature expansion.

Design research: notifications

Design research: Dribble inspiration

Gained inspiration using icons as visual markers for types of alerts.

Design research: Dribble inspiration

Inspired by the tabbed approach to categorize types of alerts.

Design research

Leveraged this concept for how to determine visual hierarchy in the notifications.

Design Iterations: Notifications

Ideation

UI notes: organize notifications by type; highlight high priority tasks that require immediate user feedback; create visual system for high, medium, low; establish a design system for all top nav interactions