Remembear: Mobile app design

The Problem

At times it can be difficult to remember everybody's birthday. Some people mark their virtual calendars on mobile devices and others rely on platforms such as Facebook to remind them the day of. Despite all the different ways that people try to remember these important dates, it's still possible to forget and be unprepared for someone's special day.

Our Solution

My solution to this problem was to create a mobile app that serves to remind the user of upcoming birthdays. Users would be able to save dates, set how many days in advance they’d like to receive a reminder, schedule messages, and create profiles for each of their recipients. This would keep everything consolidated into one app and also prevent users from forgetting or remembering someone’s birthday last minute.

Goal and Objectives

RESEARCH GOAL:

I wanted to first discover the different ways that people currently remembered birthday dates and why. In addition to this, I also wanted to know how people remembered details such as the recipient's likes/dislikes and gifts that they want.

PROJECT GOAL:

The goal of this was project was to design an MVP for the birthday reminder app. I picked Android as the operating system for this project.

RESEARCH OBJECTIVES:

Identify the ways that users currently keep track of birthday dates and the pros and cons of those methods.
Identify what users tend to prepare for someone's birthday and their process.
Determine the reasons why users forget birthdays.

Duration: 2 weeks (80 hours)
Role: UI/UX Designer
Tools: Figma, Whimsical

Phase 1: Research

Competitive Analysis

I conducted a competitive analysis by going through the Google Play Store and downloaded four different apps that were advertised as birthday reminder apps. Then, I briefly used each app myself to test out its features and noted down the strengths and weaknesses of each app.

User Interviews

After the initial research, I conducted user interviews in order to ask my participants about their experiences with remembering birthdays. I was to curious to learn about what apps, if any, they currently used and their thoughts about those apps.

Participants:

3 participants total
Between the ages of 22 to 25 years old

KEY FINDINGS:

All participants currently use apps on their phones to keep track of birthdays. The most popular apps were Google Calendars and Apple Calendar.
With the calendar apps they currently use, the main reasons for using the apps were because they were "user-friendly" and "convenient".
When preparing a birthday gift, the methods by which participants remember what a person likes included: recalling from memory, using the Notes app on their mobile devices, and physically writing notes on post-its.
Reasons for forgetting birthdays even though they were recorded in an app included: Not remembering to set a reminder, going through a stressful or busy period, and seeing a reminder and forgetting about it.

The full compilation of findings from the user interviews and transcripts of each interview can be viewed here.

Persona

After the user interviews, I put together a persona of a potential user who would be likely to use and benefit from the birthday reminder app that I was trying to design.

Phase 2: Ideate

Sitemap

I started this phase by brainstorming the features that would be included in the app, along with the priority of each feature, and compiled a feature roadmap. Once that was complete, I created a sitemap that showed the different screens involved in the app.

Task Flow

I made a very simple task flow that showed the steps involved if a user were to add a birthday to the app.

User Flow

Expanding on the previous task flow, I included the flow for other tasks that the user could complete with the app. On top of just adding a birthday, this user flow shows how a user could make changes to existing birthday details, and how they'd schedule a message to be sent on the day of someone's birthday.

Phase 3: Design

I began my designs with some quick sketches and then created low-fidelity wireframes for an Android device. After I finalized my branding and style kit, I developed the high-fidelity designs.

Sketches

Low-fidelity Wire Frames

High-fidelity Designs

Logo sketches

When creating the logo for my app, I began by sketching out a few ideas and variations in design. I was mainly thinking about keywords such as "calendar" and "birthday" when producing these sketches. In the end, I chose the second sketch of a bear wearing a party hat because it felt the most unique and fun.

Designing the logo

I am not an artist by any means and have never used professional graphics or drawing software to produce illustrations. However, I didn't let this stop me from designing a logo myself for this project. I made my logo in Figma by using a combination of shapes and boolean operations. In the image below, I've shown how I combined certain shapes together to produce the final product.

Phase 4: Testing

After finishing the initial designs, I moved onto usability testing for the app. For my usability test, I selected tasks that would allow participants to add a birthday to the app and make changes to the information they inputted. I also included a few tasks related to other features of the app, such as message scheduling and adding profile notes.

Participants:

3 participants total
Between the ages of 22 to 25

TEST OBJECTIVES:

How quickly and easily can users add a new birthday to the app?
What difficulties or pain points do users experience when using the app and its features?

TASKS:

