Anchor is a fictional mobile app that helps users to stay in-touch with important people in their lives. The concept came from my struggle to keep in-contact with people after graduating. Without the convenience of living close-by to friends with flexible schedules, it became challenging to reach out to people on a regular basis.
Anchor is a tool for helping users to stay in-touch with friends and family by:
For this fictional app, my final deliverable was a high-fidelity prototype with the screens that are most essential to showing how the app works. This includes the onboarding screens and the main screens for each app destination (Contacts, Calendar, and Settings).
Because the app was not developed, I regarded usability testing results as my main metric for how the design performed – the 3 participants that tested the prototype all understood what the app was and how to use it after going through the onboarding screens.
For my research, I conducted interviews with 4 participants to learn what people think is most challenging about staying in-touch with their friends/family. I also looked into existing “Personal CRM” apps for competitive analysis.
From my interviews and competitive analysis, I created a persona for the target user group and took away the following:
After fleshing out what functionality the app would have, I organized the features into a “Calendar” destination, a “Contacts” destination, and Settings.
Before delving further into those, however, here is the wireframed onboarding process (that I used in my usability tests) as an introduction to the app.
Because the Personal CRM concept is not a well-known one, I knew onboarding would be important for introducing users to the terminology and actions in the app. As users import contacts, they specify “catch-up cycles” for how frequently they want to catch-up with each person. These catch-ups are recorded automatically through scheduled events (or manually by tapping “Mark as Caught-Up”).
wireframed onboarding flow
It was difficult trying to find an efficient way for users to set “catch-up cycles” for each contact. I wanted to avoid asking users to specify an exact cycle for every person (left), so my initial idea was to take a batch action approach (center). Since this went against the natural order of first looking at a contact and then deciding on a cycle, I ended up going with the design on the right.
%20import%20contacts%20interations.png)
The “Calendar” destination is used for seeing an overview of your schedule and planning future catch-ups.
While calendar apps usually offer many different calendar views (schedule, day, 3 day, week, month, etc), I decided to focus on two displays that would be most useful:
A graph of catch-ups planned throughout the week for an at-a-glance look at who the user will be seeing
An outline of events throughout the day with helpful links that are contextual to the meet-up
Since the user can integrate other calendars (managed in the side navigation drawer), this screen can show either all of the events in a user’s schedule or only the catch-ups. (Events in any calendars that have contacts as invited guests are recognized as “catch-ups”).
Clicking on an event pulls up the page below named “Event Page,” which is modelled closely after Google Calendar.
To add flexibility, I put in a “Snooze” feature to accommodate for times when users want to push back their catch-up schedule.
The “Contacts” destination is used for seeing who to catch-up with, adding new contacts, and viewing contact profiles. Participants mentioned that they frequently meetup with people in groups, so the main division on this page is between “All Contacts” and “Groups”. In this way, users can schedule catch-ups with multiple people at a time.
Since users specify how frequently they want to catch-up with each contact during the onboarding process, the app keeps track of when it is time to reach out to a given person.
A contact’s profile page has communication actions (message, call, video chat, email) and app-related actions (“Schedule Future Catch-Up”, “Mark as Caught-Up,” “Snooze Contact”) at the top; info such as details and catch-ups are at the bottom.
For my usability testing, I set up a low-fidelity prototype in Figma using the wireframes. I asked my 3 participants to first go through the onboarding process to observe whether those introductory screens effectively explained the app. I then asked them to play around with the functionality of the app while thinking out loud to get an overall sense of the app's usability.
The onboarding process seemed to be effective in showing participants how the app worked; the participants were able to guess what features were included in each app destination, and they started using terms introduced during onboarding (like “catch-up cycle”) to explain their thoughts.
However, I did notice a usability issue when 2 of the 3 participants did not recognize the "snooze" icon and thought it had something to do with scheduling alarms or reminders.
I played around with moving the snooze action to the Add (+) button. Since users would likely tap on Add (+) frequently to schedule new events, they would discover the snooze action quickly. Being able to pair the snooze action with a text label would also help users who do not recognize the snooze icon.
Although this makes the feature less visible, I felt that the feature would not be used often anyways. This also saved space in the top nav bar to move the “jump to today” action inside, making the interface look cleaner.
With the snooze feature now having less visibility, I decided to add a page on snoozing to the onboarding process. I figured that this exposure would help users become more aware of the feature since the onboarding process was shown to be effective in teaching users about the app functionality during testing.
snooze onboarding frame
Once I adjusted the "Snooze" functionality as described above, I started to work on the app's visual branding. With the goal of the app being simple and efficient to use, I decided to take a more minimal approach to the logo, colors, and typography so that the brand identity would take a backseat to the functionality.
simple
friendly
flexible
thoughtful
I chose the name Anchor to convey stability and longevity in a relationship, but I thought that using an anchor graphic would be too on-the-nose for a logo. Instead, I went for a pinky promise as a gesture of friendship and connection.
Going for a color that felt grounded yet modern and friendly, I decided on a blue-purple hue for the main brand color. Orange was added into the mix to brighten things up and to call attention to certain elements.
I chose the humanist Source Sans Pro as the only typeface throughout the app. Since Anchor does not have a loud brand identity, I wanted to keep the text looking simple so the user could just focus on using the app.
Step 1
.png)
step 1a
step 1a
step 2
step 3
step 4
step 5
settings
side drawer
calendar
“+” drawer
event page
snooze
side drawer
all contacts
.png)
groups
.png)
"+" drawer
contact page
.png)
.png)
Anchor makes it easier to keep in regular contact with friends and family by reminding users who they should catch-up with at a given time. Since Anchor keeps track of who users want to stay in-touch with and when users meet up with those people, it takes off the mental burden of figuring out “when to see who”.
Anchor helps to streamline the process of making plans because users can see their schedules and the people they should catch up with in one place. Within the Anchor app, users can then add meet-ups to their calendars manually or through smart suggestions.
