Let’s utilize the following design process that’s customized for this exercise. This process will define clear objectives, enable exploration before a solution, set restrictions and limit the exercise length to 16hrs.

1. Clarify the objectives

Let’s humanize our efforts by constructing a quick narrative. This will infuse the thought process with empathy and keep it focused on the user.

Humanizing efforts

Contacts in our phones are links to other humans. Humans that we want to stay in touch with. Maintain a relationship with. A friend, a stranger, a coworker, a family member, a business owner, etc. And like any relationship, its straight forward in the beginning, but it gets more complex over time. As the relationship develops we find and add additional information about these contacts.

Objectives

• Articulate the current problems with the native iOS Contacts app
• Research opportunities and possible improvements
• Suggest a new direction supported by mock-ups and prototypes

2. Research & understand

Whats the current state of the native iOS Contacts app? Are there other solutions in the market? What kind of opportunities exist?

Current state of the Contacts App

• The good
  - Fully integrates with the operating system
  - Easily syncs with linked accounts
  - No limit on the amount of information that can be added for individual contacts
• The bad
  - Lack of information hierarchy (3)
  - Stale and outdated design with scattered whitespace (1)
  - Primary functions (search, add contact, etc) are out of reach (2)
  - Not intuitive for adding a new contact (4)
  - No good use of contact images
  - No groups/lists to organize contacts and no group editing
  - No use of current social channels

Other solutions in the market.

There is a surprising amount of products exploring different solutions for this problem, each having a slightly different take on it. Lets quickly analyze them and read through their product features. This will help us to familiarize ourselves with the market.

Fullcontact(cross-platform address book), Simpler(merging duplicates and cloud storage), Contact Box(instantly share contact list), Brewester(caller id, auto fill and multi-platform), Connect(contact manager with lists), Humin(a human way to remember contacts), Sensser, Contact Center, Contaqs, Conkey, Veern, Clique, Pintact, etc.

“User Research”

We don’t have a robust amount of user data but its crucial to get other people’s perspective on the on this issue. So I asked one simple question from a few friends: “What’s the most annoying thing about your native iOS Contacts app?”

“using the index letters, especially if the phone has a case on” — Pauly

“adding or removing to favorites is clunky, also I can’t text a number that I put into the phone, like enter a phone number [then] text, you can’t do that. either call or add contact” — William

“Mass deleting. Too granular.” — Michael

“It does the job for me. It might be missing ‘Groups’ though.” — Javin

“I never use it, cuz it takes too long to get the information i want.
So i just go to messages and search, or phone” — Hari

“I don’t really use it. I just use the phone app to find contacts” — Samihah

Additional readings

Mac experts deal with their contacts, The Address Book Paradox, Three + One Circles, Apple I don’t freaking remember…, Batch-Delete Old Contacts in iOS, The thumb zone(fyi).

Takeaways

There are several different types of solutions in the market but no highly adopted product just yet. I’m surprised that Apple hasn’t addressed these concerns. Some companies are being evaluated at more than $16M to fix this issue and that definitely validates a need in this market. Most users have already figured out a work around, using their own hacks or a third party app, but nothing consistent just yet.

Opportunities

There are a lot of opportunities here, but let’s hone our focus only on the following: (these line-items also act as additions to our initial objectives)

• Elevate important information and hide unnecessary noise
• Utilize gestures and cut down the number of taps
• Respect the “thumb zone” and bring primary functionalities closer
• Better use of imagery
• Polish the visual design with respect to the iOS guidelines
• Consider other social channels for contacts
• Explore how grouping/lists can be embedded in the process

3. Context & audience

Whats the target platform? Who is this for?

Platform

We’ll be aiming for an iOS platform. The target device will be an iPhone 6.

Target audience

Knowing the end user is key. Learning their preferences and behaviors helps our decision making down the line. In a more in-depth process we’ll spend a fair amount of time here but for this exercise lets identify a single persona to represent our audience and point out relevant information.

