"Hey, what's your number?" or rethinking contacts app
Hey! Design tells the story, and this is a story of how I've been rethinking the contacts app. It would be better to say not rethinking, but making the existing solution better.
I did not reinvent the wheel and introduce completely new patterns of interaction. When solving this problem, I decided to pay attention to the details that can play a big role in speeding up interaction with contacts.
Homescreen
As the three main actions on the home screen, I chose search, adding a new contact, and accessing my contact.
The main actions should be easily accessible, so I decided to place them at the bottom. This way, most scenarios do not require the user to reach the top of the screen with their finger.
In fact, search can solve all three scenarios. With the help of search, we can find our own or someone else's contact. Additionally, it can suggest creating a new contact based on a search query that yielded no results. However, I kept this option, where search would be the only action, as a backup, as the absence of an obvious entry point to create a contact could confuse the user.
At the same time, I explored various variations of displaying actions on the main screen. Starting from an option inspired by Zenly's navigation and ending with the option I decided to settle on. From equally significant buttons, I came to the conclusion of incorporating a concept with unified search. Therefore, search took up the predominant space, leaving space for the remaining two actions.
Since the search moved from the top of the screen to the bottom, it allowed me to replace the action of "Pull to Refresh" with something else. This led me to the decision of implementing the action of "Pull to Search".
After finalizing the navigation, I filled the main screen with the missing elements that users expect to see:
- A contact list with avatars and alphabetical separators
- A button to edit the contact list
- A notifications section button, where reminders of upcoming birthdays and suggestions for updating contact information could be located
In this way, I addressed several issues that iOS Contacts App users face (I conducted a small survey among friends and analyzed the feedback on the app in the App Store):
In addition to this, I expanded the contact creation capabilities by adding the ability to import contacts from cloud storage and also through Bump - a mechanism similar to what was in Zenly. This will add more emotional aspect to the app and make the contact sharing process much more interesting. In fact, users will have the ability to share a contact using Bump not only from this place, but also directly from the contact's page. All they need to do is open the desired contact and shake their phones together.
Contact Page
Next in line was the contact screen. By emphasizing the photograph, I allocated a significant space specifically for it. However, the main innovations that I introduced were the contact information fields. I aimed to address two issues:
I solved the first issue by adding the ability to create fields with customizable content types and icons. Now you will never forget the name of your best friend's dog or recognize your friend's car.
The second issue I encountered, which I believe everyone has experienced, is having contacts with names like "Bob's Mom," "Kate's Husband," and so on. To eliminate such names, I created a separate cell type where you can specify the relationship between contacts and quickly switch between them. Additionally, this will allow searching for such contacts with queries like "Dad..." and make contact names more consistent.
And what else?
Of course, I did not depict all the functions I wanted. I tried to pay attention to small but important functions. In addition, I wanted to tell a story, the story of how I came to the final solution. Here, I talked about how I think: from the very beginning to the final layout.
I also want to mention a few functions that I came up with but didn't have time to draw:
- Notification Center with birthday reminders, contact info updates, recent meetings and so more
- Contact Cloud Import flow, where user can import single or a bunch of contacts from iCloud and G Drive
- "Scan Business Card" button in Create Contact flow
- Manual Contact Creation modal
- Zenly-inspired section to share realtime location
I hope you found it interesting to delve into the process of my thinking, and our interaction is only just beginning!