iOS Calls Rework

For some time now, I had the feeling that the iOS Call ecosystem is unnecessarily split between multiple apps, while their behaviours and user flows are rather similar. For this reason, I decided that I wanted to do a case study in which I combine the Calls, FaceTime, and Contacts apps.

Tools used:

Figma
Photoshop

Final Result

Goals / Objectives

Authentic
One of my main goals was for this to look like something official, something “Apple”. I used the official iOS 17 design kit provided by Apple and make sure to only use already existing iOS icons and UI elements (panels, spacings, etc.)
Useable
My other goal was to remove the hassle from doing calls-related tasks in different apps, and combine them into one, more efficient app, so I tried to make navigating to the different parts that I combined as efficient and quick as possible.

Research

Image link
Image link

I started by browsing through the different apps I wanted to combine. The apps that I was capturing references from were:

  • Calls
  • FaceTime
  • Contacts

Once I had all my screenshots collected, I picked the ones I wanted to integrate into my design. The screens I selected to include were:

  • Calls (call your favorite contacts, or call back recent recipients)
  • Inbox (see recently missed calls, as well as mailbox messages (recently, FaceTime video messages have been included into iOS 17))
  • Contacts (used to search for whoever you want to contact, or add a new contant)
  • Dial (still relevant for calling numbers you may not have saved or are calling for the first time)

Greyboxing

Image link
Image link
Image link
Image link

I started this project by greyboxing the different current elements that are present within the different Calls-related screens in iOS. These include:

  • Favorite Contacts
  • Recent Calls List
  • Seach Bar
  • FaceTime Messages (new addition in iOS 17)
  • Contact List
  • Dial

Afterwards, I started conbining them into different layouts, until I found 4 screens that I felt were very “Apple”, but still had some new added functionality and new layouts.

High-Fidelity

Image link

After having selected and created greyboxes for the screens that I wanted to create, I started looking into the offical iOS UI library for Figma.

Since I mainly tried to tie already existing screens, and not necessarily create entirely new elements, it was easy for me to reference the live apps on my phone, to check out spacings, colors, etc.

I created high-fidelity mockups for all the four greyboxes that I made, including a light and a dark version for all of them.

Conclusion

To conclude, I want to say that I would really love to see Apple combine these apps into one coherent ecosystem.

One of the main reasons for this which I could see is having a single, one-stop location for all these tasks, which would allow users to put this one app into their dock and access all functionalities at the same time.

Image link