Name: Jessica
Age: 26
Gender: Female
Device: iPhone 6 (right handed)
Job: Front-end Engineer
Top Apps: Twitter, FB, Lyft, Instagram, Google Maps
Location: San Francisco, CA

Personality and Habits:
- Likes to download new apps and try them out, but usually ends up deleting them. “I don’t like having too many apps”
- Utilizes social challenges like Facebook and Twitter to stay in touch with friends and family
- Reads news blogs like Vox and Re/code
- Keeps phone calls to minimum and prefers texts more regularly
- Has a balance social life and meets new people on a regular basis

Goals:
- Wants a hassle free way to quickly exchange contact information
- Wants the ability to organize her contacts in order to keep friends and family in separate buckets.

Takeaways

Based on this persona lets make some quick assumptions:
- Our audience is aware of how things work in the iOS ecosystem
- They’re not afraid to try new apps
- Social integrations would be a plus

4. Sketches & Wireframes

What are the different scenarios for using this app? What are the components of the app? What are the different flows? How are the interactions linked? How does a rough layout of the content look?

Scenarios

Lets quickly identify three main ways to use the Contacts app:

Content & Components

List out all of the different components (some refer to this as features) that make up the content. It’ll help us identify the kind of interactions and modules that needs to be considered for sketching and wireframing.
It’ll also help to identify additional opportunities or any missing links.

• Adding a contact
• Searching for a contact
• Contacts feed/list
• Individual contact info
• Groups of contacts (tagging system?)
• Index scroll
• Group editing

And the fun begins.

Sketching

It’s time to transfer ideas on to paper — in the fastest possible way. The focus is to explore and not commit to any initial ideas.

For the main contacts feed, I explored list views, boxed view, grid view and for navigation I tried tabbed navigation, panel navigation, gestures, etc.

I use a marker instead of a pencil for sketching. It helps me to not mull over details and keep coming up with new solutions. It’s ok to make mistakes, this is suppose to be fast and dirty. Once there is a general idea for an approach thats where we stop. These layouts will be further refined during the wireframing phase.

Conclusions

1. Utilizing a grid view instead of list view to better showcase contact images and get rid of unnecessary whitespace.
2. Adding floating action buttons to create more space for content and bring all the primary functions closer to the thumb.
3. Use of gestures; single tap on a Contact block for a quick view, double tap for detailed view and tap & hold for arranging or group-editing contacts. Swipe right for contact groups and swipe left for the index letters.

Sidenotes:
- Floating action buttons are outside the iOS design guidelines but it’ll be an interesting experiment. (It gives me bit of comfort that Material Design has validated the usefulness of a floating action button)
- Using gesture helps to eliminate buttons and extra taps but there is a much higher learning curve. It’s a risk but let’s see how it plays out.

Wireframing

Time to refine these layouts and introduce a harmonious flow. As we’re building these components out, it’s important to stay focused on how they interact. Here is a diagram to give a bird’s-eye view of what we have so far:

1. Tapping on a contact block will give quick access to call, text or email
2. Double tapping on a contact block will bring up the full and detailed contact card. (It can be swiped out of view to close)
3. Swiping left on the entire screen will reveal the index scroller
4. Tapping and holding enables group editing (similar to how you can organize application icons on the main screen). The selected contacts can be removed or added to a group. The floating action buttons adapts accordingly
5. Tap to reveal the search bar
6. Swiping right will reveal the different groups

Prototype #1: Interactive wireframes

Here is a very rough prototype to test out the above wireframes and make sure everything flows well together. An interactive prototype surfaces new knowledge that static mock-ups can never communicate.

“Pixate lets you create interactive prototypes that run natively on your iOS or Android device.

To view this prototype on your device, scan this code using the Pixate app.”

<- Click on the image for more info.

Learnings

• Having ‘swipe’ enabled in both directions was too ambitious even for an experimental project like this. We’ll fix this in the design phase.
• After using the prototype, placing the primary functions within reach seems to be working very well.
• The content needs to appear and disappear from the same direction - it’s too random at the moment.

