Project Overview | Previous Calendar | UX Research | Mid-Fidelity Wireframe | Finished Web Application | Takeaways
Revize.
Web Application
UX/UI Designer
Mar 4 2024 - Mar 18, 2024
This calendar application is used by municipalities nationwide to digitally highlight community events. As we serve a variety of communities, the events can range from council meetings to city parades, and even small gatherings at public libraries. I took on the challenge of modernizing this application to enhance the way municipalities engage with their users.
The old UI has a standard calendar layout, where municipalities populate it with community events.
Users can filter through events by clicking color-coded category buttons at the top, switch between different calendar views (month, week, day, or list), and access event information via pop-up by clicking on individual events.
I conducted a competitive analysis to review other similar web experiences, focusing on a few questions:
The interview portion was a quick but useful step in our research. I met virtually with 5 of our clients that represented various types of municipalities. Below are the questions asked and key takeaways.
Do you have any frustrations about our current calendar application?
What type of events do you most commonly add to the calendar, and what type of content do you need space for?
How well do you feel the calendar application matches the design for the rest of your website? Is this important to you?
What new features would be most helpful for your community?
To simplify the wire framing stages, I wanted to understand which features I have available and how important they are for our target audience. This helped set a standard for which content to incoorporate.
A separate consideration was the time developers could allocate for this project. I was given permission to 'go wild' with the design and features, but also understood we had many internal projects happening and to design within reason.
During stakeholder discussions and user interviews, it became clear that a complete overhaul of the application was unnecessary. The feedback from clients learned towards satisfaction with the calendar's core functionality, which let us shift our focus to refining the user experience. From this point, our main goal was to enhance the UI and optimize content placement to improve usability without changing what already works well.
This wireframe serves as a starting point for reorganizing the calendar's layout. It offers the flexibility to make adjustments, allowing for easy tweaks to add, remove, or update elements before progressing to the final designs.
This is where it all comes together! The mid-fidelity wireframe was well received by stakeholders, so I moved onto adding the UI and prototyping. My goal was for all the elements to be intractable, properly displaying the hover effects and actions that users would experience.
The visual language of the calendar application is meant to be clean, minimal, and organized. This lets it reasonably blend into most websites. The grayscale color scheme lets the content breath and provide emphasis towards the brand colors.
When creating the prototype, my goal was for all the elements to be interactible, properly displaying the hover effects and actions that users would experience.
While I unfortunately didn't have the time to conduct user testing to verify these updates, the prototype provided a good showcase for stakeholders and developers to understand the flow and interactions of the application.
Credit: Thank you to Zeta Fonts for allowing me to use their beautiful font, Unigeo, on my personal website.