UX/UI design
Mar 12, 2024
What is Volugram?
The Volugram recognition tool is a web application designed to evaluate and acknowledge volunteer efforts, with a particular focus on short-term volunteering engagements. Its primary objective is to recognize voluntary contributions as a flexible, informal, and personalized learning journey while advancing the assessment and validation of micro-volunteering.
By bridging the gap between volunteering, informal learning, and community initiatives, the Volugram project aims to establish sustainable platforms within project areas and develop scalable solutions applicable at the European level. Specifically the project will develop and give access to quality training materials and guidelines for volunteer coordinators that can be used in other areas and communities. Furthermore, the project develops methods and e-tool to validate voluntary work as a part of the individual learning process.
My role
At the onset, I met with the project lead and project manager to establish clear objectives for the certificate design and to outline my role in the forthcoming redesign of the Volugram web application.
My responsibility was designing the base and content structure of a three-page certificate in four different languages.
Additionally, I offered valuable insights and recommendations for enhancing the user experience (UX) and user interface (UI) of the Volugram web application.
Subsequently, I spearheaded the complete redesign of Volugram's web application and landing page. This involved establishing a comprehensive design system and collaborating closely with developers to ensure seamless integration of my design concepts. Throughout the process, I implemented refined UX/UI elements to enrich user engagement and elevate the aesthetic appeal of the platform.
Finally, I deployed the project website volugram.eu on WordPress, providing users with a hub for accessing initial project details, a concise user manual, and a link to the volunteer recognition tool.
Certificate design
Given the urgent timeline for the certificate design, I prioritized this task initially. Exploring various styles, I aimed for a design that harmonized with Volugram's visual identity without overwhelming it. Sharing my initial concepts with the project lead, I welcomed feedback on both the structure and aesthetic. Subsequently, I refined the design and documented the layout. I developed templates for the certificate in Estonian, English, German, and Norwegian, providing comprehensive examples and blanks.
UX/UI for the recognition tool
UX/UI suggestions
Initially I was tasked with conducting a thorough UX/UI analysis of the existing Volugram application, with the objective of identifying opportunities for incremental improvements to enhance the user experience. Subsequently, I curated a comprehensive list of suggestions outlining actionable strategies to refine and elevate the functionality and usability of the app.
After discussing the feedback, the project lead, project manager, and I collaborated to determine the next steps. Despite their preference to maintain the dark theme of the web app, I proposed aligning the informational landing page with this style, rather than the white background and light theme previously used. This ensured consistency for users, preventing any jarring transitions between the landing page and the recognition tool.
Redesign of the Volugram web app
At this juncture, the project concluded its collaboration with the developers responsible for the recognition app and began searching for new ones. This transition presented an opportunity to overhaul the web app, aligning it more closely with Volugram's objectives and enhancing user comfort and experience.
I was presented with the opportunity to undertake the redesign and reconstruction of the app, a challenge I readily accepted. It was imperative to maintain the integrity of the backend information and form fields throughout the process.
Design process
I began my process by mapping out the main user flow and consolidating a style guide based on the existing app's design elements.
From there I delved into refining the app's internal navigation. The existing menu appeared redundant and overly complexed the user journey. With only three primary functions, I opted to streamline the user experience by consolidating all options onto the initial view of the app.
Following that, I proceeded to draw out the remaining user flows while concurrently assembling a concise design system for future reference by the developer.
Once the mobile prototype received positive feedback from the project lead, I proceeded to design the desktop view accordingly.
With everything in place, I was prepared to conduct testing with a few users and finalize the design for handover. As the new developer familiarized themselves with the current app, I introduced them to my design and remained a consistent source of support throughout the implementation phase.
Website design and deployment
Finally, I was tasked with the redesign of the informational website for Volugram project to create a seamless user experience between the website and the recognition tool. I conceptualized and designed the website which I then deployed on WordPress, providing users with a central platform to access initial project details, a concise user manual, and a link to the volunteer recognition tool.
My takeaway
Throughout this project, I gained invaluable experience collaborating within a compact team structure, where each person takes full responsibility for their tasks. I embraced adaptability, learning to collaborate with the project lead and developer to translate my designs into functional reality.
This experience was not only an invaluable platform to showcase my skills but also to contribute to the creation of a product that promises lasting user satisfaction and utility.