THE PROBLEM
Lots of people struggle with coordinating their time and schedules with family and friends—it's a real challenge. The back-and-forth of figuring out everyone's availability and juggling multiple activities and events can be a real headache.
THE GOAL
My goal was to streamline the event scheduling process to create a user-friendly way for people to schedule events with their loved ones. I wanted to bypass unnecessary communication and allow users to instantly see what time works for them. I also wanted to focus majorly on responsive design.
PRODUCT PREVIEW
THE PROCESS
I applied the user-focused design process again, mirroring the approach I used for the CineSnack project. This journey encompassed ideation, user research, wireframing, user flow mapping, low-fidelity prototypes, and, eventually, high-fidelity prototypes. These stages provided a structured path to refine ideas, assess my work, and collect valuable user feedback.
IDEATE
Sketches Spark Ideas
Utilising the "Crazy 8's" exercise and engaging in a brainstorming session aligned with Google's Design Sprint methodology, I generated ideas for the features I wanted to highlight in my web application. I quickly sketched numerous concepts and received feedback from my peers, enabling me to refine and enhance the initial draft versions of the application's screens.
USER RESEARCH
Your Time, Your Way
Interviewing sample users for my project provided meaningful insights into what users wanted most. From the conversations, I identified two main user groups: those managing their and their child's schedules and those looking for an easy way to plan events with friends, family, and colleagues.
Users need their time organised for them amid their hectic lives. Nobody wants to spend all their time figuring out their time.
At first, I thought users would prefer sharing their schedules with everyone so others could see when they're free. But, as it turns out, many people don't want to share their schedules with absolutely everyone. It became clear that users don't necessarily need to see the nitty-gritty details of someone's schedule; they just want to know when there's shared free time between them!
I identified three pain points from my sample users:
Users don’t want the hassle of the ‘back and forth’; they just want simple and effective communication to organise time together.
Users struggle to find available time to do what they want and organise events.
Users are frustrated with being stuck in the dark, not knowing whether their events have been scheduled with others or not and who is involved with what they’re doing.
From here, I created a persona to refer back to for the remainder of my project to ground my work and give myself an “actual” user to reference.
Competitive Audit
I conducted an audit of competitors, specifically focusing on Apple Calendar and Todoist, to understand their offerings and functionalities. In my analysis, I identified significant gaps and opportunities for improvement. Notably, these apps fail to capitalise on the importance of collaborative time and task management. While Apple Calendar does a great job with its visual design and seamless event organisation, and Todoist efficiently handles task creation with due dates, and priorities, both fall short in enabling collaboration with other users. They lack features that allow users to share calendars and task lists, and synchronise schedules for organizing events collectively.
USER FLOW
Mapping our User’s Journey
I spoke with potential users to devise the user flow for this application. I considered how someone might proceed from opening the website to completing the tasks they would need to manage their schedules effectively. I also thought about how one might add a new member and add their schedule, view their calendar to see when they have free time, and add a new event. This was crucial for thinking about features that would be necessary in the design!
SITEMAP
Next, I considered the sitemap for this project. This type of information architecture is crucial to understanding how I planned to organise my application and how users will perceive and eventually navigate through it.
WIREFRAME
Dashing through Designs
I rapidly iterated through multiple rough designs for the paper wireframes, quickly sketching various web pages for the desktop application. I used basic shapes and lines to represent images, text, and buttons. This iterative process not only helped refine the design but also contributed to generating concrete page ideas for the project.
I also iterated through mobile pages corresponding to their desktop versions to achieve my responsive design. I adjusted image, button, and text positioning, applying the gestalt principles of proximity, similarity, and symmetry. This ensured readability and coherence, optimizing the application for usability on mobile devices.
LOW-FIDELITY PROTOTYPE
Drafting the Digital Prototype
I digitised my wireframes using Figma and converted them to a low-fidelity prototype. I recreated the various web pages of my application for desktop and mobile, using basic shapes for buttons and images and utilising Lorem Ipsum as placeholder text. This approach allowed me to focus on the visual layout and structure of the web pages while maintaining a clean and professional appearance.
To enhance user navigation on the mobile version of the website, I implemented a hamburger menu button and flyout menu, ensuring a less crowded and clearer interface. This approach aimed to optimize the mobile user experience by simplifying the screen layout and facilitating easier navigation through the application.
HIGH-FIDELITY PROTOTYPE
Bringing My Designs to Life
Based on my low-fidelity prototype, I created a (somewhat) high-fidelity prototype, incorporating actual text, content, images, and iconography into the application.
USABILITY STUDY
In an effort to enhance the user experience I conducted a usability study between December 20-23. During this study, I focused on core tasks on both the desktop and mobile versions of the website using my prototype. The primary goal was to identify specific difficulties users might encounter whilst completing any tasks.
STUDY PARAMETERS
Moderated usability study
Remote
5 participants
10-15 minutes in length
I identified three key findings from my study:
Users found the dashboard intuitive and well-organised but wanted the ability for customised recommendations or to be able to customise it themselves.
1
Users want to be able to sort and categorise to-do list items by importance and priority.
2
Users want the integration of AI suggestions for optimal meeting times based on data on family members' availability.
3
ITERATE
Creating a Connection
I reworked my designs based on user feedback to create a better application with a more intuitive and seamless user experience.
In the initial high-fidelity prototype, users manually selected family members and picked a time for events in the calendar. After user feedback favoured an “AI”-driven approach, I updated the prototype. Now, when selecting a family member(s) to add an event with, suggested time blocks appear on the calendar based on mutual free time from the selected members’ calendars. This change streamlined the process and helped users focus on easily connecting with those around them.
Before Usability Study
After Usability Study
I incorporated a footer across all website pages to enhance the realism, and, in response to user feedback, I introduced a "customise" button on the Dashboard, allowing users to tailor it to their preferences. Additionally, colour-coded priorities were implemented in the To-Do List, enabling users to easily identify the importance of tasks—red indicating the highest priority, followed by orange and green.
Before Usability Study
After Usability Study
Also, in response to user feedback from the usability study, I enhanced the To-Do List page to clarify task importance. Initially, I introduced coloured buttons to signify priority, but this was too subtle. I subsequently adjusted the design to feature coloured boxes around the due dates. This provided a more prominent visual cue and emphasised the priority and due date for users at a glance!
Before Usability Study
After Usability Study
Fostering that Connection Starts With Welcoming Users
A minor change I made was based on some user feedback where my participants expressed that they didn’t connect with the corporate illustrations on my homepage. To create a more welcoming experience that the users can connect with, I used stock images of happy families to emphasise the core idea behind the website: Synca manages your schedule so that you can manage your life.
Before Usability Study
After Usability Study
Mobile Version After Usability Study
Below, users can follow a simple user flow for both the desktop and mobile versions of Synca. There are some variations between the two for usability and accessibility purposes so that both respective versions of the application function correctly on various devices.
ACCESSIBILITY CONSIDERATIONS
A More Inclusive Design
Whilst creating my high-fidelity prototype, I had to take into account whether or not my designs were accessible. I did this in numerous ways and listed two examples below.
I chose a colour palette consisting primarily of #223180 and #B2C9AB. I used them on a white background to ensure a high contrast ratio to adhere to WCAG 2.0 Guidelines.
1
I employed certain hierarchical structures for headings and body text so that screen readers could identify subsections and navigate through the website. This enhances the experience for individuals relying on assistive technologies.
2
FINAL TAKEAWAYS
The design of the application was very well received by those that I tested it with! Everyone appreciated the changes I made based on their feedback, and many of them are waiting for the real application to be released.
“I would use this app in my day-to-day life, it’s ingenious!”
I learned so much about creating responsive designs during this project. I am now more fluent with Figma, and I can create designs that can be adjusted on a whim for different device types. I was also proud to further experiment with interactivity and I managed to create more exciting prototypes with “animation” effects using variants and interactions.
NEXT STEPS
The next step for this project would be to create more variations of screen sizes for tablets and other devices. I would also focus on more features, such as adding subtasks to the To-Do List.
If I had more time, I would mock up more processes in the design so that the user/engineers can experience other parts of the application in action.
I would conduct another round of user testing with the updated features to gather additional feedback and identify potential usability issues.
I would conduct another competitive audit with more apps in a similar category, such as the iOS app: “Howbout”
