nebojsa.design

Category: UX Design

  • Real-Time Workforce Management Dashboard

    Real-Time Workforce Management Dashboard

    Role: UX Designer & Service Design Consultant

    Problem: Fragmented Visibility in Gig Workforce Management

    GigCX provides tools for hiring and managing gig workers, but clients lacked actionable data to monitor real-time productivity, enforce location-based contracts, or anticipate staffing demands—key hurdles for time-sensitive campaigns.

    Pain Points

    HR managers wasted up to 3 hours daily manually auditing worker logs and cross-referencing worker information from variable sources.

    Executives lacked insights to assess performance and compare operational costs.

    Hiring campaigns often ended up with insufficient workers, due to inability to plan for sudden spikes in activity.

    Research & Discovery

    Stakeholder Workshops

    Objective: Co-define dashboard requirements with cross-functional stakeholders through evidence-based prioritization.

    Participants: 15 stakeholders across 3 cohorts.

    Methods:

    Survey

    Sent Likert-scale questionnaires (1–5) to stakeholders to rank pain points as part of pre-workshop activities:

    1. How critical is real-time location tracking?

    ★★★★★

    2. How important is the ability to filter historical data?

    ★★★★★

    3. How urgent is the need for instant alerts?

    ★★★★★

    Journey Mapping

    Mapped the Worker Hiring and Worker Monitoring processes using FigJam.

    Affinity Diagramming

    Clustered 58 pain points into 12 themes. Top 3 themes:

    1

    Compliance Risks
    Unapproved worker locations

    2

    Reactive Issue Resolution
    Delays addressing tech failures.

    3

    Forecasting Blindspots
    No data to predict hiring needs.

    Feature Prioritization

    Used MoSCoW Matrix to vote on requirements:

    FeatureMust haveShould haveCould haveWon’t have
    Location tracking✔
    Real-time alerts✔
    Hardware test✔
    Internet connection monitoring✔
    Reporting✔

    12 Critical Features defined in a product requirements document (PRD).

    Personas refined through role-specific feedback (e.g., executives rejected a “simplified view” as overly reductive).

    User Interviews

    Participants: 2 Executives, 8 HR managers and 15 gig workers (to understand both sides of the platform).“My internet drops sometimes, but I dont know how to report it without losing hours.”“I moved temporarily but didn’t realize it violated my contract.

    Quantitative Analysis

    Audit of Historical Data

    Analyzed 6 months of worker logs (10,000+ entries) to identify patterns:

    • 35% of campaign delays linked to internet speed drops.
    • 20% of workers violated location clauses (often unintentionally).
    • Idle time spikes occurred during specific hours (12–2 PM local time).

    Competitive Analysis

    Platforms : Upwork, Fiverr, Trello, Linked In, and internal tools used by clients.

    Platforms were analyzed by segment (e.g. Job boards

    Gaps Identified:

    • No real-time location tracking for compliance.
    • Critical issues buried in chat logs or emails.
    • Historical data siloed by campaign (no cross-campaign trends).

    Persona Development

    Created 3 personas to guide design decisions:

    1. Operations Lead Olivia:
      • Needs: Macro-level geographic insights to allocate resources.
      • Frustration: “I can’t tell if we’re overstaffed in Canada and understaffed in the Philippines.”
    2. HR Manager Hasan:
      • Needs: Alerts for critical issues; Quick filters to resolve worker issues.
      • Quote: “I need to sort idle workers by reason and status.”
    3. Executive Elena:
      • Needs: Predictive analytics for budget planning.
      • Metric: “Show me hiring trends for the next quarter.”

    Ideation & Prototyping

    • Wireframes:
      • Drafted 3 dashboard layouts in Figma, testing with clients for usability.
      • Key Feedback: Users wanted to toggle between map (executive view) and table (manager view).
        Annotation: The toggle feature (A) was added after users emphasized the need for both geographic and granular data views.
    • Data Strategy:
      • Prioritized 4 critical issues (internet speed, location changes, device failures, idle timeouts) based on client-reported pain points.
      • Aggregated 6 months of historical data to forecast worker demand.

    Development & Testing

    Built interactive components for:

    1. Real-Time Worker Map: Flagged non-compliant workers (e.g., in red for unapproved regions).
    2. Critical Issue Feed: Live list of alerts with resolution buttons (e.g., “Contact Worker”).
    3. Historical Trend Analysis: Line chart comparing worker availability vs. campaign deadlines.

    Usability Tests: Refined filters (date, country, job type) after observing users struggle with overloaded UI.

    Solution: Unified Dashboard for Actionable Insights

    Goal: Transform fragmented workflows into a unified dashboard that empowers clients to monitor, analyze, and act on workforce data in real time.

    Key Features & Design Decisions

    Real-Time Compliance Monitoring

    Geo-Tagged Worker Map:

    Visualized worker locations using Google GeoChart, flagging those in non-contract regions with red markers.

    User Need Addressed: HR managers’ inability to track geographic compliance (raised in 100% of workshops).

    Critical Issue Feed:

    Live list of alerts (e.g., “Worker #022: Internet speed <1Mbps”) with one-click resolution options (Contact Worker, Pause Tasks).

    Design Rationale: Reduced HR’s tool-switching by centralizing alerts (validated in usability tests).

    Historical Trend Analysis

    Customizable Line Charts:

    Compared worker availability vs. campaign deadlines, filterable by date, country, and job type.

    User Need Addressed: Executives’ request for predictive hiring insights (prioritized in MoSCoW workshops).

    Issue Breakdown Dashboard:

    Pie charts highlighted that 35% of delays stemmed from internet speed drops, prompting clients to upgrade worker stipends for better connectivity.

    Equity-Driven Worker Experience

    Anonymous Reporting:

    Added a “Flag Issue” button for gig workers to log problems without affecting their ratings.

    Impact: Post-launch surveys showed a 50% increase in issue reporting (reducing downtime).

    Low-Bandwidth Mode:

    Text-only alerts and simplified UI for workers in regions with unstable internet (requested by 87% of gig workers in India/Philippines).

    Tools & Collaboration

    • Figma Prototypes:
      • Iterated on 3 dashboard layouts, testing with HR managers for task completion speed.
      • Key Iteration: Switched from a tabbed interface to a single scrollable view after users missed critical alerts in hidden tabs.
        Prototype
        Annotation: Users completed tasks 25% faster in the final scrollable layout (B).
    • Google Charts:
      • Selected for its flexibility in handling real-time data updates and compatibility with the client’s tech stack.

    Impact: Measurable Outcomes

    1. Operational Efficiency

    • Issue Resolution Time:
      • Reduced average HR response time from 2.1 hours to 49 minutes (63% faster) via real-time alerts and one-click resolution workflows.
      • Measurement: Compared pre/post-launch Zendesk ticket resolution logs (n=1,382).
    • Tool Consolidation:
      • Eliminated 3.2 hours/week of manual data reconciliation by centralizing alerts, filters, and reports into one dashboard.
      • Source: Post-launch user survey (n=8 HR managers).

    2. Compliance & Risk Mitigation

    • Geographic Violations:
      • Reduced unauthorized worker relocations by 38% in 3 months through real-time map alerts and automated contract reminders.
      • Measurement: Audit of Campaign C (20 workers) vs. historical Campaign A (120 workers).
    • Critical Issue Resolution Rate:
      • Increased same-day resolution of internet speed drops from 52% to 89% with prioritized alert tiers.

    3. Equity & Worker Experience

    • Issue Reporting:
      • Worker-reported tech problems increased by 72% after introducing anonymous logging (pre-launch: 22% reported issues; post-launch: 38%).
      • Source: 30-day post-launch worker survey (n=76).
    • Accessibility Adoption:
      • 64% of workers in low-bandwidth regions (India, Philippines) used the text-only UI mode, reducing task abandonment by 41%.

    4. Strategic Decision-Making

    • Predictive Hiring Accuracy:
      • Clients using the dashboard’s historical trends for staffing reduced under/overstaffing by 28% (validated across 3 campaigns).
      • Metric: Mean absolute error (MAE) of 6.8 workers vs. pre-dashboard MAE of 18.2.

    User Feedback

    • HR Manager (Tech Sector):“The map view helped us catch a relocation breach in real time—something that previously took 8 days to surface.”
    • Gig Worker (Philippines):“I finally feel safe reporting internet outages. My income hasn’t dropped since the update.”

  • FixingKosovo

    FixingKosovo

    Creating a visual identity for fixers in journalism

    In journalism, a fixer is someone, often a local journalist, hired by a correspondent or a media company to help arrange a story.

    Objective

    FixingKosovo.net was a chance to amplify the work of an organization connecting international journalists with local fixers in Kosovo—a mission rooted in storytelling and collaboration. The challenge was to create a platform that felt as impactful and authentic as the stories it would help tell, while standing out with a bold, newspaper-inspired design.

    Design Vision

    From the beginning, I wanted the site to feel like a digital translation of a print newspaper—bold, striking, and unapologetically clear. This design choice wasn’t just about aesthetics – it reflected the immediacy and urgency of the stories Fixing Kosovo aimed to share.

    I leaned into a grid-based layout, bold typography, and a palette punctuated with vibrant orange and deep yellow accents. This combination created a sense of both order and energy, drawing users in, while directing their focus to the content.

    Visual Placement: A hero image of the homepage showing the newspaper-inspired layout and bold colour scheme.

    Original Visuals

    One of the most rewarding aspects of this project was the collaboration with the Fixing Kosovo team’s photographer. Their stunning, field-captured photographs became the heart of the site’s visual identity. But instead of using them as-is, I re-imagined them as illustrations.

    This process allowed us to blend the raw authenticity of the photos with a unique, creative edge. Each illustration added depth to the stories while giving the site a cohesive, visually striking look.

    Visual Placement: Side-by-side comparisons of original photographs and their illustrations.

    Process Highlights

    1. Understanding the Mission

    Through interviews with stakeholders and analysis of similar platforms, I gained clarity on what the site needed: simplicity, impact, and a design that resonated with its audience.

    2. Design and Prototyping

    The design process began with wireframes to define structure and flow. From there, I developed high-fidelity prototypes that brought the bold newspaper aesthetic to life. The photography-to-illustration workflow became a key feature, adding both personality and cohesion.

    Visual Placement: Early sketches and wireframes alongside the final high-fidelity designs.

    3. Collaborative Implementation

    Working closely with developers, I ensured the design translated seamlessly into a functional WordPress site. Mobile responsiveness was a priority, as the site needed to be accessible to a global audience on various devices.

    Visual Placement: Screenshots of the site on mobile, tablet, and desktop screens.

    Outcome

    FixingKosovo.net is a platform that embodies the passion and purpose of the people behind it. Its bold design captures the essence of grassroots journalism while offering a user-friendly, engaging experience for visitors.

    For me, this project was a reminder of how design can elevate a mission. Seeing it live and knowing it’s helping connect fixers and journalists is the real reward.

    Visual Placement: A full-page screenshot or interactive mockup of the finished site.

    Does this version meet your needs? Let me know if there’s anything else to refine!

  • Connecting Educators: A Network App for Events, Collaboration and Resource Sharing

    Connecting Educators: A Network App for Events, Collaboration and Resource Sharing

    Designing a network for Federation of Directors of Educational Institutions of Quebec (FQDE) was one of the most complex and interesting challenges of my career. I was hired as a UX consultant in charge of a small cross-functional team, which provided me with a unique opportunity to be involved in the process of creating the software from the beginning, following it through development, and providing support for ongoing improvements based on continuous user testing and iteration.

    The Problem

    Education professionals experienced multiple challenges:

    Fragmented Communication

    Reliance on emails and social media platforms for professional communication, resulting in missed information.

    Inefficient Resource Sharing

    Lack of a centralized resource library for accessing and sharing educational materials.

    Limited
    Collaboration

    Difficulty in connecting with like-minded professionals and forming productive collaborations.

    My Role

    As the principal UX Designer, I led the entire design process, focusing on the following areas:

    • User Research: Conducting user interviews and surveys to gain insights into educator’s needs, pain points, and goals.
    • Design Strategy: Defining a strategic user-centered design vision that aligns with the goal of fostering collaborative learning within the education community.
    • Interaction Design: Designing the information architecture, user flows, wireframes, and interactive prototypes.
    • Usability Testing: Validating design decisions and gathering iterative feedback through usability testing.
    • Content Strategy: Planning the structure, organization, and presentation of content, specifically in the resource library.

    User Research

    Research Objectives

    1. Understand educators’ communication habits, pain points, and unmet needs.
    2. Identify barriers to resource sharing and collaboration across the federation.
    3. Evaluate current event management workflows and opportunities for improvement.
    4. Explore trust factors influencing resource adoption and professional networking.

    Methods

    Semi-Structured Interviews

    12 in-depth interviews with educators, administrators, and association directors.

    Contextual Inquiry

    Shadowed 2 administrators during event planning and resource-sharing task

    Surveys

    Distributed to 200+ federation members, yielding 85 responses (43% response rate).

    Artifact Analysis

    Reviewed tools like shared Google Drives, event flyers, and chat groups.

    Key Interview Questions & Insights

    Communication Habits & Pain Points

    “Walk me through how you typically communicate with peers outside your school/association. What frustrates you most?”

    Pain Points:

    1. Over-reliance on email (8/12 participants): “Important event reminders get buried in my inbox, or end up in spam.”
    2. Fragmented channels (e.g., WhatsApp for casual chats, Slack and Teams for formal updates).
    3. Lack of centralized updates: “I missed a grant deadline because it was only posted on the federation’s website.”

    Insight:

    Users need a single platform for all federation-related communication.

    User Personas & Scenarios

    Based on the user research, we defined three user personas representing different types of education professionals (e.g., a teacher, a school administrator, an educational consultant). We also developed user scenarios to help prioritize features based on key use cases such as, sharing resources, networking at a conference, and setting up a group for specific discussion topics.

    Design & Iteration
    The application was designed using a user-centered approach, with key features including:

    Usability Testing: A high-fidelity interactive prototype was created and tested with 6 users using task completion rates, observation notes, and post-task interviews. This testing phase led to changes in the navigation structure and changes in the grouping of key features to improve usability.

    Outcomes & Next Steps

    The user testing phase showed a high level of task success and positive user feedback. Educators who tested the prototype reported that they found the app intuitive, easy to navigate and well suited to their needs. The next steps are to further refine the prototype based on this feedback, focusing on further improvements to the information architecture of the resource library before releasing a final prototype to a wider audience.

    Reflection & Lessons Learned

    This project highlighted the need for dedicated platforms that empower collaboration in the education sector. By focusing on user needs and iterating based on feedback, the resulting design provided a user friendly and intuitive interface. Key takeaways include:

    • the importance of understanding real-world user scenarios to inform design decisions.
    • the need for an iterative design process to improve the usability and user experience of a product.
    • the value in a well defined content strategy to enhance discoverability and organization of content.

    This project has refined my ability to translate user needs into a practical and engaging user experience.

    Tools Used:

    (Figma, Adobe XD)

  • The Home Depot of Canada: E-commerce Design System

    The Home Depot of Canada: E-commerce Design System

    The Home Depot of Canada’s website faced usability challenges that hindered the shopping experience for millions of it’s users across Canada and negatively impacted conversion rates. This case study focuses on the user-centered redesign project to streamline navigation, improve mobile optimization and boost conversion rates.

    The Challenge

    The existing Home Depot Canada website suffered from:

    • Confusing Navigation: Difficult to use menus and unclear site structure caused user confusion and prevented users from finding desired products.
    • Visual Inconsistencies: A lack of a consistent visual language created a disjointed experience and damaged the brand image.
    • Poor Mobile Optimization: The website did not adapt well to mobile devices, resulting in poor user experience on mobile devices and loss of conversions.

    My Role

    As UX Designer, I led the design process, focusing on:

    • User Research: Planning and executing user interviews and surveys to identify key user pain points and needs.
    • Design Strategy: Defining a user-focused design strategy that aligned with Home Depot’s business goals (increased online sales, improved user experience).
    • Interaction Design: Designing user flows, wireframes, and prototypes to optimize navigation, the checkout process, and product pages.
    • Usability Testing: Planning and conducting usability testing sessions to gather feedback and validate design decisions.
    • Cross Functional Collaboration: Coordinating design efforts with product and marketing teams to ensure design alignment with business and branding objectives.

    Approach: A Data-Driven, Iterative Process

    1. User Research: We conducted 15 user interviews and distributed online surveys. Interviews focused on typical user journeys, and questions included: “How do you usually search for products?” “What are your biggest frustrations while navigating the website?” Data indicated that 70% of users had difficulty finding specific products using the site search functionality.
    2. User Personas & Journey Mapping: Based on the research findings, we created 3 user personas to guide design decisions. Journey mapping was used to identify key pain points during the user journey and to inform the creation of new and more streamlined user flows.
    3. Redesign Strategy: Key design changes included:
    • Navigation: Replaced the previous menu with a simplified mega-menu structure, which reduced user search time by 40% (measured through A/B testing).
    • Checkout: Streamlined the checkout process with a clear progress indicator and reduced the number of steps required. This resulted in a 15% reduction in shopping cart abandonment (measured using analytics tools).
    • Responsive Design: Implemented a mobile-first responsive design to ensure a seamless experience across all devices. Mobile-specific interactions and layouts were considered (for example, touch-friendly controls and simplified layouts).
    • Product Pages: Redesigned product pages to include high-quality images, detailed product information, and clear calls to action. A/B tests with different layouts resulted in a 10% increase in “Add to Cart” clicks.
    1. Iterative Prototyping and Testing: High-fidelity prototypes were created and tested with 8 users. Feedback was gathered via task completion rate and post-test interviews. For example, some users reported difficulty finding product information, which led to improvements in the information architecture and the overall product page layout. Testing was repeated 2 times before releasing the final redesign. We also performed heuristic evaluation of the final prototype.
    2. Content Strategy: Existing product page content was updated to be more concise and user-friendly. Clearer and more compelling calls-to-action were implemented on all key pages.

    Outcomes: Tangible Results

    The redesign delivered measurable improvements:

    • Conversion Rate: Online conversion rates increased by 12% (measured using Google Analytics).
    • Bounce Rate: Bounce rate decreased by 8% (measured using Google Analytics).
    • User Feedback: User satisfaction scores improved (measured by post-implementation surveys).
    • Mobile engagement: Mobile user engagement increased by 20% (measured using Google Analytics)

    Reflection and Lessons Learned

    This project underscored the importance of user-centered design and data-driven decision-making to improve conversion rates and user satisfaction. Key learnings include the power of streamlined navigation, simplified workflows, responsive design, and iterative testing for a large e-commerce platform. This experience refined my ability to lead user-centered design projects and deliver measurable business outcomes.

    Tools Used:

    (Figma, Adobe Illustrator, Google Analytics)

  • SCIEX Molecular Devices: UX for Complex Lab Workflows

    SCIEX Molecular Devices: UX for Complex Lab Workflows

    This project focused on unifying the complex SCIEX OS ecosystem into an intuitive, user-friendly platform, using a robust design system and improved workflows to empower scientists and accelerate their research.

    The Challenge

    SCIEX OS, a suite of over 20 applications for molecular research, suffered from inconsistent user experience, hindering scientists’ efficiency and increasing the potential for errors.

    Navigation

    Complex, nested menus and inconsistent navigation elements forced users to jump between applications.

    Visual Inconsistency

    A lack of unified visual language (typography, colour, components) created a disjointed and overwhelming experience. This also increased the view of the software as outdated in many areas.

    Terminology

    Inconsistent labelling of functions and data items increased user confusion and error potential.

    My Role

    As Lead UI Designer, I was in charge of the redesign, focusing on several areas:

    Design Strategy

    Creating a user-centered design vision aligned with company’s business goals (increased user satisfaction, reduced support calls, improved data integrity).

    Design System

    Developing and implementing a scalable design system with accessibility best practices in mind.

    User Research

    Leading user research, usability testing, and feedback analysis to inform design decisions.

    UI Design

    Designing interfaces, key interactions and prototyping using a user-centered approach

    Collaboration

    Facilitating design workshops, user interviews, and ensuring alignment with product managers, developers, and stakeholders.

    Approach & Methods

    User Research & Contextual Inquiry

    Researching user interaction habits for a complex scientific application meant that I was on a path of constant learning to understand the science behind every software feature. I started by conducting in-depth interviews and surveys with scientists, lab technicians, and IT specialists. This helped me understand their pain points and was very valuable later in formulating requirements. I also performed usability testing on core features of existing software to identify key issues.

    During research phase, I observed 8 scientists in their labs, noting that a single workflow often required switching between several applications, as well as a lot of manual work in data analysis. This increased the room for errors, as well as added a significant amount of time to the already exhaustive audit and testing processes.

    User Journeys & Flow Diagrams

    Based on the research, I developed personas representing typical users, such as a lab technician, research scientist and lab manager. I mapped out their user journeys to visualize the steps they take to complete common tasks, identifying opportunities for improvement.

    Documenting user, task and data flows was a key step in my design process. I used the diagrams as an alignment and communication tool, and they proved to be very useful in explaining the features to team members and stakeholders who don’t necessarily have the domain or technical expertise. 

    Since all the features were additions to the existing software, I would work with UX and software architects to define entry points – potential areas of the platform where a new interaction could be added, assessing the impact on the existing features, as well as different types of instruments that the new feature would be used on.

    Wireframes & Prototypes

    Scalable Design System

    I led the team to create a robust design system:

    • Accessible Style Guide: Defined a WCAG compliant colour palette, a legible typography scale, a spacing system and an icon library.
    • Reusable Component Library: Developed accessible, reusable components (buttons, inputs, tables) with clear guidelines.
    • Comprehensive Documentation: Shared guidelines, documentation and governance processes ensured system adoption and future maintenance.
    1. Streamlined Navigation: User research and testing indicated the original top menu was complex. We therefore replaced it with a vertical, task-oriented sidebar, improving readability and simplifying access to core actions. Initial testing revealed a 7-8 step workflow was reduced to 3-4 steps by consolidating actions and eliminating unnecessary hand-offs.
    2. Iterative Design: We employed task success rates, SUS scores, and observation notes to gather user feedback. This feedback led to key changes in terminology and the reduction of steps in the workflows. The prototype was then updated and retested. This process was repeated 3 times.
    3. Collaboration: I facilitated regular design workshops, presenting design options, explaining rationales, and incorporating feedback from product, dev, and stakeholders. This ensured technical feasibility and streamlined design hand off.

    Outcomes: Quantifiable Improvements

    The redesign significantly improved SCIEX OS:

    • Task Completion: Task completion time was reduced by 50%.
    • User Errors: User errors decreased by 30%.
    • Satisfaction: Post-implementation user surveys reported 90% positive feedback.
    • Scalability: The design system became the foundation for future product development. [Placeholder Image 6: An infographic visualizing the key metrics: 50% faster, 30% fewer errors, and 90% positive feedback. Caption: “Key metrics showcase the significant impact of the redesign on efficiency, data accuracy and user satisfaction.”]

    Reflection & Lessons Learned

    Key learnings: rigorous user research, design system implementation, and cross-functional collaboration are critical to achieving successful outcomes. This experience refined my ability to lead complex projects and deliver business results using user-centered design.

    Tools Used:

    (Figma, Adobe Illustrator)

    Next Steps (Optional):
    This is where you can mention any future plans you have for this project.