Scaling Design Impact Without a Design Team
TIMELINE
2023-2025
TEAM
1 Product Designer (me)
3 Engineers
Director of Product
CEO
COMPANY/PRODUCT
The Social Institute
B2B Web Application
SKILLS
Design Strategy
Prototyping
Accessibility
Stakeholder Alignment
CONTEXT + OVERVIEW
I redesigned the core product over the span of 2+ years
120+
NEW CORE SCREENS + FLOWS
65+
NEW COMPONENT SETS WITH VARIANTS
100%
WCAG AA COMPLIANCE
Significant reduction in UX support tickets
#WinAtSocial is a gamified, student-led learning platform. It was a powerful product that had successfully helped thousands of students and educators learn modern life skills. As the user base had grown, so did the complexity of the product. Stepping in as the only designer on the team, I had a rare opportunity: to pitch design as something worth real investment, and get executive buy-in on that vision. Over the course of two years, I designed and shipped 120+ new core screens and flows, and 65+ complete component sets.
PROBLEM
The product needed a foundational rework
It was clear #WinAtSocial needed to be more accessible and easier to use. Renewal conversations with schools and districts had surfaced real feedback about friction in the product experience. Users struggled finding the information they were looking for, and often didn't know where to go or what to do once logged in. Getting the redesign right mattered well beyond visual craft. All legacy files were still living in Adobe XD. There was no existing design system to build from, and no shared component library.
CONSTRAINTS
The ground was moving…
CODE REFACTOR
Engineering was in the middle of a full refactor, rewriting the product’s codebase from the ground up. Features I wanted to prioritize had to be paused, or I had to find workarounds that didn’t depend on architecture that wasn’t ready yet.
The legacy product designs lived in Adobe XD. I did not have any usable designs or components to bring into Figma (at times, this was simply impossible).
There wasn’t room to stop shipping and build a system in a vacuum. Features still needed to go out while the foundation was being built. I was building the design system and handing off specs at the same time, which made scalable handoff difficult at times.
MY APPROACH
01
Audited the entire platform
I audited the product page by page, documenting what needed to change, why, and my recommendation for how to approach it. This was supported by written rationale, hand-drawn wireframes, and full mockups I’d developed independently. That became a multi-page working document I presented to executive leadership, which helped shape our early priorities. Not every idea made the cut, and the discussion that followed was genuinely productive. The document remained a reference point throughout the redesign.
02
Made the Case to Move to Figma
I pitched leadership on moving off Adobe XD and onto Figma. I focused on the cost of maintaining legacy files versus the benefit of starting fresh in a tool built for scalable, collaborative design. It worked: we purchased a company Figma account. I never had to work in XD, and I designed exclusively in Figma.
03
Rather than relying on my personal opinion, I studied constantly: competitor products, industry-leading design systems like Shopify Polaris and Google’s Material Design, platforms like Mobbin and Layers for emerging patterns and flows, and resources like NN Group and Medium articles. I brought that research back to leadership to support what I was proposing, and used it to separate genuine best practice from what was realistic for a company our size and for our unique users: educators (not always the most tech-savvy) and students (a completely different audience than the sleek fintech dashboards you’d find on Mobbin).
04
Built the System Inside the Work
Starting from a codebase where not even basic elements like buttons had defined styles, I built the system inside the work: every time I noticed an approved pattern that could be repeated across a new design, I turned it into a component with variants. Text, color, and shadow styles along with forms, buttons, and cards all came from real, redesigned screens that worked in our product. I didn’t design them in isolation as a separate project; when a feature shipped, so did a new component set in our design system. Our PM also ran a WCAG audit which surfaced many contrast issues. I worked to change core brand colors, document use cases, and establish new company-wide brand standards that hit 100% WCAG AA compliance.
Before this work, the product had no real visual hierarchy. Buttons, text, and page elements all carried roughly equal weight, which made it hard for users to know where to look first. I introduced hierarchy as a system-wide principle: buttons now signaled the order of recommended action, typography carried different levels of emphasis, and color now indicated importance and status. Cards, secondary navigation, and collapsible sections all followed the same logic, organized the way a human eye naturally scans a page rather than however it happened to be built historically.
05
Partnered with Engineering to Make It Real
None of this mattered if it lived only in Figma. I worked closely with engineering through detailed annotations, handoff meetings, ad hoc Slack huddles, and more to bring the system into the actual codebase. This communication was necessary so new features could be built with existing components instead of one-off specs. Engineering has since told me my specs are some of the cleanest they’ve worked with. I also learned to sync more closely with engineering on what should be componentized where. Figma and the codebase weren’t always aligned at first, and getting that right took some back-and-forth.
06
Course-Corrected Based on User Feedback
There were plenty of times throughout this process where we shipped something, and then found out it didn’t land with our users. As an example, one of my audit recommendations was to modularize the dashboard into distinct widgets. It was a clear improvement on paper. But feedback from our users soon surfaced that it felt overwhelming. They weren’t sure what to do, and felt they had too many options. I went back and redesigned it again, this time leading with one primary widget that gave users a clear, single next action, with the rest of the dashboard supporting that focus.
OUTCOME
Design stopped being the bottleneck
The product went from inconsistent and hard to navigate to a system the whole team could build on. There are 120+ new core screens and flows, and 65+ component sets complete with variants. Design is no longer a bottleneck for engineering. The system is mature enough to support real product work, and they have shipped features independently without needing me to design them from scratch. Confusion-related support tickets dropped sharply after the redesign, something our support team called out directly. Educators told us unprompted, on customer support calls and over email, that the product was easier to read and easier to find what they needed.
120+
NEW CORE SCREENS + FLOWS
65+
NEW COMPONENT SETS WITH VARIANTS
100%
WCAG AA COMPLIANCE
Significant reduction in UX support tickets
IMPACT TODAY
Still shaping how we ship
This work changed how the company approaches, and now values, design. I’ve mentored the design interns and team members who’ve done brand work, helping them ramp up quickly and deliver consistent, on-brand work. Today, I’m bringing AI tools into my own workflow to prototype faster, and the company has backed that initiative every step of the way.
SEE ALSO