• Yiming Wang

Proximity Mobile APP Design


Real client group project for Proximity: A mobile app that automates contact information exchange.



Redesigned Logo


Client Expectation


Proximity is a company that was created to help you stay in contact with the people you meet in real life. With fun scrolling, swiping and searching features and a user friendly privacy model we hope to change the way people exchange contact information and maintain connections. (from client’s proposal)


Our client thought that “the business card industry is archaic and outdated. We want to improve the way people exchange contact information by automating it. Whether business, social or romantic, we constantly lose contact with the people we meet in real life. Proximity flips to script and makes technology network through us rather than the other way around.”


Estelle, Leo and I, as a group, our job is to design a mobile app for Proximity using UX best practises.


We had a one-hour interview with one of our clients, Mr. Jake Daly, to better understand their needs. Our clients actually already have a formal prototype but we decided not to look at it before we have our prototype done.


The key points of the app are:

  • Automative contact exchange

  • Diverse user base: everyone can use it

  • Swiping and scrolling


As we only have one month(80 working hours) to complete the project, we do not have time to design an app that fits everyone’s need. We communicated with our client and he agreed to narrow down the target user base to professionals.


The style our client likes is clean, simple and classy, like Apple.

To conclude, our goal is to design a simple app that can help professionals exchange contact info automatically.



Research


Concept Map


We built a concept map to think diversely and carding our thoughts.


Concept Map


Domain Research


There are many social networking apps on the market, we looked at four of them: Switch, Ripple, Bumble, Tinder.



Switch and Ripple are also for professional use, they do not have automatic contact exchange and their user base is not big. Switch is more like a digitalized resume, and Ripple allows you to join groups and events to extend your network. Bumble and Tinder are for dating and social, widely used and well known. They allow users to discover people around them and make a match. Tinder has outstanding user experience design. The swipe feature makes it fun and easy to use. All these apps inspired us a lot.


Survey, Interview and Contextual Inquiry


We started with lean survey canvas and came out questions we would like to ask in our survey and interviews. The survey has been posted on Reddit and our social media.


While we were collecting survey responses, I did two interviews and we had 5 interviews in total.


Main findings from interviews:


Under professional circumstances,

  • People tend to use business cards

  • People concerned about typos while saving contact information

  • After exchanging business cards, people throw away most of them

  • People don’t want get interrupted while they are talking

  • People find it hard to follow up with business cards


Main findings from survey:

  • 96% of people regretted not exchanging contacts with other

  • 58% of people still use business card to exchange contacts

  • 67% of people search others manually

  • 80% of need to inform their contact about updates by text, email or call.


For contextual inquiry, we observed people in job fair and found that:

  • People are exchanging business cards

  • Long waiting to talk with recruiters

  • Throw away and lose business cards afterwards


Analyze Data


Now we need to analyze the data we gathered from above research and think divergently. To do this, we did an affinity diagram, we wrote our raw data on post-it notes and put them on the wall, then grouped them up.


Digitalized Affinity Diagram

From the digram, we noted the information people would like to share, how they would like to connect and which privacy setting is acceptable.


Main findings from affinity diagram (numbers represented times they appeared in the diagram):


Information to share

  • Name x18

  • Company info x12

  • Job position x13

  • Experience x10


Ways people connect

  • Search their name on linkedin x12

  • Follow Linkedin x8

  • Manually input other’s phone number x25

  • Native Contacts App x7


Persona


Now we had much information, two personas came out. They are the imaginary persons we think will use the app.


Persona 1
Persona 2


Customer Journey Map


We did customer journey map and our persona Michaela is our customer.


Customer Journey Map (Emoji ver.)

She is new to Canada and does not has her business card ready. As she is in a brand new environment, she needs to find new clients. She went to the job fair, and everybody is exchanging business card, she does not have one which makes her feel a little bit uncomfortable. Then she decided she will manually key in contact info to her phone. After she get home, she wants to follow up with one person she met in the job fair, but find that there is a typo. She start to worry and goes to Linkedin to search that person. Unfortunately, she could not find that person, maybe she remembered the name wrong. At end, she lose the connection and miss the opportunity.


