Location-based discussions

Add conversational maps to the Esri ecosystem so customers stop using competitor solutions.

Three step process that takes place on a gray map. First you can add a post then you see a floating editor with a subtle shadow and finally a pin with an attractive bubble floating over it with the number one to indicate a post is present.

Tools: Figma, Whimsical, Adobe XD, Lucid Spark, Usertesting.com
Client: ArcGIS Hub
My Role: Senior Product Designer, Esri, Q3 2021 – 2023

Location-based discussions

Add conversational maps to the Esri ecosystem so customers stop using competitor solutions.

Three step process that takes place on a gray map. First you can add a post then you see a floating editor with a subtle shadow and finally a pin with an attractive bubble floating over it with the number one to indicate a post is present.

Tools: Figma, Whimsical, Adobe XD, Lucid Spark, Usertesting.com
Client: ArcGIS Hub
My Role: Senior Product Designer, Esri, Q3 2021 – 2023

Project timeline

A color coded timeline spanning two years with simple boxes of work.

As the lead designer for the engagement features of Esri’s ArcGIS Hub premium offering, I have been involved in the entire design process for discussions. This includes discovery, storytelling, interaction design, and collaborative workshopping. The following timeline provides a summary of the major phases of my work.

Journey map

Results of a UX study aimed to evaluate the discussion feature’s discoverability and ease of use for basic tasks. Most users failed to add locations on their first attempt, so I convinced stakeholders to prioritize enhancements. We updated the drawing tools’ location and added helper text for adding locations.

Research activity

top left has thoughtful looking people watching user testing of an interface. Top right has goals of the activity. Bottom is a summary of comments from those participating.

I led a user study watch party so that engineers could develop empathy for users, reflect on our UI/UX, and collaborate on ideation. I curated examples from usertesting.com for asynchronous review and provided questions for each session. After, we came together as a group to generate ideas for the next steps.

My contributions to this ongoing project

a grid of slides that shows text and examples explored, highlighting things that did not go as expected in red.
  • 2021 – Participated in planning workshops and convinced the team to rethink pagination. I presented an analysis to the team and made a case that paginating pins on the map would not be intuitive for users who were familiar with other commenting tools. This convinced the team to refactor that part of the experience before launch.
usertestingdiscussionentrance
  • 2021 – Usability-tested discussion entrance flows. I determined panel actions were used more than floating action buttons, so we omitted FABs from the scope. I also discovered that not all users were familiar with the reply icon. So we moved away from the icon-only button which made the interface less compact but increased the discoverability of threads and the ability to add replies.
Mid fidelity design examples are mapped to a colorful target diagram. Those closest to the middle are most important.
  • 2022 – Produced forward-thinking discussion feature explorations so that the product team could facilitate ideation sessions with customers and prioritize the roadmap. My explorations included options for moderation, new post types (polls, announcements, questions), lightweight analysis, and discussion topics with customizable map markers. The product team had various customers rank options from must, should, and could-haves and summarized findings using my mid-fidelity work as examples of each feature option.
before and after images showing big checkmarks next to things that tested well with users. They liked the comment shaped container over the icon.
  • 2022 – Tested map discussions with our “community person” on Usertesting.com. The comment-shaped marker with a number inside was preferred and clustering markers slowed users. To reduce cognitive load, we did not add clustering markers and instead prioritized a comment preview to speed up exploration.
Starting with a flurry of options and comments on a design file the end result of reactions is elegant and simple.
  • 2023 – Collaborated on the design of reactions by evaluating three styles with engineers and stakeholders. We chose a curated set of Unicode emojis, ensuring they met color contrast standards. The team voted to narrow the initial list, and we had several design critiques to determine the optimal placement and style of reactions based on our available library and existing post layout. There were a surprising number of decisions to make for such a familiar UI pattern.
hide action displays a small rounded rectangle with the words hidden by moderator
  • 2023 – Rapid design of simple discussion moderation. Some customers were not comfortable adopting the feature with larger audiences until there were basic moderation capabilities. I worked quickly to provide engineers with a flow chart and approved components, styles, and strings for in-line moderation and blocked words. Now moderators can manually hide posts and automate auto-hiding based on a list of blocked words and phrases.

++Sam – for taking complex ideas and breaking them down into thoughtful designs and intuitive workflows.

– Josh, senior geospatial developer on my scrum team

Read about this feature from the product blog, Have you heard about Hub discussions? ➔

Before and after of ArcGIS Hub events on a colorful background. What used to be a cluttered and confusing interface is now streamlined and consistent.
Community events