5. Designs

The interactions, transitions and visuals go hand-in-hand. The movement of a component define’s its character and educates the user on how to interact with it. So as we go into the design phase, we’ll not only consider how it appears visually but what kind of personality these component’s embody.

Here are the final designs:

(scroll a bit further down for the final prototype)

Design’s explained

1 ) The main feed has been reduced to a three column grid instead of four as the wireframes suggested. This lets the space breath a little bit better and have sufficient amount of white space around the contact images so that our eyes can easily flow between the contact blocks.

2 ) Single tap on the contact block reveals three primary functions (call, tex and email).

• It brings these primary functions much closer to the initial tap, reducing the thumb’s travel time.
• The blurred background is the contact’s actual image to showcase how the call, text or email icons are directly associate with the expanded contact block.

3) Double tapping a contact block reveals the detailed card.

• Once activated, the image circle animates up with a slight bounce as the detailed card slide into view from the bottom of the page. This movement intuitively showcases relevancy between the two component.
• It can be pulled down to slide it the off the screen (instead of reaching for the furthest point on the screen for a back button).

4) Swiping left anywhere on the main feed reveals the index scroller. Since its initially hidden, we can gave it more real estate when its revealed. The user can easily tap an individual letter or scroll.

5) The search is hidden by default but it can be easily accessed from its floating action button. This is better because we have more real estate for the content when its hidden but dedicate the entire screen when its active.

• Note that the matched letters are highlighted in blue. This helps the user understand why a certain contact block is being listed in the search results.

6) The list of contact groups can be accessed via its floating action button. If the user selects a different group than the “All Contacts” the container will slide down and the main feed will change to the corresponding group. Just like a contact’s full detail card it can be pulled down to slide it off the screen.

7) Adding a new contact can be accessed by its floating action button as well.

• The phone number’s input field is prioritized because that’s the initial data that gets communicated when exchanging contact information

• Once the information is entered, the user has two options. One is to simply store the information or store and send them their own “Contact Card” as well. This saves time and the hassle of drop-calling or texting that individual with their name.
• A personal Contact Card is a concept that holds a user’s information (phone number, name, last name, email, etc) and it can be easily shared with others, like business card.

Prototype #2

Pixate doesn’t have the ability to add two events (double tap and a single tap) on the same element. So for Lauren Ludwig’s contact block, double tap on the image circle for the detailed card and just tap the name to bring up the quick access component.

“To view this prototype on your device, scan this code using the Pixate app.”

Click on the image for more info.

Iterations

Here are some the of design iterations that were discarded in the process for reference.

And we are out of time, lets wrap it up.

Summary

Working under constrains can be exhilarating and it pushes our creative intuitions and help us be more efficient with our time. But with these kind of constraints come limitations and compromises, so here are my thoughts on how I would like to explore this idea further or what I would do differently the next time around.

• There are a lot of edge cases that hasn’t been accommodated yet. I would like to create detailed chart for all the different components and map out a comprehensive, step by step, user flow.
• The visual design of the solution has a lot of room to grow. At the moment it’s roughly following the iOS guidelines. I’m curious to develop this a bit more and see if it’s the right direction. Or explore a direction with a visual identity of its own.
• Having the social accounts linked to the detailed contact card is an interesting idea. If the Contacts app starts becoming a centralized source to engage a conversation, it might be a great way to drive user engagement.
• Group editing is an interesting concept to explore a bit further. It’s activated by a tap and hold on a contact block. The user can pick multiple contact cards and choose to either add them to a group or delete them.
• It was challenging to prototype my solutions as I was trying to figure out the details but it proved to be extremely valuable. The key takeaway is that regardless of a ticking deadline its very important to prototype functionalities and get a feel of how an experience flows when it comes to life.
• I’m aiming to do additional user research in order to confirm/reject some of the assumptions I’ve made. Talking to more and more user will help to identify hidden opportunities and validate my ideas. The prototype will be very helpful in this case so I can see how a user attempts to interact with the app and identify missing links.