Birthdays - App Design
Overview
"Birthdays" is a user-centered design solution that addresses the common problem of individuals struggling with remembering birthdays and finding appropriate gifts for their loved ones. Through user research, the issue of forgetting birthdays, the difficulty of remembering personal interests and the uncertainty of gift-giving were identified as key pain points. The goal of this project was to design an application that facilitates the tracking of birthdays, the logging and learning of personal interests, the sending of personalized messages, and the ability to make informed decisions regarding gift-giving.
Background
Role:
Sole UX/UI Designer
Duration:
3 weeks
Tools:
Tools:
Figma
Figma
Personal
Project type:
App Intro
The Birthday App is a user-friendly tool that helps individuals stay organized and on top of their friends and family's birthdays. This application allows users to keep track of birthdays, interests, and previous gifts, and personalize birthday messages to be sent at their convenience. Our objective is to simplify the process of remembering birthdays and finding the perfect gifts, ensuring that users never miss an opportunity to celebrate their loved ones.
Roles (In Depth)
-
Conceptualized and developed the idea for Birthdays
-
Conducted user research, gathering feedback and insights from potential users
-
Created user flows and wireframes to outline the app's functionalities and navigation
-
Designed the visual elements, including the layout, typography, and color scheme
-
Developed and tested a prototype of the app to gather user feedback and make necessary revisions
Research
To ensure that the application met the needs of its intended users, a user research study was conducted. A total of 10 individuals, ranging in age from 20 to 70, were interviewed and their feedback was used to inform the design and development process. This project serves as a prime example of my ability to apply user-centered design principles, user research, and testing to create effective and efficient solutions for real-world problems.
In order to develop the birthday management app, I conducted research by interviewing 16 individuals through a survey created on Google Forms. The results of the survey revealed that 62.5% of participants felt the need for a more efficient way to manage their friend's birthdays and interests, 93.8% felt the need to silence notifications from certain friends on a social media platform, 68.8% felt overwhelmed by the number of notifications they receive on their phone, 68.8% do not currently manage their friend's interests and gift ideas, 93.8% have forgotten to wish a friend a happy birthday on their special day, 62.5% think the current method of remembering birthdays is mediocre or below ideal, and 68.8% think remembering your friend's birthdays is important. These findings were used to inform the development of the birthday management app, and the results are represented visually through pie charts which are available in my portfolio.
User Profiles
Design Process
User Flow
Purpose:
-
The user flow chart for the Birthday App demonstrates the main features of the app and visually illustrates the navigation paths between different screens, such as the Home, Contacts, Calendar, Friend, and User Profile pages. The flowchart highlights several decision points, such as adding friends manually or by username, or methods for signing up. It serves as a valuable tool for identifying potential areas for improvement in the user experience and ensuring that the app is intuitive, easy to use and meets the needs of the target audience, such as people who forget birthdays or are unsure about what people want as a gift.
Navigation:
-
The Home Page is the initial screen the user will see upon logging in or opening the app if already logged in. The home icon on the navigation bar at the bottom of the screen also allows access to this page. A dedicated section for friends with silenced birthday notifications, if any, will appear on the home page. The user can expand this section to view these friends.
-
The Contacts Page can be accessed through the notebook icon on the navigation bar. On this page, individual friend pages can be accessed. The user can add new friends by using the add friend icon, which opens a modal for searching for other app users or adding friends manually if they are not app users. Pending friend requests can also be managed from this page.
-
The Calendar Page can be accessed through the notebook icon on the navigation bar. This page displays friend icons of friends born in the displayed week. The user can change the month viewed on the calendar by using the month selecting modal accessed by clicking on the month title. The user can navigate between different weeks of the month using the arrow icons. The user can access a friend's profile by clicking on the friend icon. If more than 5 friends are born on a specific day, an icon is used to communicate this and the user can expand the area to view all friends born on that day.
-
The Friend Page can be accessed by searching for a friend on the Contacts Page, by clicking on the friend icon on the Calendar Page, or by clicking on the friend icon/name on the Home Page.
-
The User Profile and Settings Page can be accessed through the person icon on the navigation bar.
Decision Points:
-
The user will have several decision points while interacting with the app such as:
-
Deciding to log in or sign up and selecting the method of login (e-mail, phone number, or social media account)
-
Deciding to add a friend manually or by username (if the friend is an app user)
-
Deciding on silencing a friend's birthday notifications, sending a default or custom birthday message, or sending the birthday message automatically every year.
-
User Feedback:
-
Confirmation will be required for actions such as removing a friend or overwriting a manually added friend with an app user. The user will also have the option to select the information to overwrite.
Wireframes
The wireframes for this project were created using Figma, and were a crucial step in the design process as they allowed me to visually communicate the layout and functionality of each page. The key features that were considered during the wireframing stage included ease of navigation, organization of information, and visual hierarchy.
The wireframe process for determining the navigation bar layout involved evaluating different options to ensure optimal user experience.
The first option featured a large half circle for the home page icon, with all other icons surrounding it. This design choice aimed to provide a consistency in shape and style, however, it was noted that the sharp corners of the larger icon may not be the best option. The My Profile icon was placed on the right as it is a convention in many social media interfaces. The navigation bar was designed to overlap with page contents to prevent the footer from taking up unnecessary space. However, this design choice may interfere with user experience on unscrollable pages.
The second option featured a simple, linear positioning of all icons, making it easy for users to access all options at once and easy to add new icons if needed.
The third option featured a large circle for the home page icon, with all other icons surrounding it. This design choice aimed to allow for hidden icons to be revealed by tapping on the home screen. However, it was noted that this design choice may not be user-friendly as it would require users to double tap to access the home page.
Overall, careful consideration was given to the user experience when determining the navigation bar layout through wireframing, balancing aesthetics and functionality to ensure optimal navigation for the end user.
In the wireframe for the Contacts page, I faced the challenge of displaying a large amount of contacts in a way that was both easy to use and visually appealing. After considering different options, I decided to implement a scroll logic, which allows for easy navigation and allows users to see the initials of their contacts when pressed long, similar to the Apple contacts search, providing an intuitive and familiar experience.
The Settings page wireframe was designed with the goal of making the page easy to navigate and understand. I grouped settings by context and topic, to make it easy for users to find what they need. Additionally, I used a page title for clarity.
The Friend Profile page wireframe was designed to be intuitive, using icons to inform the user about important features such as if it's the friend's birthday, if a birthday message is sent automatically, if notifications are silenced. Additionally, I used buttons/chips/visual elements to break down blocks of text, which allows users to easily digest information.
Overall, the wireframing process allowed me to communicate the layout and functionality of each page in a clear and effective manner, and provided a solid foundation for the visual design stage.
Product
Bringing Birthdays to Life:
From Concept to Creation
In this project, I was tasked with designing a social media app that helps users keep track of their friends' birthdays. I approached this project by focusing on creating a user-friendly interface that utilized icons, dynamic elements, and intuitive decision points to make the app easy to navigate and use. Through thorough brainstorming and design iterations, I was able to create a final product that effectively communicates important information and allows users to make quick and easy decisions.
To further improve the user experience, I decided to utilize icons throughout the app to clearly communicate important information, such as whether it is a friend's birthday or if notifications are silenced. I also employed dynamic elements to keep screens simple and easy to digest, such as using a maximum of 5 friends displayed on a specific day on the calendar page and allowing the user to expand the section to view more friends. In addition to utilizing icons to communicate important and helpful information, I also employed a color scheme strategy to enhance the user experience. Specifically, I used black for icons that indicate an action that can be taken by the user, such as the ability to add or remove a friend, or to send a birthday message manually. On the other hand, gray was used for icons that serve as informative cues, such as indicating a friend's birthday or whether the birthday message was automatically sent. This color scheme approach not only improves the visual appeal of the app, but also guides the user in understanding the functionality of the icons and making decisions more efficiently.
Furtehrmore, I implemented switches and other interactive elements to enable the user to make decisions and take actions quickly and easily. For example, custom settings such as sending automatic birthday messages or turning birthday reminders on/off can be set easily on the friend profile page.
As a social media application, I also included a "statement" field for the user to express themselves and provide a basic interaction between different users of the app. The page transitions and modifiable components are intuitive, following mobile logic and requiring clicking to enter editing mode to prevent accidental data modifications.
Throughout the design process, I paid attention to the typography and color choices, opting for simple and readable typography, and simple colors to ensure that the visual design is not overwhelming to the user.
In conclusion, my design process was thorough and thoughtful, aiming to create a user-friendly and intuitive experience for the users. Every component of the design is a result of a long brainstorming session, with the goal of making the app easy to use and understand.
Reflection
Designing from Scratch:
Advantages & Challenges
I was new to using Figma, so I discovered the available resources shared among the Figma community after I started the design process. This meant that I had to create most of my components from scratch. This approach had both advantages and disadvantages. On one hand, it allowed me to create a unique design that goes beyond the usual standards, and gave me more control over the design, which allowed more space for creativity. However, it was also time-consuming as I had to create all the components such as the search bar, calendar, navigation bar, etc. from scratch. Additionally, I was uncertain whether the components were easily understandable by the user, and determining a coherent app language such as header types and page layout rules was also a challenge.
User Profile Anaylsis:
Understanding What's Known & What's Needed
At the start of the project, I knew that I would have to include standard pages such as home, my profile, settings, calendar, and friends due to app conventions. However, as I began to think more deeply about the contents of each page, I realized the need to consider different user profiles.
One of the key insights I gained was the importance of differentiating between a user profile and a friend profile. This required me to think about what the user already knows and what they might need help with. For example, on the user profile page, I added a sub-text to explain the functionality of a "statement" to guide the user. However, on the friend's profile page, I decided not to include this sub-text as I assumed that the user would already be familiar with the statement's creation and purpose.
Another important insight I gained was in the design of the settings page. I imagined the questions a user might ask, their rights and the possible actions they could take. This was a particularly interesting and dynamic experience as it made me realize how important the settings page is in building user trust and improving engagement quality.
Beyond the Scope:
Considering the Unknowns
One of the edge cases I considered during the development of the project was the scenario where the birth year of a friend is unknown. Despite this being a potential issue, I realized that this should not be a problem for creating a friend in the app. However, it does mean that another variant for home page birthday displays is needed, as the age the friend with an unknown birthdate cannot be calculated.
Another edge case I considered was the scenario where the phone number of a friend is unknown. To address this, I included the option for the user to link their own social media accounts. This way, if the friend with an unknown phone number is a contact on a social media platform, the user should be able to send a birthday message via that social media platform.
Future Plans
Importing Contacts:
Swipe and Sync
To improve the user experience and reduce the workload during friend synchronization, I propose implementing a feature that allows users to sync contacts from other social media platforms. To make the process more manageable, I suggest limiting the number of contacts that are imported by only allowing the user to import those who have birthdays in the current month. This approach will not only make the import process more efficient, but it will also make it more enjoyable for the user. To further enhance the user experience, I plan to utilize a swipe logic similar to the one used by Tinder, which will provide a familiar and intuitive way for the user to determine which friends they want to import. Additionally, I will also consider including a filter option that allows users to sort contacts by birthday date, giving them more control over the import process.
Flexible Outreach:
Choose Your Channel
To provide more flexibility and personalization to the birthday message feature, I propose implementing an option that allows users to select the medium through which the birthday messages will be sent. This will enable users to send birthday messages via different platforms such as Instagram, WhatsApp, or text message, depending on their preference or the recipient's preference. This feature will not only provide a more personalized experience but also allow the user to send birthday messages in the medium they feel more comfortable with. This will also allow the user to reach out to their friends through the platform they prefer, and make the birthday message more personal and enjoyable. This feature will also make it possible for the user to send birthday messages to friends without phone numbers.
Timed Wishes:
Send at the Right Moment
I aim to implement a feature that allows users to customize the timing of automatic birthday messages. This includes setting a default time for all automated messages, as well as the option to select a custom time for each individual friend on their profile. Additionally, a "reset to default" option will be provided on the time picker modal, to enable easy resetting of time settings to the original. This will enhance the user's control over their automatic birthday message sending experience and improve their efficiency in managing their friend's birthdays.
Resources
Iphone Mockup
I used David's Iphone Mockups for the phone frame and screen components (such as the status bar, home indicator, etc.) via the Figma Community. The project can be accessed here.
Avatars
I used Ayush Shakya's 3D Avatar Pack for the user and friend icons. The project can be accessed here.