Matija Vojvodic
Senior Product Designer | 5+ Years in UX/UI Design | Front-End Development | Graphic Design
Experiance
Senior Product Designer @ Ostre (Freelance)
Jul 2024 - Present
As a Senior Product Designer at Ostre, I’ve had the pleasure of working closely with passionate startup founders, entrepreneurs, and business owners to bring their ideas to life. My role goes far beyond crafting beautiful designs—it's about strategically aligning design with business goals. I achieve this by blending UX research, marketing insights, and product development into a cohesive process that drives meaningful results.With years of experience helping building businesses from the ground up, I’ve worn many hats: from being the first product and graphic designer to taking on development tasks and working hand-in-hand with founders. As teams grew, I transitioned into leading and mentoring roles of new designers and developers, collaborating closely with marketing and sales teams. This diverse experience has given me a unique perspective—one that allows me to understand business goals through the lens of a UX designer, marketer, developer, business owner, and most importantly, the end user. This holistic view has been invaluable in navigating complex business challenges and ensuring that every product I design not only meets user needs but also drives business success.
As a Senior Product Designer at Ostre, I’ve had the pleasure of working closely with passionate startup founders, entrepreneurs, and business owners to bring their ideas to life. My role goes far beyond crafting beautiful designs—it's about strategically aligning design with business goals. I achieve this by blending UX research, marketing insights, and product development into a cohesive process that drives meaningful results. With years of experience helping building businesses from the ground up, I’ve worn many hats: from being the first product and graphic designer to taking on development tasks and working hand-in-hand with founders. As teams grew, I transitioned into leading and mentoring roles of new designers and developers, collaborating closely with marketing and sales teams. This diverse experience has given me a unique perspective—one that allows me to understand business goals through the lens of a UX designer, marketer, developer, business owner, and most importantly, the end user. This holistic view has been invaluable in navigating complex business challenges and ensuring that every product I design not only meets user needs but also drives business success.
Product Designer Mentor @ Adplist (Volunteer)
Jan 2024 - Present
As a mentor at ADPList, I have the opportunity to guide and support designers at various stages of their careers, from junior to mid-level professionals. ADPList is a global community that connects mentees with experienced mentors, and my role involves helping designers refine their skills, navigate career challenges, and grow into more confident, effective professionals.Unlike my work with entry-level mentees, many of the individuals I mentor through ADPList already have substantial experience in the field. My focus is on helping them sharpen their design processes, improve their strategic thinking, and elevate their work to the next level. Whether it’s providing feedback on portfolios, offering advice on navigating complex stakeholder relationships, or discussing best practices in UX/UI design, I tailor my mentorship to meet the unique needs of each mentee.
Product Designer Mentor @ ReDI School of Digital Integration (Volunteer)
Oct 2023 - Present
As a mentor at ReDI School of Digital Integration, I have the rewarding opportunity to support marginalised individuals by offering them free access to digital education. ReDI, a non-profit tech school founded in 2015, is dedicated to fostering a supportive and inclusive network within the tech industry, empowering students with the skills they need to thrive in the digital world.Through hands-on workshops and one-on-one sessions, I help students navigate foundational principles of UX/UI design. My goal is not only to teach design skills but also to instill confidence by following trough methodical design process.
Product Designer @ Sweap
Nov 2021 - Jul 2024 · 2 yrs 9 mos
At Sweap, as first design hire, I played a key role in transforming the product’s user experience and interface, leading to significant business growth. Following a successful product relaunch and a comprehensive overhaul of the UI and UX, we achieved a remarkable increase in net dollar retention from 103% to 119% over two years. This also led to a 26% expansion in annual recurring revenue (ARR), driven by increased user adoption.As the team grew I was responsible for creating a streamlined design and handover process that ensured seamless collaboration between design and development teams. By integrating Figma, Confluence, and Jira, I facilitated everything from user research and information architecture to stakeholder alignment, design iteration, and high-fidelity mockups. I also developed and maintained the Sweap design system, ensuring consistency across the product.My experience at Sweap gave me the opportunity to not only improve product performance but also enhance cross-functional collaboration, ensuring that every design decision aligned with both user needs and business goals.
UX/UI Designer & Frontend Developer @ MATE Development GmbH
Jul 2019 - Nov 2021 · 2 yrs 5 mos
At MATE, I was responsible for shaping the user experience and interface of key products. My work had a direct and measurable impact on the company’s business goals, particularly during the critical period of transitioning from in-person to virtual events due to the COVID-19 pandemic.One of my most impactful projects was designing an event creation process that reduced the time required to build a new event from over an hour to less than ten minutes. This improvement not only enhanced user satisfaction but also increased operational efficiency, allowing our clients to scale their event offerings more easily.When the pandemic hit, I quickly pivoted our product strategy, steering the development of a Virtual Event Platform. As the sole designer and frontend developer, I played a crucial role in helping the company survive and thrive during lockdowns by enabling clients to seamlessly host virtual events. This shift allowed MATE to maintain business continuity and even expand its customer base during a challenging time where our competitors where failing left and right.Additionally, I designed a no-code website builder that empowered clients to fully customise their event registration pages and virtual platforms. This flexibility became a key selling point for our product, driving customer retention and satisfaction.
Freelance UX/UI Designer & Frontend Developer
May 2018 - Jul 2019 · 1 yr 3 mos
Throughout my freelance career, I’ve had the privilege of working on several impactful projects, collaborating with diverse teams and organisations. My work spans across industries, from humanitarian efforts to large-scale public events, where I’ve applied my expertise in UX/UI design and frontend development to create user-centered solutions that directly support business and social goals.One of my most significant collaborations was with a team of software engineers and scientists from CERN and the Internal Displacement Monitoring Centre (IDMC). We worked together to track global displacement trends by collecting vast amounts of data ranging from online news outlets, portals, anonymous cellphone movements and other sources. I worked on design and development team of interactive map using React.js, which visualised this data in real time. This tool became essential for UN, governments and humanitarian organisations to monitor displacement patterns and respond more effectively to crises.Another great project was designing and developing a global check-in ticketing system for Turnfest, major gymnastics festival known as one of the world's largest events dedicated to sports and gymnastics. The system was fully aligned with Turnfest’s branding guidelines, ensuring a seamless guest experience for thousands of attendees. This project helped streamline the check-in process, significantly improving operational efficiency.
Featured Projects
No Code Website Builder
The No Code Website Builder was developed to address the limitations of the previous system, which only allowed users to select predefined options without any customisation. The goal was to create a more powerful, modular, and intuitive website builder that even beginners could use to create customised event websites. The old system was restrictive, offering only a single HTML template and style that couldn't be modified. This was inadequate for the growing customer base and their diverse branding needs. The primary users of this tool are event manager teams from various backgrounds, looking for a flexible and easy-to-use website creation tool.
Key Features
Styling Templates: Built on top of a multi-brand design system, allowing for diverse and customisable templates.
Registration Forms: Supports both free and paid event registrations.
Modular Design: All modules are modular and can be modified, including drag-and-drop positioning.
Pre and Post Event Modules: Managers can show or hide specific modules before or after the event.
Visual Module Picker: A visual interface for selecting modules, making it easier to understand how each module will look.
Global Styling: Allows for consistent styling across the entire website.
Company CI Font Import: Supports the import of company-specific fonts to maintain brand consistency.
Laika, Project Management App
Laika was designed to enhance team collaboration and streamline project management processes within organisations. The goal was to create a powerful, intuitive, and real-time collaborative tool that allows teams to manage projects more efficiently and effectively, addressing the limitations of project management tools on the market.
Laika won second place in Vaadin design competition with 120+ participants.
Sweap Design System
I've built and maintained the design system for the Sweap product. This involved creating a cohesive set of design guidelines and assets to ensure consistency across the product's user interface. The design system included elements such as color palettes, typography, and component libraries, all meticulously documented and regularly updated to meet evolving design needs.
Image Library
The Image Library was developed to enhance user experience for Sweap event managers and end users of the Sweap app. The goal was to enable users to reuse images between different events, edit images within the platform, eliminate the need for external image editing tools plus gain access for high quality photos directly in Sweap app.
App Redesign
The Sweep App Redesign was part of a larger rebranding effort, transitioning the company from Mate to Sweep. The goal was to review and improve the overall user experience of the application, ensuring consistency and enhancing usability.
Architecture studio website
The website for Egu Arch was developed as part of a larger rebranding project. The goal was to create a modern, visually appealing, and user-friendly website that reflects the new brand identity of the architecture studio. This included defining a brand font and creating a comprehensive style guide for website typography.
Photography studio website
The photography studio Morgan Ellis website design project aimed to create a visually compelling and user-friendly website that effectively showcases the studio's portfolio and aligns with its brand identity. The goal was to establish a strong online presence that attracts new clients and highlights the studio's artistic capabilities.
XLN Audio RC-20
Recreation project aimed to accurately recreate the popular audio plugin by XLN Audio. The goal was to captures the essence of the original plugin design directly in Figma.
No Code Website Builder
Website builder with a event registration page built inside it. I also created design system for registration page, split into modules and then into molecules and atoms
Dialog with content modules open in website builder. Modules can be added with a button or on drag and drop that reveals on hover
Laika, Project Management App
Objective:
Laika was developed to enhance team collaboration and streamline project management processes within enterprises. The goal was to create a powerful, intuitive, and real-time collaborative tool that allows teams to manage projects more efficiently and effectively, addressing the limitations of traditional project management systems.Problem:
The old project management systems were often restrictive and lacked real-time collaboration features, making it difficult for teams to work together seamlessly, especially in remote work environments. These systems were inadequate for the growing demand for flexible and dynamic project management solutions that cater to diverse team needs.Target Audience:
The primary users of this tool are startups or smaller teams within larger enterprises, looking for a flexible and easy-to-use project management tool that supports real-time collaboration. These users typically include project managers, team leads, and team members who need to coordinate tasks, share updates, and collaborate efficiently.Key Features:
Real-Time Collaboration: Built on the Vaadin Collaboration Kit, this feature allows team members to work together in real-time, ensuring that everyone is on the same page and can contribute simultaneously.
User Stories and Needs: Allows users to create detailed user stories and list their needs and wants, helping teams to stay focused on their goals and deliverables.
Prototyping and Feedback: Supports the creation of prototypes and gathering of feedback from team members, enabling continuous iteration and improvement of project designs.Cross-Team Communication: Facilitates communication between different teams, making it easier to coordinate efforts and share information across the organization.
AI Integration: Includes an AI-powered chatbot that provides information on tasks and projects, enhances team productivity, and offers predictive analytics for more accurate project planning.Technologies Used:
Laika was built using the Vaadin framework, which provides a robust and flexible platform for developing complex web applications.
Laika login screen
Task management of single project, with project team communication and Laika notifications regarding this project
Projects screen with general overview and chat
Edit task dialog, showing collaboration in real time
Sweap Design System
Responsible for building and maintaining the design system for the Sweap product. This involved creating a cohesive set of design guidelines and assets to ensure consistency across the product's user interface. The design system included elements such as color palettes, typography, and component libraries, all meticulously documented and regularly updated to meet evolving design needs.
Colors pallets for light and dark mode
Multidimensional component set of buttons with one button example open to showcase how its possible to edit component
Changelog of each addition with color variants open
Typography with all styles, created as local variables
Checkbox component with variations
Card component with variations
Image Library
Objective:
The Image Library was developed to enhance user experience for Sweap event managers and end users of the Sweap app. The goal was to enable users to reuse images between different events, edit images within the platform, and eliminate the need for external image editing tools.Problem:
Previously, users could not reuse images across events, nor could they edit images within the platform. This limitation required users to rely on external tools for image management, which was time-consuming and inefficient.Target Audience:
The primary users of this tool are event managers and marketing teams who need a streamlined, efficient way to manage and reuse images across multiple events. These users typically include event planners, marketing professionals, and content creators who need to maintain visual consistency and branding.Key Features:1. Centralised Storage: Provides a secure, centralised location for storing, organising, managing, and distributing images.2. Image Reusability: Allows users to easily reuse images across different events, saving time and effort.3. In-Platform Editing: Includes basic image editing tools, enabling users to make adjustments without leaving the platform.4. Access Control: Allows administrators to control access and permissions, ensuring that only authorised users can modify or use images.Technologies Used:
The Image Library was built using the ReactJS, and SCSS. It connects to the backend of the Sweap app and integrates with the Unsplash API to provide high-quality photography and design images for events when in-house resources are unavailable. The design was created in Figma, and the development was done by myself.
Image Library, main view
Image Library upload view
Image Editor view, cropping menu on the right with all cropped versions on bottom
App redesign
Objective:
The App Redesign was part of a larger rebranding effort, transitioning the company from MATE to Sweep. The goal was to review and improve the overall user experience of the application, ensuring consistency and enhancing usability.Problem:
The existing application had several issues, including crowded navigation, problematic UX patterns, and inconsistent UI elements across different screens. These issues made the app difficult to use and negatively impacted the user experience.Target Audience:
The primary users of this tool are event managers and administrators who use the Sweep app for planning and managing events. These users need a streamlined, intuitive interface to efficiently navigate and utilize the app's features.Key Features:
New Navigation Structure: Introduced a new method for navigation, including a redesigned menu and header, to improve user flow and accessibility.Consistent UI Elements: Standardised button structures, list views, and other UI components to ensure a cohesive look and feel across the app.Card and List View:
Implemented both card and list views across all pages, enhancing the visibility of data. This feature was previously limited to a single area of the app. Now, it is available on pages like emails, registration, partners, and speakers, making it easier to find information through visual presentation.User Experience:
The user experience was greatly improved with the Sweep App Redesign. The new navigation structure simplified the user flow, making it easier for users to find what they need. Consistent UI elements reduced confusion and improved the overall aesthetic of the app. The redesigned registration process enhanced the workflow for event planning, making the app more efficient and user-friendly. The introduction of card and list views across all pages significantly improved the visibility of data, making it easier for users to find what they are looking for, especially on pages like emails, registration, partners, and speakers.
Before:
Old version of list view, showing menu that is big and subpages are often hidden (bad UX pattern), top header was confusing, ux pattern of button was confusing, primary button was war away, next to filtering. Secondary button was with search in center.
After:
Events page with new navigation, header, action buttons and filtering, registration counter widget. Added icons to improve quick reading of page titles.
List view consistent with card view, using same padding as a card view. UI pattern fitting well with new button and header navigation.
Speakers page on account level, speakers are now reusable throughout all events in account / organisation. Switch between list and card view is visual and simple.
Speakers in website builder
Designs for all cards and examples of use
Arhitecture studio website
Objective:
The website for Egu Arch was developed as part of a larger rebranding project. The goal was to create a modern, visually appealing, and user-friendly website that reflects the new brand identity of the architecture studio. This included defining a brand font and creating a comprehensive style guide for website typography.Problem:
The previous website did not align with the new brand identity and lacked a cohesive design language. It was outdated, difficult to navigate, and did not effectively showcase the studio's portfolio or services. This hindered the studio's ability to attract new clients and present a professional image.Target Audience:
The primary users of this website are potential clients, partners, and collaborators in the architecture and design industry. These users need an engaging and intuitive platform to explore the studio's work, learn about their services, and get in touch with the team.Key Features:Modern Design:
Implemented a sleek, contemporary design that aligns with the new brand identity of Egu Arch.Brand Font and Typography Style Guide:
Defined a brand font and created a comprehensive style guide for website typography to ensure consistency across all pages.Portfolio Showcase:
Developed a visually appealing portfolio section to highlight the studio's projects, complete with high-quality images and detailed descriptions.Responsive Design:
Ensured the website is fully responsive, providing an optimal viewing experience on all devices, from desktops to mobile phones.User-Friendly Navigation: Redesigned the navigation structure to make it intuitive and easy for users to find information.The design was created in Figma.
Egu Arch home screen
Photography studio website
Objective:
The Photography Studio Morgan Ellis Website Design project aimed to create a visually compelling and user-friendly website that effectively showcases the studio's portfolio and aligns with its brand identity. The goal was to establish a strong online presence that attracts new clients and highlights the studio's artistic capabilities.
Morgan Ellis home screen
XLN Audio RC-20
Recreation project aimed to accurately recreate the popular audio plugin by XLN Audio. The goal was to captures the essence of the original plugin design directly in Figma.
XLN Audio RC-20 Final Design
RC-20 Figma project