Matija Vojvodic
Senior Product Designer | 5+ Years in UX/UI Design | Front-End Development | Graphic Design
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.
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
Objective:
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.Problem:
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.Target Audience:
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.
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