To develop and ship a new map-search feature, and add to RelPro's existing relationship-management platform.
Front End UI Design and Development Intern at RelPro, a B2B software company (Fall 2017)
Myself, another UX Design Intern, and a Front End Engineer
Designing a Geographic-Search Feature
In Fall 2017 I interned at RelPro to design and develop the user interface of a new location-based search feature.
RelPro is a business intelligence software application for sales intelligence and relationship management. It leverages data aggregation and analytics to help marketing, sales and customer success teams to better target, get and keep clients.
Understand the Current Product
Profiling the Existing Customers
RelPro is an up-and-running relationship management product since 2011. As of September 2017, there are over 2000 business subscribers.
Therefore, in order to design the next feature, we need to first understand the current user groups, and how they use RelPro.
Competitive Analysis for Current Product
To best translate and extend the RelPro experience, we also need to identify what makes RelPro stand out from its competitors.
Research + Design Process
The user should feel familiar and intuitive when researching with the map interface. The experience should be similar to using other RelPro search features.
Map-Specific Design Challenges
Survey on Map-Based Web Apps
We surveyed eight different map-based consumer apps (B2B software with map features was hard to find), four of which are shown below. We analyzed, respectively, how each interface facilitates user experience.
Amongst the map-based apps, there are two essential components that formulates the user experience: pins and floating information cards.
UI Design for Map-Search
When designing the UI, I was also given the task to evaluate the popular map plug-ins and APIs, to recommend the best fit for RelPro.
Later on, I was assigned to program the working prototype using that API. This technical phase took 2~3 weeks, in which I worked closely with the tech team to deliver the hi-fidelity prototype.
Below is a glimpse of the work-in-progress prototypes I’ve tried, through which I considered different functional requirements:
1. Began coding with the traditional map pins
2. Customize pins by instance attributes, such as branch company and subsidiary company. (The circle pins are PNGs, the star pins are by Google Map API's vector drawing function)
3. Create one-to-many pins using the MarkerClusterer library from Google. (I also customized the PNGs for markers, to align with RelPro's visual style)
4. Use tree-structured hierarchal checkboxes (DOM) to dynamically add/delete pins from the map
The finished program was shipped in November 2017.
In this version, we used individual pins instead of “clusterers”, because it turned out that, after the user sets filtering parameters, rarely would there be > 500 search results. Therefore, using single pins is a better solution, allowing users to view the discrete search results with less mouse clicks.