What is Foursquare Studio?
Foursquare Studio is a web platform for data management and visuazilation. It's still a new product on the market but has a lot of potential, especially in the geospatial industry. They provide tons of innovative solutions for any kind of business.
Role Overview
As a lead product designer, I collaborated with product managers, developers, the marketing team, and founders to identify pain points and close user needs in the data visualization platform.
Impact on the Product
Redesigned MVP version to the brand-new web app that brought up an additional 15k+ customers;
Developed design system in collaboration with the team, accelerated concepts and features design;
Conducted user interviews and user testing to provide insights for a product direction, cutting processing time by 30% and improving task success rate by 18%;
Delivered end-to-end product, and created design documentation that helped align the team with new designers and developers.
Team Size
38-40 members
Empathize
Business Problem and Context
Whats Wrong?
Unfolded Studio started to grow as a new product on the market. Unfortunately, the product lost 11% of its target audience due to non-flexible design solutions and user patterns.
Problem Highlights
Most of the users can't figure out how to use global and local navigation properly and efficiently;
According to the current state, 11% of the users decided to bail out the platform because of gaps in sidebar navigation.
Define
Usability Heuristic Evaluation
I used Nielsen Norman Group’s usability heuristics to evaluate the current state of a product. The main purpose of this step was to understand how the platform works from a design perspective.
Example of Atomy Evaluation
Design Findings
Typography is lacking consistency;
The visual system has to be updated according to basic user interface requirements;
There is no clear way on how to use the platform for the new users;
Some of the user flows ended up with empty or irrelative screens.
User Interviews
At this point, I want to understand how the target audience interacts with products, patterns, and basic flows. Main purpose was to find find out more about the area of concern and conduct observations to engage and empathize with users.
User Interviews via Zoom
Interview Questions
How long have you been using geospatial web platforms?
What are your primary tools for daily routine?
Can you describe your common project?
What is the basic database you work with? Do you have an example?
Are there any specific features you would like to use to cope it?
At what stage of your projects you want to share findings or insights?
What is the first thing you're looking for when you want to create a new project?
Does your company use team plans for any different projects?
Main Insights
Enhance and simplify the global and local navigation menus for a better browsing experience.
The current search, filter, and layer provide tight options for data management.
Improve search and filter options for friendly and smooth data interactions.
Allow users to upload, share, and collaborate with maps.
User Survey
Main goal is to redesign core interface to make it more useful to both existing and new users. According to primary user testing we have to spend more time to develop comprehensive and neat user experience.
User Survey Questions/Results Preview
Survey objectives
How to develop better interface but not ruin current user experience.
We have to determine main interface capabilities to attract new users.
Map management has to be more intuitive and handy for users.
We need to create design system to make design-develop process rapid and swift. This solution should fit to business requirements.
Competitive Analysis
I was able to conduct competitor research in a few hours. I could mention only two of them because rest on the market focused on on map creation and do not cover user need.
Based on research I created a list of a main features to understand area of feature platform. Also I presented it to the team and we came up with a few ideas through brainstorm.
Key Features
Each competitor has his pros and cons. Deck gl is one of the most powerful and useful interfaces for users based on the first stage of competitor research. It gave us a lot of new ways on how to improve the current interface with high-demand features.
Competitor analysis by features
Thoughts
I used the key user insights to identify main user needs and product goals. At this stage, I want to align possible design approaches with business requirements.
Allow users more control over the data. It opens new ways for target audience to engage with a product features. Help new users to get used to the platform with a smooth and clean approach. Allow teams and companies to collaborate in efficient environments.
Develop
Building Structure
User Flows and Information Structure
At this stage, I developed information architecture. Previous steps allow me to be more certain about pain points. I discussed potential flows with the team and how to avoid UX gaps.
Lo and Hi Fidelity Mock Ups
Based on a well developed journey map and user flow I created lo fi wireframes. Main purpose was to show basic user experience and present it to the team. I believe close communication on this step could reflect on whole app experience. As a result lo fi and hi fi wireframes helped to figure out core scenario and enhance some features.
Lo-Fi and Hi-Fi examples for key screens.
Core Features
Map Management
The Studio Dashboard page is your hub for accessing maps, data, and other assets. At this step user able to observe maps, create new or find useful insights on a platform. Most of attention was paid to “Quick Start” section because it most handy block for newbies.
Create a Map
At this point user has two different solutions how to engage with a platform. Map creation is essential flow and allow users to create map from scratch or use existing template. All of the available templates are separated by categories, views, or filter out.
Local Map Management
One of the most important feature was map management. Main challenge on this step was to create comprehensive and accessible panel. Most of the time I spent to compose right structure for top nav. To be more specific I described my solutions step by step. Also I presented 2 concepts to the team. Discussion took a place for a while and we came up with final designs.
Filters, Base Map, and Analysis
I’d like to merge all of these steps together to be more specific and clear. Most fascinating component here was the filter. According to product requirements it means huge amount of data should be displayed in a right way. I decided to split all the filters in some categories. This approach have been helping users to pay attention only to the selected category. It appears that this solution is better than common list.
Publish, Export, and Share
You can publish your project, creating a snapshot of your map accessible to anyone with a link. A published map is a saved state of the map at the time of publication, which does not update as you make changes. You may add advanced options like password protection, remove studio branding, allow data export, and allow quotas. There are a few way to share such a link, via social media or via code.
Deliver
The Solution
Brand new platform with new global and local navigation that allows new and existing users to enhance their experience with data visualization. The most comprehensive solution is global navigation. The team and I paid a lot of attention to detail to build it smoothly and easily for new users. As a result, I came up with more than 400 web screens, design system, and design documentation.
Design System
Designed and delivered new components based on the business requirements, document design patterns, icons, templates, and custom elements. As a result new team members were able to dive in in product ecosystem as soon as possible.
Outcome & Impact
An overwhelming positive response from users that were involved in product as target audience. Since the release we have seen a great positive impact on a customer behavior.
New data and results helped to plan new features and build more comprehensive version of the app. Thus on the second round unfolded was bought by foursquare. At this point my job was done. I was grateful to be a part of such an interesting team.
12.4 mins
Session duration
11.4K
Users were affected
86%
CSAT score
Product Notes
Adapt to the Changing Consumer Behavior
We needed to stay grounded and focused on the goal, but also account for changes to the product to match the changed behavior of customers during the pandemic.
Take It One Phase at a Time
We learned to break down complicated designs into small, manageable chunks. This eases development and handles bugs as we go along.
Next Steps
Keep Growing
One of the most important step is to keep improving product. Based on a user testing I create a list of a potential features. I believe company will update an app according to it.
Continue to Develop
One of the most important step is to keep improving product. Based on a user testing I create a list of a potential features. I believe company will update an app according to it.
Bug Fixing
Even though we spent a lot of a time to get first version of a product we have to fix every gap in the app.
