This is a screenshot of FaceTime's user interface on iPad.
Matty Wilson
UX Researcher
SquareFace
Leading generative research for the creation of an alternative interface for FaceTime on iPad. Focused on accessibility and promoting autonomy.
Overview
SquareFace is an application for iPad that serves as an alternative interface for placing FaceTime calls. The client for this project felt that for people with certain physical or cognitive limitations, the FaceTime app was not very usable. The goal of the project was the create a low-fidelity prototype ready for further development, all within a 3-week design sprint. To do that, I researched academic studies, led a competitive analysis, as well as user flows, personas and wireframes. After that, I tested the prototype with users and iterated the design based on the feedback.
What Was the Problem?
Unintuitive & Inconsiderate
Looking at the FaceTime interface, the first red flag that I noticed was that most of the screen is dominated by a view of your own face. This crams all of the buttons into less than a third of the screen, which can pose a challenge for people who struggle with fine motor movements or vision.
Another red flag was that the contacts displayed on the launch screen were simply the contacts for recent calls you have made or received, and if you wanted to talk to somebody different, you would have to press the tiny + button and then scroll through your contacts or search for them. The entire process felt unnecessarily complicated, and complicated does not make for a good user experience.
Who Needs This?
After analyzing the issues with the FaceTime app, it seemed to me the audience for SquareFace would be people who have disabilities affecting their vision or mobility, as well as the much larger elderly population that generally experience some kind of decline in these abilities. But rather than proceed on assumption, I turned to the comprehensive collection of data made available by institutions such as the Center of Disease Control and The National Census Bureau. This helped me develop a clearer picture of who SquareFace's users would be.
The Research
The percentage of people age 65+ living with a disability in the US.
Nearly 40% of people age 65 and older have at least one disability.
Most Common:
Mobility
Independent Living
Hearing
Vision
The percentage of people 18+ living with a disability in the US.
26% of adults are currently living with a disability.
Most Common:
Mobility
Cognitive
Self Care
Independent Living
The research shows that disability is something that affects a staggering amount of people nationwide, across all age groups. On top of this, all of the most common disabilities negatively affect one's ability to use the FaceTime app, especially given its puzzling design. Being able to connect with your loved ones autonomously is something everyone should have access to, and this belief is the centerpiece of SquareFace. The next step was to decide on some design criteria, and to do that, I chose to learn from a similar product on the market named Portrait Caller through a competitive analysis.
A SWOT Analysis of an app called Portrait Caller for iOS.
Analyzing the Competition: Portrait Caller
Portrait Caller is an app on the App Store that essentially serves as a visual contact book. Given it is solving a similar problem, I figured there was a lot to learn from a competitive analysis. One of the biggest takeaways is that people really appreciate having a visual solution to placing calls. In addition, while some users may appreciate having extra features like weather and news, people that need a simple, basic solution might be turned off from this app. This, to me, was the opportunity for SquareFace. After doing this exercise, I decided the design criteria would be:
Simple
Visual
Accommodating
Grandpa Jamie is the primary persona for SquareFace
Personas
Based on the initial research and the competitive analysis, I was able to develop a primary persona to represent SquareFace's users. This was particularly helpful throughout the design process in giving me a visual reference to return to when justifying design choices. In addition, it was also helpful in remaining focused on what the goals of the project were.
The Scope: Defining Parameters
For this project, the scope was determined as being the hypothetical answers to the following questions:
How might we make placing Facetime calls easier for the technologically illiterate and also people living with a learning or physical disability?
How might we design an on-boarding process so that a loved one could set it up for the user without feeling bogged down?
How might we maintain flexibility in this service regarding who is using it and how they use it?
If I could answer these questions in a tasteful, user-centric way, I knew I’d be on my way to developing a fantastic product. When thinking of what had the highest priority amongst these questions, and what would help me create the Minimum Viable Product (MVP), I knew I needed to focus on the on-boarding process.
To have something to reference as I moved into the User Flow phase of this project, I created a simple user story.
Persona
Grandpa Jamie (or someone helping him)
Grandpa Jamie (or someone helping him)
Grandpa Jamie (or someone helping him)
Grandpa Jamie (or someone helping him)
Action
Add a name, a phone/email address, and a photo
Save the contact
Repeat the two previous actions as many times as he wishes to
Proceed to the Home Screen
Task
Complete on-boarding, inclusive of adding contacts to the app
Complete on-boarding, inclusive of adding contacts to the app
Complete on-boarding, inclusive of adding contacts to the app
Complete on-boarding, inclusive of adding contacts to the app
A sketch of the user flow for the on-boarding process.
User Flows
This serves as the backbone of the user experience. Before designing how something looks, it is crucial to design how it will feel. I started out in my sketchbook, then brought the flow into Figma to digitize it.
A digitized version of the on-boarding user flow.
This flow was meant to embody simplicity without being constricting. With this being the backbone of the on-boarding process, it ensures users learn how to add new contacts when they are first setting up the app, then gives them the choice of filling out their contacts now or later with no pressure.
This essentially is the skeleton of SquareFace, and I felt really good about it. Before I could test with users, I needed to give this skeleton a body, and that is represented by the wireframes.
A sketch of the initial concept for SquareFace
Sketches
When crafting wireframes, I find it best to start in my sketchbook. Getting down dozens of ideas on paper is a lot more time efficient than doing it all on my computer. This way I also develop less of a personal connection to the first design I generate, leaving more space to diverge and find potentially better solutions.
The first sketches I got down centered the on-boarding process around a sequential entering of the necessary information for new contacts, one screen at a time. My initial thoughts were that this would make the process digestible and also easy to follow. But as I sat with this design, I felt the abundance of screens could cause friction for users, especially if they are entering several contacts at once. Those screens will add up quick.
I decided I needed to come up with some more ideas. To do that, I did a Crazy 8 sketching exercise.
Crazy 8 sketching exercise
From Several Screens to One
In this exercise, I challenged myself to come up with 8 different ideas for on-boarding within 20 minutes. As you can see, as I progressed through the sketches, my ideas moved away from involving several different screens and gravitated toward consolidating everything into one screen. Remembering the design criteria, I needed to make sure I kept things simple while also not being boring so that users actually made it through the on-boarding process without losing their excitement about the product.
Check out some more of the sketches below!
Wireframes
Bringing SquareFace to life. Based on the sketches and done in Figma.
These wireframes eventually became the first SquareFace prototype. Try it out!
User Testing
Although I was confident at this point in the product I designed, it is crucial to step back and gather some authentic feedback from users, and to do that, I conducted some usability tests.
Results of Testing
The results from the testing were a testament to how important this part of the design process is. When sitting down with the participants, to kick off the test I gave them basic information about SquareFace, but not anything about the inspiration behind it. This was to see if after using the prototype, they would describe it as simple themselves.
In addition to being encouraged to think out loud while exploring the prototype, participants were told to:
Proceed through the on-boarding process and stop when you’re at the home screen.
Add a new square.
Call Matt and return to home screen after.
Bonus: Do you have any thoughts about the experience you just had or the product in general?
The feedback can be categorized into likes and criticisms. As far as positives go, all of the participants commented on how simple the experience was, which was good news to me. I also got good remarks regarding the screen for adding New Squares and the amount of white space the design leaves for breathing room.
Screenshot highlighting the issue of phone and email both having the same form field
The criticisms were primarily about the way the contact information is displayed when adding or editing a Square. Because you only need a phone number OR an email address to place a Facetime call to someone, the design only asks users to enter one for their contact. But several of the participants felt it was confusing to see one form field represent both the phone and the email address, and it truly was eye-opening to see from their perspective. I decided to make this the focus of my next phase of iterations as the other critiques were largely about things I was able to tweak quickly, like alignment and click target size.
Iterate and Reiterate
My first sketch focusing on the problems discovered in testing.
After conducting the usability tests, I had a clear plan for developing the second version of the low-fidelity prototype for SquareFace, and it was time to head to my sketchbook to begin getting ideas for a solution.
My first ideas to solve the problem discovered in the user testing centered around a button that would change the form field between email and phone depending on what the user wanted to do. But when thinking of how it would actually work logistically, it felt way too confusing. So I decide to take a step back and opt in for simplicity that also allows for flexibility in use.
Second sketch focusing on problems discovered in testing.
In this iteration, all necessary info is present on one screen, while also giving both the phone and email their own form field. Users don’t have to input them both, they only need one or the other. But in cases that users do add both for a contact, there are some benefits.
With this change, when users make a call to someone who normally has a cellular connection but temporarily doesn’t, (think a tunnel, a storm, etc.) SquareFace would be able to attempt to connect with them via their email as a backup. So not only does this solution remedy the confusion, it also keeps the service flexible.
Updating the Prototype
Conclusion & Next Steps
After discussing with the client for this project, we both think SquareFace is, as it is now, ready to help people connect to their loved ones. From my perspective, the project was a privilege to work on, as I feel products designed to bridge the accessibility gap in life are few and far between.
Aside from translating the low-fidelity prototype to high-fidelity, future development for SquareFace could take shape in a lot of different ways. Designing the screens for verifying that a contact is affiliated with Facetime is important. My client and I also discussed the possibility of an administrator mode for keeping editing features in a place where it is less likely to be activated accidentally. Another idea is to imagine how to integrate text and voice features into the app. From here, the possibilities seem endless, and I am proud of the work that came out of this project.
Thank you for reading!
If you'd like to chat about my work, feel free to contact me.