Redesigning Kardder's core feature, Nearby
Overview
Kardder is a social media application that enables and facilitates in-person interactions with one’s immediate, real-time vicinity. It uses location data and connects you with people, places, and events near you, happening right now.
Nearby, a page showing active users within a user's quarter mile radius, is Kardder's holy grail feature.
I worked as a designer with a close team to reimagine how to better present Nearby as the core feature of Kardder.
Team
Shimei Guan, Trevor Remeyer, and myself.
Role
Product Design
The Problem
The big question I was given when I was brought into the internship: Nearby is the most important, distinguishing feature of the app and is something unique to Kardder and only to Kardder. Conducting a product teardown of Nearby, we identified these problems with Nearby:
Nearby is currently very similar to Browse - a page that shows all the users on the app. The profile presentations are the same, and the only difference is that Nearby changes with active users and location.
Nearby in its current state does not indicate its functionality. In the current state, profiles on nearby do not indicate that these are active users, and that they are within the 0.25 mile radius.
Nearby doesn't feel like the primary feature of Kardder. Positioned as the second feature in the navigation bar and sharing visual similarity with Browse, Nearby does not stand out as the distinguishing feature of Kardder.
And so, we arrived at the overarching problem which guided out goals:
Due to issues in prominence, showcasing functionality, and redundancy, Nearby does not present itself as the selling point and the unique centerpiece of Kardder.
THE SOLUTION
To redesign Nearby to signify its uniqueness and how to frame it as the core feature of Kardder, my team and I tackled the issue by identifying goals for each of these three problem areas:
How can we create separate experiences between Nearby and Browse?
How can we showcase how Nearby is used: to see active users that are within your immediate vicinity?
How can we bring Nearby forward as the most visually and functionally salient feature of Nearby?
Increasing Prominence
Browsing the market and looking at apps like SnapChat and Citizen, I found that a powerful way to signify the importance of a feature is to enlarge and center it. This led to our design where Nearby became the most visually catching icon in the center of the navigation bar
Indicating Functionality and Addressing Redundancies
Browse is a page residing in the Search icon in the navigation bar that shows all active users on the app regardless of active status and distance. Browse was visually very similar to Nearby and consequently shared redundancies with Nearby. As a group, we collaborated to explore how we can set Nearby apart from Browse.
I initiated the addition of an active status indicator to profiles on Nearby. With it being a common indicator of activity, users can apply their prior knowledge associated with this icon when using Kardder.
Exploring possibilities of rethinking the Nearby image, I incorporated the active status indicator into new ideations of the page and arrangement. Within these new designs of Nearby, all of them encompassed a novel auto-refresh feature, so that users can always see a periodically up-to-date view of people nearby without having to manually refresh. I pushed for the addition of these visible and adjustable features to offer both clarity about and flexibility in Nearby’s function, and to distinguish Nearby both visually and functionally from Browse.
Highlighting in-the-moment functionality and close proximity.
A freeform arrangement representing distance as profile size.
Minimal but powerful changes, allowing adjustable Nearby radius.
Constraints and Converging
As we presented our designs to the CTO and higher-ups week by week, we learned of certain constraints that eliminated our redesigns.
Although our designs presented people in the form of networks and relationships, we were encouraged to maintain the card format to preserve this affordance of profile discovery.
Nearby is meant to show the immediate vicinity, so it must be kept at the 0.25 mile radius cap. Although our adjustable Nearby radius offered the flexibility for users, the function of Nearby should still be restricted in order to focus on the ability to see and find people in their immediate vicinity.
Auto-refresh was computationally intensive and may not be applicable to users who may have their location only active when they are using the app.
Now having big profile changes out of the question and functionality to be constant, we were set back in eliminating redundancies with Browse. However, these insights from the constraints gave us more focus to improve the existing UI while incorporating the progress we made so far: active status button and centering of the icon.
Indicating Functionality - Revisited Through Profiles
Meanwhile, another intern group was redesigning profiles previews to promote a more casual atmosphere. I was invited to support the group, changing the arrangement of profile elements and replacing the more suggestive “percent match” with a neutral “common interests”. I took my idea of the active status indicator and introduced that to the profile preview, structuring the visual hierarchy of profile elements from active status, to distance, to shared interests.
As I worked across groups to converge our designs, I was able to introduce a profile view into Nearby that now more heavily delivers Nearby's functionality of showing real-time users and close distance through its visual arrangement, all while still maintaining the element of common interests that falls within the profile discoverability constraint.
Addressing Final Issues with Redundancies and Prominence
During the redesign process, we also worked on a novel Map function to present posts in any user-defined area. As I worked with my team to develop Map, I also pushed for the combining of Browse and Nearby. This would accomplish two things:
1) Eliminate the idea of Browse as a redundant version of Nearby within Kardder and introduce it as secondary to Nearby, increasing Nearby's perceived importance and prominence.
2) Give real estate in the navigation bar for the Map feature to reside.
With Browse as a secondary feature tucked within Nearby, Nearby now became the most prominent centerpiece where all profile presentations resided, from Nearby, to Browse, to Favorites.
The version that remained in the app for the rest of my tenure, one that served as the core feature, most prominent page, and visibly and functionally the selling point of Kardder.
