Confidentiality Notice
To protect proprietary and confidential information, details regarding this project have been generalized. All included visuals are non-proprietary login flows or abstracted artifacts. For a more in-depth discussion and a full walkthrough of the design system, please contact me directly.
My Core Role
Lead UX/UI Designer & Strategic Generalist
Team Structure
CEO Stakeholder, 1 Product Manager/QA Engineer, 1 Lead Developer, 3–6 Developers.
My Contributions
- Design System Definition (WCAG AA/AAA)
- Information Architecture & Flow Mapping
- Stakeholder & Dev Liaison
- Timesheets & Expense Module Redesign
- Content Strategy & Sales Enablement
The Challenge & The Strategic Pivot
The primary mandate was to take a powerful, in-house enterprise tool—built by industry experts—and dramatically improve its aesthetics and user experience. My CEO stakeholder wanted Vektor to be **"pretty"** and intuitive enough to be successfully launched as a commercial SaaS product.
The Constraint: Resourceful Design
Unlike typical projects, formal UX research was low priority. Recognizing that the app's functionality was already superior to competitors, I made a **strategic pivot**: my goal shifted from rigorous UXR to **prioritizing aesthetic quality and structural consistency** to solve the #1 business priority: **user adoption**. Success hinged on my ability to be a design system architect, a proxy user, and a highly agile dev partner.
Design Success Metric
100%
Increase in internal weekly active users via mandatory Timesheets Module onboarding.
Implementation & Core Artifacts
My process was a rapid loop of brief, design, review, and ship, focusing on structural elements and key user friction points.
My Process & Approach
Given the constraints of a niche B2B product and limited access to the target user base, I approached design with a resourceful, agile, and highly collaborative mindset.
Design Process Flow
The typical Vektor design process, from foundational research to collaborative feedback and final implementation.
1. Foundational Design Systems
I took ownership of the design system, ensuring a high level of fidelity and alignment with **WCAG AA/AAA** contrast standards. This was critical for streamlining the handoff process and aligning new engineering hires.
The textfield component documentation served as the single source of truth for input interactions across all modules.
2. Complex User Flow Mapping
For large modules, I created high-level user flow sketches to define the **Information Architecture** and account for all complex, multi-path user journeys before moving to high-fidelity mockups.
A high-level sketch mapping the possible paths and architecture for a major module's main page.
3. Edge-Case Design & Error Handling
By mapping out comlpex user flows and prototyping, we were able to find edge cases and potential user errors so we could give clear, human-centered feedback instead of generic errors in order to increase retention and user satisfaction.
A clear, concise error message designed to guide users back to a successful workflow, based on real user pain points.
4. Polished Authentication Flow
I redesigned the entire sign-in, verification, and password recovery flow, ensuring a modern look that aligned with the new design system and providing clear visual cues for multi-factor authentication steps.
Showcasing visual polish and clear steps for the initial user onboarding experience (interactive Figma prototype).
Outcome & Strategic Impact
100%
Adoption Increase (Internal Users)
20+
Modules Redesigned/Created
1
Centralized Source of Truth (Reduced data sprawl)
The redesign achieved its core goals. By making the application aesthetically superior and consistently usable, we successfully onboarded **all internal users** to critical weekly functions (Timesheets and Expense reporting), proving Vektor’s value and providing a massive, built-in feedback loop.
Strategic Differentiator: Content & Adoption
My role extended beyond the screen. To ensure adoption and commercial success, I created a **marketing and content strategy package** to be used across business silos. This included:
- **Training Collateral:** (e.g., Vektor Sign-In Guide) to reduce support tickets.
- **Sales Enablement:** Vektor Brochures, Digital Capabilities Decks, and Feature Tables for pitch meetings.
- **Ad Content:** LinkedIn Video Ad content to support the product's external launch.
Success in this environment required being a **strategic generalist**—a designer who could pivot priorities, align engineering on systems, and drive the overall commercial narrative.
Learnings & Professional Growth
This project was a significant accelerator for my professional growth. Moving from working with a two-person development team to a larger, complex team taught me the importance of a **bulletproof design system** not just for consistency, but as a communication tool to maintain velocity across multiple developers.
My key learnings centered on the **business-UX relationship**. I gained a deep appreciation for how understanding CEO goals directly translates into prioritizing which features to build first (e.g., Timesheets for adoption over complex niche tools). Crucially, I learned that **system thinking** applies everywhere. Building solid, repeatable business processes (like expense reporting) first made it infinitely easier to translate those requirements into the app, improving the end-user experience.
Finally, I grew in **confidence**. Early on, I wish I would have been more assertive in both owning what I knew and clearly articulating what I didn't. This experience taught me to recognize the value of my unique position and expertise, making me a more effective and decisive lead designer.