The pain point is that exchanging contact is not easy, especially in a busy environment, and typos or unclear memory will easily lead to connection lost.


The app Proximity will solve the problem.



Planning


Features Prioritization


After all the research, we had too many ideas in our mind. As we only got limited time, we did features prioritization to choose the most relevant features. We had many great ideas such as hashtag system and smart reminder. But we will leave them for feature add ons.


Features Prioritization


User Flow


We made our primary user flow after we had agreement on the features we would like to have in the app.


User Flow Draft

This is the stage that we struggled a lot. We have different levels of acceptance of the key concept automative contact exchanging. One thinks that there need to be certain user actions when exchanging contact, which makes it not automatic any more. Things got complicated when we discussed deeper and thought about user privacy.


As we could not reach agreement on user flow, we did scenarios, user stories and use case to help us tidy up our thoughts and focus on solving user’s problem.


Scenarios:

Mikaella attends a job fair, but she doesn’t want to take her phone out during the conversation. She had some good conversations with John and others. She has the Proximity app on, so she can have a list of people at the job fair.John is an account manager, representing his company at the trade show, where there are so many potential customers passing by without having an opportunity to talk to them. John would like to exchange the company info and his business card automatically with everyone passing by his booth.Joe is a new graduate, and he has no budget to print any business cards. But he has proximity app, and he uses it as his business card to send his information to potential employers.


User Stories:

As a salesperson, I want to get as many contacts as possible, so that my sales will grow.

As a new graduate, I want to exchange contact info automatically, so that I don’t need to print business cards.

As an interior designer, I want to make as many connection as possible at the job fair, so that my number of clients will grow.


Use Case:

Persona: Michaela

User goal: Get as many contacts as possible so that she has more potential clients

Use Case

We got clearer idea about what the user flow should looks like after did above works and all agreed on the user flow. More over, we all agreed that we should follow our clients’ request and we will give them advices for their feature consideration. Below is my updated user flow after we finished the prototypes.


Final User Flow



Design and Prototypes


Hand Sketches (Wireframe)


We first did design studio which means we did our sketches individually. The sketches have many things in common and after reviewed all of them, we had our hand sketches done.


Proximity App Hand Sketches


Low-fidelity Prototype


We made low-fidelity prototype using Marvel.

Test Phase 1


We tested our hand sketches using Marvel before digitalize them. Our users faced same problems that they could not understand main menu bar tabs. We used “List” tab to represent people our users met, and “Case (Business Card Case)” to represent people our users saved. After we had feedback from our users, we decided to change the tab names. We brainstormed each tab and decided to change the tab names to “Network” and “Connection”.


Digital Sketches (UI)


We digitalized our drawings using Sketch. We used Apple style UI to make a simple but elegant app. As our target users are professionals, we used blue and white as our main colour. We tried to use Sketch Cloud so that we can work at the same time, but it turned out that the cloud function was not working properly. We ended up divide screens into three parts for three of us and combined them together later.


Digital Sketches


High-fidelity Prototype


We used InVision to made our high-fidelity prototype. We kept testing and editing and had our final prototype that we all satisfied.



Test Phase 2 Main Findings:


  • Terminology problems about privacy setting

  • Not very clear what will happen after add a person

  • Where to message people from connection list


Problem Solved


By using Proximity App, Michaela can view the list of people she just met that meet her criteria and save their contact info, she can also message them using the app. As the app will automatically collect contact info, she will not lose valuable potential clients any more.


Future Possibilities


As we had so many ideas that can help enrich the app and increase app stickiness, we also suggested our clients the other features to add on in the future.


  • QR code for direct contact info exchanging

  • Smart reminder — eg.: “ You both working in geological industry, how about grab a coffee with him?”

  • Actions: coffee, hang out

  • Timeline with connections

  • Map in timeline to hint the place you met


Conclusion


This is my first real client group project. During the project, we had a lot of discussions and sometimes conflicts. I am very proud that we made over all of them and had eventually reached agreement. My partners once got lost from following clients’ core concept, and I am glad that I could offer a little bit help. The best thing of being a member of this project group is that, we are all very enthusiasm and just want to put all our effort into it. We all listen to each other, and even though we had conflicts, we are still good friends! :)