1. View the home screen. a) How many days are left until John's birthday? b) How old is Mark turning?
2. Your friend Fred Wong was born on January 26, 1999. Add his birthday to the app so that you are notified about his birthday 2 weeks prior and the day of.
3. You found a picture that reminds you of Fred. Where would you go to add this picture?
4. You realize that Fred is actually born in the year 2000. a) How would you make this change? b) How would you include on his profile what his favorite shows, colors, and allergies are?
5. You decide that you want to only be notified the day of Fred's birthday instead of 2 weeks before. How would you do this?
6. You want to start drafting a message for his upcoming birthday, but you don't want to automate the message just yet. Show me how you would do this.
7. You've been using the app for a while and have inputted a lot of birthdays into the app. a) Where would you go to view the names of everyone you've put in the app? b) How do you locate everyone born in the month of February?

Prototype

This was the prototype that my participants used during the usability tests.

TEST OBJECTIVES:

TASKS:

How quickly and easily can users add a new birthday to the app?
What difficulties or pain points do users experience when using the app and its features?

Go through the steps of entering a message in chat.
Locate the message you just posted in chat and find the option to highlight or bookmark it. Then, how do you view the entire message?
Your moderator just posted a reminder about chat rules. Try highlighting this message as well. How do you find it after doing so?
Try to minimize the bookmarked messages so they aren't in the chat box. How would you view the messages again?
Delete the first message that you initially highlighted.

MAIN ISSUES:

Although all participants were able to complete the tasks presented to them, there were still a few issues that came up during testing.

All participants experienced confusion understanding the meaning of the number next a person's name on the main screen.
Two participants did not immediately recognize what the "D-151" meant due to its format.
Two participants clicked the incorrect icon for editing a profile. They tried to click on the more icon before finding the intended edit button.

Phase 5: Iterations

During usability testing, I received feedback on new features that could be added to the app for further improvement. Due to time constraints, I focused on making revisions to current features of the app as I considered those as needing more immediate attention.

Before

After

Putting the age that someone was turning in parentheses was confusing to users. To provide more clarity, I added a birthday cake icon next to the age and also placed the age next to the birthdate.
Users were unfamiliar with the "D-XX" format for the countdown. I changed this to clearly state how many days are left until the birthday.

Before

After

I removed the original edit icon that was at the bottom of the screen. Instead, I put both the edit and delete options together in the more icon.
With my initial design, users had to click on the edit icon to add notes to a profile. In my revision, I changed it so that users could directly tap onto the notes section and immediately start writing.

Before

After

My initial design only had a save button but did not have a cancel button. I included a cancel button to be more consistent with the rest of the app and so that users have the option to click cancel as opposed to using the phone's back button. This was to make it easier for users to undo actions.
I also included a pop-up warning about unsaved changes to prevent users from closing the page without saving.

Conclusion

NEXT STEPS:

For all of the main revisions I made, I came up with multiple solutions for the revision. Ideally, I would put each solution through usability testing to see which solution is the most effective.
Continue designing other screens for the app such as the settings page. I would also consider adding new features that were listed in my feature roadmap and mentioned during usability testing.
Find ways to incorporate the app's mascot into parts of the app.

CHALLENGES I FACED:

This was my first time choosing an Android app as my focus and I realized that there are many guidelines involved when designing apps.
The time constraints for this project forced me to focus on a few, necessary features and making sure they they performed well. There were other features that I wish I could have explored if I had more time.

WHAT I LEARNED:

Even though I understand my own designs, this does not necessarily mean that users who interact with my design will. Important information in an app should be clearly labeled to avoid confusion.
Many mobile devices today have their own "back" button, but designs should still allow users to undo their actions without relying on the features of the device.

Remembear: Mobile app design

The Problem

Our Solution

Goal and Objectives

RESEARCH GOAL:

PROJECT GOAL:

RESEARCH OBJECTIVES:

Phase 1: Research

Competitive Analysis

User Interviews

Participants:

KEY FINDINGS:

Persona

Phase 2: Ideate

Sitemap

Task Flow

User Flow

Phase 3: Design

Sketches

Low-fidelity Wire Frames

High-fidelity Designs

Logo sketches

Designing the logo

Phase 4: Testing

Participants:

TEST OBJECTIVES:

TASKS:

Prototype

TEST OBJECTIVES:

TASKS:

MAIN ISSUES:

Phase 5: Iterations

Before

After

Before

After

Before

After

Conclusion

NEXT STEPS:

CHALLENGES I FACED:

WHAT I LEARNED:

More projects