Interactive Location Chat
How can we build a bridge between physical connection and digital connection based on location?
Timeline: 2 months
Platform: Android
My Role: Design Lead
Overview
As the sole design lead I fully implemented the entire
product design cycle. The team consisted of myself, a project manager, and five developers. Now available in google play.
The Problem
People exist digitally but there is no way to meet someone at an event or at a same location. This application could be a way to merge them both. Location chat wants to build a bridge from the digital world and the real world.
To give the opportunity to meet and learn from people in your current location or event. People are uncomfortable with face to face interaction. We need to eliminate the initial awkwardness of in-person interaction.
What was the design thinking?
In order to take a solution-based approach to solving the problem, I created a design process that revolved around my users. Since they were the end users, including them in the design thinking was in the best interest of everyone at stake.
This process helped me observe and develop empathy with our target audience. The following diagram shows the steps taken in each phase of the project.
01
02
03
04
05
Understand
User Problem
Business Goals
Research
Competitive Analysis
Assumptions
Target Audience
Analyze
User Personas
Journey Map
Site Map
Design
User Flow
Sketches
Wireframes
Test
Usability Tests
What did the client say?
I made it a priority to schedule a meeting with the client as soon as possible. This step was extremely important to better understand the business so I could set the boundaries of the design project.
Defining Goals & Objectives
I needed to define the goals and objectives and most importantly learn about the assumptions being made about the user.
Understanding their business needs would give me insights and empathy to find ways to create a user experience.
Promote better and secure chat rooms
Build an audience.
Location chat wants to stand out from the competition.
Find a balance of app notification feature.
Help people safe and meet new people at the same time.
Find the top five location app's on the App stores.
What does the research say?
After I uncovered the business objectives and goals, it was time to take out my curious detective hat and gain a clear understanding of the problem I was going to solve.
I wanted to envision exactly what I was about to design.
So Why do people allow apps to access location data? I pulled a demographic data analysis to help us sort our research.
Why do people use location?
People find it convenient to share location. It becomes extremely easy to meet up with someone and not having to send directions.
People practice being safe when sharing location. Parents find it safe to share location to ensure safety of their loved ones.
People are willing to trade their privacy. They believe the app's benefits are greater than it's potential. Men are more willing to share location then women.
Some existing applications
We wanted to personalize users’ experiences with a location chat app or feature that most smartphone owners will appreciate.
My main focus was to look into web/mobile messaging portal that automatically puts people in an anonymous chat rooms based on their geographical proximity, or something along those lines.
Search for answers:
-
What other companies offer a similar platform?
-
What are they doing successful?
-
What is not so great about the app?
How will the user map out?
Our user is a workaholic and has lost connection with his circle of friends. It seems like a lot of work for him to maintain his network of friends.
All social interaction is limited to his/her professional environment. He/she would like to engage and interact with other people in his/her area and expand his/her circle of friends on the go.
Early Sketches
Sketches are an important part of the design and development process. I wanted to demonstrate functionality, visualize the user flow and illustrate anything that would require human interaction.
This step really helped me discover potential issues and solutions early, prior to starting the design and development stage. I tested out the sketches with 1-2 users before I moved on to wireframes.
Android
iPhone
Skeleton of the Design
Wireframes is the part where the ideas from sketching got more refined and moved a step closer to the finer details of a user interface for location chat.
I used Sketch to build the skeleton of the application. My goal was to focus on figuring out the layout and content placement, and solving navigation and functionality issues in a more simple and easy to use way.
Wireframe Iteration 1 = Not Approved
Sign In
Sign Up
Join Chat
Chat Room
Menu Expand
My Profile
Map View
The skeleton haunt continues...
The solution had to be in the least clicks as possible. Due to lack of resources in the team the app was now being built as an android app. I had to quickly switch gears and adjust my designs to meet the needs of android users.
I asked my android users to tell me how the iOS designs would look if it was an android app. Since I only had iPhone experience, I thought why not ask the experts.
Wireframe Iteration 2 = Approved
Sign In
Join Chat
Map View
Chat Room
My Profile
How does the user flow?
In order to figure out what it will take for a user to complete a specific task on this location chat I created a visualization of each step. The user flow really helped me to document user interaction points and communicate the design process effectively with stakeholders and developers.
When presenting the user flow to the team, I focused more on the experience and the needs of the user to support the features and the functionalities of the application.
What is the test plan?
Recommendation report
In order to figure out what it will take for a user to complete a specific task on this location chat I created a visualization of each step. The user flow really helped me to document user interaction points and communicate the design process effectively with stakeholders and developers.
When presenting the user flow to the team, I focused more on the experience and the needs of the user to support the features and the functionalities of the application.
Join chat styling
-
Users were confused if they were in the google map app for a sec the colors seemed off.
-
Users felt they were entering the goole map app and sharing their location, felt insecure.
Recommendations
The button was changed to the color scheme to match the app. The spacing was also corrected. Still major styling was missing.
Join a chat
Usability testing results:
-
100% users were clicking on the entire box/title of the chat room.
-
Users thought the plus expand button was to add the chatroom into their dashboard or account.
-
No one clicked on the expand (plus sign) button to get more details of the event.
Recommendations
Plus sign will be replaced by the downward facing chevron. Since it has the affordance of more details below. The entire event box is clickable for ease of use for the user.
Map styling
Usability testing results:
-
Users were not scrolling down to see the details of the events.
-
Users expected all the information to be available on the screen when viewing the map feature.
Recommendations
Map was re-sized to fit 1/4 of the screen, so that enough content was displayed to give it the affordance of scrolling down.
Key takeaways
01
02
03
The biggest challenge for this project was converting iOS designs for android devices one month into the project. Due to the skillset of our team and having strong android skills led us to shift our direction from iOS to Android app as the MVP. It was decided by the entire team we would build the iOS if time permitted.
Design is a challenge itself, on top of that having little exposure to an android device was not helping. I came to this conclusion when I had tested an android user with an iOS Design.
It was a huge learning point for me. If i was having trouble with operating an android device, then the feeling was mutual for an android user to use iOS designs.
04
05
06
07
I went into brainstorming phase again, How might I overcome this device hurdle? It was a huge usability issue and I had to think out of the box to resolve this matter.
Learning to use an android would take too long. Buying a device was not feasible at the time. I called out an android party invitation (recruitment screener).
Tested the iOS designs with android users and asked them (experts) to tell me what was wrong with the design.
Everything started to make sense and back to ideation I went and how the end result came to be testing after iteration and repeat till we had happy users.
iOS Designs
Iteration 1
Android Designs
Iteration 2
Final Product
Iteration 3