Happy Calendar is a web application designed to be a one-stop platform for individuals to discover and learn about national and international holidays, observances, popular events, and concerts. The platform’s primary objective is to provide an enjoyable and informative user experience that encourages continuous learning and engagement with various cultural, historical, and entertainment events.
Enhancing Happy Calendar Engagement and Visual Appeal
ABOUT
Client: Happy Calendar
Duration: March 2023- October 2023
Duration: March 2023- October 2023
Tools Used: 
ROLE
Product Designer
- Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, and Information Architecture.
I recently worked on Happy Calendar website project that required a gentle approach. The client expressed concerns about their recently launched website not achieving the desired conversion rates. With budget constraints and a highly restrictive content management system (CMS) in place, I set out to enhance user engagement on the site.
The primary objectives are to increase the number of page impressions, Encourage engagement with the brand, Encourage users to contribute content or otherwise get involved, and to also Drive social sharing through a user-friendly form.
The Challenge
Happy Calendar is currently facing challenges that hinder its effectiveness in providing users with a seamless and intuitive experience for discovering and planning national and international holidays, observances, popular events, and concerts.
Usability Challenges: Users find it difficult to navigate the existing application, hindering their ability to easily explore and engage with events.
Outdated Design Aesthetics: The platform suffers from an outdated visual design, potentially diminishing its appeal and failing to resonate with a modern user base.
Limited Personalization: The current version lacks robust features that allow users to personalize their experience and tailor event recommendations to their preferences.
Mobile Responsiveness: The platform is not optimized for mobile devices, restricting accessibility and limiting user engagement on the go.
Engagement and Retention: Users do not find enough incentive to consistently use the application, resulting in low engagement and retention rates.
Solution Statement
The proposed solution for Happy Calendar involves a comprehensive redesign focused on enhancing usability and user engagement. This will be achieved through a strategic redesign of the user interface, information architecture, and the incorporation of personalized features. By optimizing the website’s design for intuitive navigation, providing a consistent and aesthetically pleasing user interface, and implementing features for event personalization and management, the solution aims to empower users in efficiently discovering, tracking, and planning their activities around holidays, observances, events, and concerts. The ultimate goal is to create a user-centric platform that maximizes user satisfaction and engagement, establishing Happy Calendar as a trusted and indispensable resource for event-related information.
The process
1. User Research
Survey and Questionnaires
To gather quantitative data on user demographics, satisfaction levels, and platform preferences I created an online survey and distributed it to a sample of 200 users.
Key Findings
50
of respondents preferred Websites for event tracking, citing ease of use and accessibility
60
of users desired more customization options to tailor their event recommendations.
Loading speed and app responsiveness were cited as critical factors affecting satisfaction.
App Store and Website Reviews Analysis
To extract insights from user reviews regarding UX/UI problems and areas for improvement. I analyzed user reviews on app stores (iOS and Android) and the Happy Calendar website.
Key Findings
Usability Evaluation
Having identified my user and their feedback on the website, My aim is to observe their interaction with Happy Calendar. Usability testing serves the purpose of assessing the website’s user interface, navigation, and overall user experience. Through observing real users, we seek to pinpoint issues, collect qualitative insights, and validate design decisions for improved usability.
Participants
A total of 20 participants, representing diverse demographics and technical backgrounds, were involved in the user testing.Key Findings
Homepage
- The majority of participants expressed concerns about the cluttered appearance of the homepage.
- Users found the layout overwhelming, with too much information competing for attention.
Navigation and Task Completion
- Users reported mixed experiences with navigation.
- While some found it relatively easy to navigate, others encountered difficulties in accessing certain pages and returning to previous pages.
Visual Appeal
- The cluttered homepage was a common point of feedback, with users emphasizing the importance of an aesthetically pleasing design.
- Recommendations were made to enhance visual hierarchy and streamline the presentation of information.
Content Discovery
- Participants appreciated the diverse content, including events and holidays, available on the website.
- However, some users suggested improvements in organizing and categorizing content for easier discovery.
Mobile Responsiveness
- While mobile users appreciated the responsiveness, specific feedback highlighted opportunities for improvement.
- Participants suggested optimizing certain features, ensuring consistent functionality, and refining the user interface for a seamless mobile experience.
Following the user research findings for Happy Calendar website and app, the next crucial step is to translate these insights into actionable strategies that align with the users’ needs, behaviors, pain points, and preferences. The collected data provides a foundation for informed decision-making in the design and development process. To deepen my understanding, I organized and analyzed the research findings, identifying patterns and trends. This synthesis enabled me to prioritize key areas for improvement and innovation. Subsequently, the development of Empathy map and Task mapping can help visualize the user experience, ensuring that the design and functionality align seamlessly with user expectations.
2. Empathy mapping
An empathy map helps to understand the user’s perspective, feelings and needs in relation to a specific product or service. Below is an empathy map for a typical Happy Calendar user
3. Task Analysis
In Task analysis, I broke down user tasks and identified inefficiencies or complexities in completing these tasks. Here are the key user tasks users perform in Happy calendar
Task 1: Discovering Events
Scenario : Users want to discover events relevant to their interests and preferences.
Steps
1. Open the Happy Calendar app/website.
2. Browse through event recommendations on the homepage.
3. Use search and filtering options to find events by category, location, date, or keywords.
4. View event details for more information.
Inefficiencies/Complexities:
If the homepage lacks personalized recommendations or prominently featured events, users may struggle to find interesting events.
Complex or hidden search and filtering options can impede users from finding events efficiently.
Task 2: Adding Events to Personal Calendar
Scenario : Users want to add events they are interested into their personal calendar.
Steps
1. Open an event’s details page.
2. Find and click the “Add to My Calendar” or similar button.
3. Specify which calendar to add the event to (if multiple calendars exist).
4. Confirm the addition.
Inefficiencies/Complexities:
If the “Add to My Calendar” option is not easily accessible or is unclear, users may not add events to their calendars.
Lack of integration with popular calendar applications may require manual calendar entry.
Task 3: Setting Event Reminders
Scenario : Users want to set reminders for events to receive timely notifications.
Steps
1. Open an event’s details page.
2. Find and click the “Set Reminder” or similar button.
3. Configure reminder settings (e.g., time, notification method)
4. Save the reminder.
Inefficiencies/Complexities:
If reminder settings are buried in menus or lack clear instructions, users may struggle to set reminders.
A confusing or limited selection of notification methods can frustrate users.
Task 4: Managing Personal Calendar
Scenario : Users want to view and manage events they’ve added to their personal calendar.
Steps
1. Access the “My Calendar” or “Saved Events” section.
2. Browse through a list of their saved events.
3. Edit or delete events as needed.
Inefficiencies/Complexities:
If accessing the personal calendar is not intuitive or requires multiple clicks, users may face difficulties.
Ambiguity or lack of user-friendly options for editing or deleting events can be problematic.
Task 5: Contribute and review event information.
Scenario : Users want to add events they are interested into their personal calendar.
Steps
1. Access the “Contribute” or “Add Event” section.
2. Fill in event details (e.g., title, date, time, location).
3. Optionally, provide additional information or reviews.
4. Submit the contribution.
Inefficiencies/Complexities:
If the “Contribute” section is not easily found or lacks clear guidelines, users may be hesitant to contribute.
Ambiguity regarding the review and submission process can deter users from sharing their insights.
Task 6: Syncing with External Calendars
Scenario : Users want to sync their Cute Calendar with external calendar applications (e.g., Google Calendar).
Steps
1. Access the calendar settings or account preferences.
2. Find the option to sync with an external calendar.
3. Authenticate and connect their external calendar account.
Inefficiencies/Complexities:
If the sync option is not clearly labeled or lacks user-friendly instructions, users may face difficulties in setting up synchronization.
Authentication and connection procedures can be confusing, leading to syncing issues.
Identifying these tasks and the potential inefficiencies or complexities associated with them guided the improvements in the Happy Calendar user interface and functionality. This process helped me form the new information architecture of the website.
4. Information Architecture
Based on all the previous findings, a clear information architecture was established, organizing events into categories, providing detailed event pages, and enabling seamless search functionality. Designing an effective information architecture (IA) for Happy Calendar involves organizing and structuring the content and features in a logical and intuitive manner, ensuring users can easily navigate, discover, and engage with events to enhance the findability and accessibility of events.
- Homepage: Streamlined the homepage with a clear value proposition and intuitive navigation.
- Event Categories: Created distinct categories for holidays, observances, events, and concerts to help users navigate easily.
- Search Functionality: Improved the search feature to provide relevant and accurate results with filters for better refinement.
5. Wireframing and Prototyping
Developed wireframes and interactive prototypes to visualize the redesigned user interface.
-
Enhanced Event Pages: Redesigned event pages to present information in a structured and visually appealing manner.
-
Personalization: Introduced features for users to save events, set preferences, and receive personalized recommendations.
Homepage
Calendar
Event view
My calendar
Categories
6. User Testing
With the new wireframes completed and ready, it’s time to collect user feedback. This report outlines the methodology, key findings, and recommendations based on user interactions with the updated design.
Participants
A total of 20 participants, representing diverse demographics and technical backgrounds, were involved in the remote user testing using the Useberry testing platform.Tasks
- Explore upcoming national holidays on the calendar.
- Find information about a popular international event.
- Add a personal note for a specific date.
- Navigate to a section providing historical insights about a particular holiday.
- Share a discovered event on social media.
Metrics
Task Success Rate, Time on Task, Participant Feedback and Observations
Key Findings
Task 1 (Explore upcoming national holidays)
100
Success Rate
8
Avg. Time on Task
”The calendar view made it simple to identify holidays, but it took me a moment to understand how to switch between months.
Observations
- Participants generally had a positive experience finding national holidays.
- A few participants noted a slight learning curve in navigating between months.
Task 2 (Find information about a popular international event)
100
Success Rate
10
Avg. Time on Task
”I expected a dedicated section for international events, but I had to use the search. It was a bit confusing.
Observations
- Some participants found the navigation to international events less intuitive.
- Positive feedback on the depth of information provided once the international event was located.
Task 3 (Add a personal note for a specific date)
100
Success Rate
5
Avg. Time on Task
”Adding a personal note was straightforward. I liked the customization options
Observations
- Overall positive feedback on the ease of adding personal notes.
- Suggestions for a more intuitive visual cue for adding notes.
Task 4 (Navigate to a section providing historical insights):
100
Success Rate
9
Avg. Time on Task
”The historical insights section was fascinating, but it wasn't immediately clear how to get there from the main calendar
Observations
- Some participants faced challenges navigating to the historical insights section.
- Positive feedback on the content and presentation of historical information.
Task 5 (Share a discovered event on social media)
100
Success Rate
3
Avg. Time on Task
”I didn't notice the social media icons initially; they could be more prominent.
Observations
- Positive feedback on the functionality of sharing events on social media.
- Suggestions to improve the visibility of social media icons.
7. Visual Design
The visual design phase involved selecting a vibrant color palette, designing a clean and visually appealing interface, and integrating engaging visuals to enhance user engagement.
Colors
#ffce59
#707070
#333437
#ffffff
Fonts
Poppins
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Raleway
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Icon design
Homepage
The new homepage design has not only improved the visual appeal but has also streamlined navigation, making it more intuitive for users to access and engage with the calendar’s features.
Calendar
Whether users are planning ahead or reflecting on past happenings, the calendar view empowers them with flexibility and control over their event exploration. The interactive and responsive nature of the page ensures a smooth and engaging experience, making event management and exploration a delightful process for users of Happy Calendar.
Category
Users can easily navigate through a curated selection of categories, each representing a distinct type or genre of events. Whether it’s concerts, conferences, sports, or cultural gatherings, the Category Page provides a comprehensive overview, allowing users to explore events that align with their preferences.
And more ..
8. Accessibility Review
While collaborating with the development team in an agile manner, I initiated accessibility testing. Now, it is time to evaluate Happy Calendar website for compliance with accessibility standards. The goal is to ensure a user-friendly experience for individuals with disabilities, fully aligning with the Web Content Accessibility Guidelines (WCAG) 2.1, which is the internationally recognized standard for web accessibility.
Operability
a. Keyboard Accessibility (2.1): – All functionality is operable through a keyboard interface, and logical tab order is maintained. – Focus management is effective, contributing to a seamless keyboard navigation experience.
b. No Time-based Media (2.2): – As there is no audio or video media, this criterion is not applicable.
Understandability
a. Readability (3.1): – Text readability is good, employing clear and plain language throughout the website. – Content is accessible and easily understood by a diverse audience.
b. Input Assistance (3.3): – Input assistance features, including error suggestions and form validation messages, are effective. – Users receive clear and helpful feedback, enhancing the overall user experience.
Robustness
a. Compatibility (4.1): – The website is compatible with various assistive technologies, ensuring a broad user reach. – Functionality remains consistent across different browsers and devices.
Additional Considerations: a. Color Contrast: – Color combinations are well-considered, providing sufficient contrast for users with visual impairments.
b. Navigation and Structure: – The navigation structure is clear and consistent throughout the website, contributing to a positive user experience.
c. Forms and Interactivity: – Forms are accessible, and interactive elements are usable with assistive technologies.
Happy Calendar new design is very accessible. It meets key criteria that accommodate users with disabilities. The absence of audio or video media simplifies certain aspects of accessibility compliance. The website exhibits good practices in terms of responsiveness, keyboard accessibility, and readability. Ongoing attention to color contrast, navigation consistency, and compatibility testing will further enhance the website’s accessibility.
9. Performance Evaluation
Performance is integral to the success of news and events websites. It directly influences user experience, retention, and the website’s overall effectiveness in delivering timely and relevant information to a diverse and demanding audience.
This performance evaluation aims to thoroughly assess the speed, responsiveness, and overall performance of the Happy Calendar’s new website design.
Testing Methodologies and results
Page Load Time Testing
- Utilized tools such as Google PageSpeed Insights and GTmetrix to measure the average page load times across various pages of the website.
- Conducted tests under different network conditions to simulate user experiences on varying internet speeds.
Results
- Average page load times were found to be within an optimal range, providing users with a swift and efficient experience.
- Noted variations in loading times based on the complexity of content, with the majority of pages loading quickly.
Resource Loading Analysis
- Employed browser developer tools and web performance testing tools to analyze the loading times of key resources, including images, scripts, and stylesheets.
- Investigated the impact of resource loading on overall page speed and identified opportunities for optimization.
Results
- Identified and addressed bottlenecks in resource loading, optimizing images and scripts for faster delivery.
- Resulted in improved resource loading times, contributing to the overall speed of the website.
User Interaction Responsiveness
- Utilized tools like Lighthouse and browser-based developer tools to assess the responsiveness of interactive elements, such as buttons, forms, and dropdowns.
- Conducted user journey simulations to evaluate the website’s performance during various user interactions.
Results
- Interactive elements demonstrated responsiveness, providing users with a smooth and seamless experience during various interactions.
- Form submissions, button clicks, and dropdown selections responded promptly, contributing to positive user engagement.
Cross-Browser and Cross-Device Testing
- Tested the website on multiple browsers, including Chrome, Firefox, Safari, and Edge, to ensure consistent performance across different browser environments.
- Utilized browser developer tools and responsive design testing tools to assess the responsiveness of the website on various devices, including desktops, laptops, tablets, and mobile phones.
Results
- Confirmed consistent performance across major browsers, ensuring a uniform experience for users regardless of their browser preference.
- Responsive design testing revealed optimal performance across various devices, enhancing accessibility and usability.
Scalability Testing
- Simulated scenarios of increased user activity and traffic to evaluate the scalability of the website.
- Monitored server response times and overall system performance under peak load conditions.
Results
- The website exhibited good scalability, effectively handling simulated increases in user activity and traffic.
- Server response times remained stable even under peak load conditions, ensuring reliability during high-traffic periods.
The project doesn't end here....
11. Continuous Improvement
Here’s how I am planning to keep improving Happy Calendar website, ensuring that it not only meets but exceeds user expectations. By establishing an ongoing system for feedback collection and user monitoring, we aim to dynamically adapt to evolving user needs and embrace technological advancements, making Happy Calendar experience consistently delightful and efficient.